CSS. Tipo de letra (fuente) (1)

Valor numérico con unidades absolutas

Se puede definir un tamaño concreto, por ejemplo, 14pt, 3cm, 20px, etc.

Nota: Hace años (antes de 2010) se desaconsejaba utilizar estas unidades de forma indiscriminada porque los navegadores no permitían reducir ni ampliar los elementos definidos mediante unidades absolutas, pero actualmente no existe esa limitación.

p {
  font-size: 16pt;
}

Valor numérico con unidades relativas

Se puede definir el tamaño de cada elemento mediante porcentajes (o em o rem, teniendo en cuenta que 1em = 100% y que 1rem = 100%), que se interpretan con respecto al tamaño base.

p {
  font-size: 150%;
}

p {
  font-size: 120%;
}

p {
  font-size: 80%;
}

Grosor del trazo (negrita): font-weight

La propiedad font-weight permite elegir el grosor del trazo. Existen nueve valores numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900), del más fino al más grueso. Además, existen los valores normal y bold que deben coincidir respectivamente, con los valores numéricos 400 y 700. Y por último, existen los valores lighter y bolder que significan, respectivamente, un valor inferior y superior en la lista de valores numéricos y se interpretan respecto del elemento padre.

Al definir el grosor con valores numéricos, los navegadores muestran tres grosores distintos (de 100 a 500 como normal, 600 y 700 como bold y 800 y 900 más grueso que bold). Esos grosores no se aprecian de la misma manera en cada tipo de letra. En la siguiente lista, cada valor está en el grosor indicado por el propio valor:

• Fuente sans-serif
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal y bold
  • lighter y bolder
• Fuente serif
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal y bold
  • lighter y bolder
• Fuente monospace
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal y bold
  • lighter y bolder
• Fuente cursive
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal y bold
  • lighter y bolder

p { font-family: sans-serif; }

p.g400 { font-weight: 400; }

p.n { font-weight: normal; }

p.g700 { font-weight: 700; }

p.b { font-weight: bold; }

p.g900 { font-weight: 900; }

El valor bolder hace que el elemento se muestre, si es posible, con un grosor mayor que el del elemento en el que está incluido. En el siguiente ejemplo, cada lista se muestra con un grosor mayor que la anterior:

p {
  font-weight: normal;
}

ul {
  font-family: sans-serif;
  font-weight: bolder;
}

Inclinación (itálica): font-style

Una forma de obtener una variante de un tipo de letra es inclinar las letras. En Tipografía se distinguen dos formas de inclinación:

• oblicua: la forma de la letra no cambia, simplemente se inclina
• itálicas: además de inclinarse, la forma de algunas letras cambia

Para distinguir si una fuente es oblicua o itálica, es necesario fijarse en letras como la "a". La imagen siguiente muestra un ejemplo: la primera línea corresponde a la fuente Aldine (normal e itálica) y la segunda línea corresponde a la fuente Arial (normal y oblicua).

La propiedad font-style permite elegir la inclinación: normal, oblique o italic. Para que los navegadores puedan mostrar las variantes oblicua e itálica es necesario que en el ordenador esté instaladas fuentes de ambas variantes, lo que no suele ser habitual.

En general, si no hay instaladas fuentes específicas, los navegadores simplemente inclinan el tipo de letra normal, tanto para oblique como italic. Como esto correspondería más bien a la variante oblicua, se aconseja dar el valor oblique en vez de italic.

p {
  font-family: sans-serif;
  font-size:150200%;
  font-style: normal;
}

p {
  font-family: sans-serif;
  font-size: 150%;
  font-style: italic;
}

p {
  font-family: sans-serif;
  font-size: 150%;
  font-style: oblique;
}

Para probar si realmente los navegadores distinguen entre italic y oblique, se debe utilizar una fuente que tenga ambas variantes, por ejemplo, la fuente libre Latin Modern Roman. El ejemplo siguiente utiliza fuentes web para mostrar esa fuente aunque no esté instalada en el ordenador del usuario.

p.oblique {
  font-family: "Latin Modern Roman";
  font-style: oblique;
}

p.italic {
  font-family: "Latin Modern Roman";
  font-style: italic;
}

Nota: Firefox aplica esta propiedad correctamente, mientras que Chrome no lo hace, como se comenta en la página de diferencias entre navegadores.