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.
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.
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.
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.
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. |
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).
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.
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) |
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).