Tipografías CSS

Las tipografías (también denominadas fuentes) son una parte muy importante del mundo de CSS. De hecho, son uno de los pilares del diseño web. La elección de una tipografía adecuada, su tamaño, color, espacio entre letras, interlineado y otras características pueden variar mucho, de forma consciente o inconsciente, la percepción en la que una persona interpreta o accede a los contenidos de una página.

Detalles de una tipografía

Existen multitud de características en las tipografías que convendría conocer antes de continuar, por lo que vamos a ver algunas de ellas:

• Serifa: Las fuentes o tipografías que utilizan serifa o gracia, son aquellas que incorporan unos pequeños adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar su nombre en «Serif» (con serifa).

• Paloseco: Las fuentes o tipografías de paloseco son las opuestas a la anterior: unas tipografías lisas, sin adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar su nombre en «Sans Serif» (sin serifa).

Tradicionalmente, se han utilizado tipografías con serifa en medios impresos argumentando que dichos bordes ofrecen una mayor legibilidad que las tipografías de paloseco, ya que ayudan a reconocer más rápidamente las letras. En medios digitales, las tipografías de paloseco suelen ser más comunes puesto que dan un aspecto más limpio y ayudan a que se canse menos la vista del usuario. No obstante, todo esto puede ser muy subjetivo y está sujeto a diferentes interpretaciones.

• Monoespaciada: Por otro lado, existe un tipo de tipografía denominada fuente monoespaciada, que se basa en que cada una de sus letras tienen exactamente el mismo ancho. Son muy útiles para tareas de programación o emuladores de terminal, donde se leen mejor líneas con estas características, ya que no queremos que una línea sea más corta dependiendo de su contenido.

Propiedades básicas

Existe un amplio abanico de propiedades CSS para modificar las características básicas de las tipografías a utilizar. Aunque existen muchas más, a continuación, veremos las propiedades CSS más básicas para aplicar a cualquier tipo de tipografía:

Propiedad	Valor	Significado
font-family	|	Indica el nombre de la fuente (o una lista de ellas).
font-size	| |	Indica el tamaño de la fuente.
font-style	normal | italic | oblique	Indica el estilo de la fuente.
font-weight	peso	Indica el peso (grosor) de la fuente (100-800).

Con ellas podemos seleccionar tipografías concretas, específicar su tamaño, estilo o grosor.

Familia tipográfica

Empezaremos por la más lógica, la propiedad CSS para seleccionar una familia tipográfica concreta. Con esta propiedad, denominada font-family , podemos seleccionar cualquier tipografía simplemente escribiendo su nombre.

Si dicho nombre está compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples para indicarla (como se ve en el segundo ejemplo):

body {
    font-family: Verdana;
    font-family: 'PT Sans';
}

Esta es la forma más básica de indicar una tipografía. Sin embargo, hay que tener en cuenta un detalle muy importante: estas fuentes sólo se visualizarán si el usuario las tiene instaladas en su sistema o dispositivo. En caso contrario, se observarán los textos con otra tipografía «suplente» que esté disponible en el sistema, pero que puede ser visualmente muy diferente.

Esto convierte una tarea a priori simple, en algo muy complejo, puesto que los sistemas operativos (Windows, Mac, GNU/Linux) tienen diferentes tipografías instaladas. Si además entramos en temas de licencias y tipografías propietarias, la cosa se se vuelve aún más compleja.

Consejo: La página FontFamily.io incorpora un sencillo formulario para mostrar información sobre determinadas tipografías y como se mostrarían en diferentes sistemas (Windows, Mac OS, GNU/Linux, Android, iOS, Windows Phone, etc...). Más adelante, veremos la regla @font-face de CSS3, que permite solucionar este problema y la usan «por debajo» sistemas como Google Fonts.

Fuentes seguras

Un primer y sencillo paso para paliar (en parte) este problema, es añadir varias tipografías alternativas, separadas por comas, lo que además se considera una buena práctica de CSS:

div {
    font-family: Vegur, 'PT Sans', Verdana, sans-serif;
}

De esta forma, el navegador busca la fuente Vegur en nuestro sistema, y en el caso de no estar instalada, pasa a buscar la siguiente (PT Sans), y así sucesivamente. Se recomienda especificar al menos 2 ó 3 tipografías diferentes.

Consejo: Como última opción de font-family se recomienda utilizar una palabra clave denominada «web-safe fonts» (fuente segura). Esta fuente segura no es una tipografía específica, sino una palabra clave con la que se denomina una categoría. Esto indica al navegador que debe buscar una tipografía instalada en el sistema que entre dentro de la misma categoría.

Las palabras clave de fuentes seguras son las siguientes:

Fuente	Significado	Fuentes de ejemplo
serif	Tipografía con serifa	Times New Roman, Georgia...
sans-serif	Tipografía sin serifa	Arial, Verdana, Tahoma...
cursive	Tipografía en cursiva	Sanvito, Corsiva...
fantasy	Tipografía decorativa	Critter, Cottonwood...
monospace	Tipografía monoespaciada	Courier, Courier New...

Existen algunas otras fuentes seguras menos conocidas, más relacionadas con la configuración del sistema:

Fuente	Significado
system-ui	Tipografía por defecto del sistema.
ui-serif	Tipografía serif por defecto del sistema.
ui-sans-serif	Tipografía sans serif por defecto del sistema.
ui-monospace	Tipografía monoespaciada por defecto del sistema.
ui-rounded	Tipografía con bordes redondeados por defecto del sistema.
math	Tipografía especializada para conceptos matemáticos.
emoji	Tipografía diseñada especialmente para emojis.
fangsong	Tipografía con carácteres de estilo chino.

Tamaño de la tipografía

Otra de las propiedades más utilizadas con las tipografías es font-size , una tipografía que permite especificar el tamaño que tendrá la fuente que vamos a utilizar:

Propiedad	Valor	Tipo de medida
font-size:	xx-small | x-small | small | medium | large | x-large | xx-large	Absoluta (tamaño predefinido)
font-size:	smaller | larger	Relativa (más pequeña/más grande)
font-size:	tamaño	Específica (tamaño exacto)

Se pueden indicar tres tipos de valores:

• Medidas absolutas: Palabras clave como medium que representan un tamaño medio (por defecto), small: tamaño pequeño, x-small: tamaño muy pequeño, etc...

• Medidas relativas: Palabras clave como smaller que representan un tamaño un poco más pequeño que el actual, o larger que representa un tamaño un poco más grande que el actual.

• Medida específica: Simplemente, indicar píxeles, porcentajes u otra unidad para especificar el tamaño concreto de la tipografía. Para tipografías se recomienda empezar por píxeles (más fácil) o utilizar estrategias con unidades rem (mejor, pero más avanzado).

Estilo de la tipografía

A las tipografías elegidas se les puede aplicar ciertos estilos, muy útil para maquetar los textos, como por ejemplo negrita o cursiva (italic). La propiedad que utilizamos es font-style y puede tomar los siguientes valores:

Valor	Significado
normal	Estilo normal, por defecto. Sin cambios aparentes.
italic	Cursiva. Estilo caracterizado por una ligera inclinación de las letras hacia la derecha.
oblique	Oblícua. Idem al anterior, salvo que esta inclinación se realiza de forma artificial.

Con la propiedad font-style podemos aplicarle estos estilos. En la mayoría de los casos, se aprecia el mismo efecto con los valores italic y oblique , no obstante, italic muestra la versión cursiva de la fuente, específicamente creada por el diseñador de la tipografía, mientras que oblique es una representación forzosa artificial de una tipografía cursiva.

Peso de la tipografía

Por otro lado, tenemos el peso de la fuente, que no es más que el grosor de la misma. También depende de la fuente elegida, ya que no todas soportan todos los tipos de grosor. De forma similar a como hemos visto hasta ahora, se puede especificar el peso de una fuente mediante tres formas diferentes:

Propiedad	Valor	Significado
font-weight	normal | bold	Medidas absolutas (predefinidas)
font-weight	bolder | lighter	Medidas relativas (dependen de la actual)
font-weight	peso	Medida específica (número del peso concreto)

• Valores absolutos: Palabras claves para indicar el peso de la fuente: normal y bold. Normal es el valor por defecto.
• Valores relativos: Bolder (más gruesa) o Ligther (más delgada).
• Valor numérico: Un número del 100 (menos gruesa) al 900 (mas gruesa). Generalmente, se incrementan en valores de 100 en 100.

OJO: Ten en cuenta que los diferentes pesos de una tipografía son diseñados por el creador de la tipografía. Algunas tipografías carecen de diferentes pesos y sólo tienen uno específico. Esto es algo muy sencillo de ver en Google Fonts (al seleccionar una tipografía).