CSS: Fuentes

En CSS existen muchas propiedades que permiten modificar las fuentes de un documento HTML, como el tipo de letra (tipografía), el estilo de la fuente, la variante, el grosor o su tamaño. Mediante la propiedad abreviada font se pueden definir todos estos parámetros en una única propiedad.

En diseño web es importante elegir una buena tipografía: aquella que sea fácil de leer. También es importante que tenga un tamaño lo suficientemente grande como para que el lector no se deje la vista. En definitiva, es importante que el texto se pueda leer de forma cómoda y sin esfuerzo visual.

Tabla de propiedades para definir fuentes en CSS:

La propiedad ‘font-family’

La propiedad font-family permite definir el tipo de letra (tipografía). Existen muchos tipos de letra que conviene conocer antes de continuar. Las fuentes con serifa, las de paloseco y las monoespaciadas. A continuación detallamos sus diferencias y sus contextos de aplicación.

Fuentes con serifa

Las fuentes que usan serifa (o gracia) son aquellas que incorporan unos adornos ubicados en los extremos de las líneas de cada letra. Las tipografías más conocidas que usan estos remates o patines son Times New Roman, Georgia y Garamond. Son muy usadas en periódicos y documentos certificados.

.times {
  font-family: Times New Roman,
}

.georgia {
  font-family: Georgia,
}

Párrafo con la tipografía Times New roman.

Párrafo con la tipografía Georgia.

Fuentes de paloseco

Las fuentes de paloseco son aquellas que no usan adornos o remates en las terminaciones de cada letra. Por esta razón también son conocidas con el nombre de sin serifa o sans serif (del francés sans: “sin”). Las más populares son Arial y Verdana, usadas por ejemplo en la web y textos educativos.

.arial {
  font-family: Arial,
}

.verdana {
  font-family: Verdana,
}

Párrafo con la tipografía Arial.

Párrafo con la tipografía Verdana.

Fuentes monoespaciadas

Las fuentes monoespaciadas son aquellas en las que cada letra mide la misma anchura. Tienen su origen en las máquinas de escribir analógicas. Son muy usadas en programación y en documentos notariales, como las escrituras de una propiedad. Ejemplos de ello son Courier y Monospace.

.courier {
  font-family: Courier,
}

.monospace {
  font-family: Monospace,
}

Párrafo con la tipografía Courier.

Párrafo con la tipografía Monospace.

El uso de ‘font-family’

Los navegadores web muestran el texto utilizando los tipos de letra instalados en el dispositivo electrónico, ya sea un ordenador, un móvil o una tableta digital. Si el diseñador web especifica una fuente de texto que no existe en ningún dispositivo, ningún usuario podrá visualizar dicha fuente.

Por lo tanto, es importante asegurarse de usar fuentes que estén disponibles en todos los equipos. Incluso es posible indicar una lista de fuentes para que, si una no existe, se aplicará la siguiente de la lista. En este sentido, es habitual indicar listas de fuentes muy similares en cada caso.

Para no tener que indicar decenas de fuentes, es habitual hacer uso de las familias de fuentes genéricas. Son un mecanismo gracias al cual el navegador web utilizará la fuente más parecida a la palabra clave indicada, y se utilizan al final de la lista. Por ejemplo, mediante la palabra clave serif se mostrará la fuente que más se parezca a las fuentes con serifa, como Times New Roman.

Tabla de familias de fuentes genéricas:

La sintaxis de las familias de fuentes es una lista de nombres separados por coma. Cuando una fuente está compuesta por más de una palabra debe introducirse entre comillas. En cambio, el nombre genérico de las fuentes debe ir sin comillas. Vamos a ver algunos ejemplos de uso habitual:

p { font-family: Arial, Helvetica, sans-serif }
p { font-family: "Times New Roman", Times, serif }
p { font-family: "Courier New", Courier, monospace }
p { font-family: Georgia, "Times New Roman", Times, serif }
p { font-family: Verdana, Arial, Helvetica, sans-serif }

También puede usarse el valor inherit para heredar la tipografía del elemento contenedor superior (elemento padre), aunque su uso es poco frecuente debido a que las fuentes se heredan por defecto.

En un próximo artículo explicaremos el uso de la regla @font-face, que permite incrustar fuentes alternativas que se mostrarán una vez se hayan descargado todos los recursos de la página.

La propiedad ‘font-size’

Con la propiedad font-size puede especificarse el tamaño de las fuentes. Se puede modificar el tamaño de las fuentes mediante unidades relativas o absolutas, porcentajes y una serie de palabras clave predefinidas. Además, existen palabras clave para tamaño absoluto y para tamaño relativo.

Lista de palabras clave de tamaño absoluto. El valor por defecto es medium, equivalente a 16 píxeles, 12 puntos, 1 em y un 100% de tamaño.

Palabras clave de tamaño relativo. Estos valores lo que hacen es incrementar o decrementar el tamaño respecto al de su elemento contenedor superior.

En el siguiente ejemplo vamos a ver varios tamaños de texto:

.size-08 { font-size: 0.8em }
.size-09 { font-size: 0.9em }
.size-10 { font-size: 1.0em }
.size-11 { font-size: 1.1em }
.size-12 { font-size: 1.2em }

Tamaño de fuente 0,8em.

Tamaño de fuente 0,9em.

Tamaño de fuente 1,0em.

Tamaño de fuente 1,1em.

Tamaño de fuente 1,2em.

Con el fin de mejorar la accesibilidad del usuario, se recomienda usar medidas relativas al tamaño de fuente por defecto. Por tanto, las unidades em y los porcentajes son una buena elección. Para impresión, en cambio, es una buena práctica usar los puntos (pt).

La propiedad ‘font-style’

Mediante la propiedad font-style es posible aplicar estilos a las fuentes. El uso más habitual de esta propiedad es mostrar texto en cursiva. Los valores de esta propiedad CSS son las siguientes palabras clave:

Veamos algunos ejemplos:

.normal { font-style: normal }
.italic { font-style: italic }
.oblique { font-style: oblique }

Tamaño normal, sin estilos.

Tamaño en cursiva.

Tamaño en cursiva artificial.

La propiedad ‘font-variant’

La propiedad font-variant permite definir variaciones de estilo para la fuente. Su uso no es habitual, ya que sus posibilidades son de escaso uso. En general se utiliza par mostrar texto con letra versal, es decir, en unas mayúsculas que aparecen más pequeñas que las mayúsculas normales.

Por ejemplo:

.versal { font-variant: small-caps }

Texto con letra versal.

La propiedad ‘font-weight’

La propiedad font-weight permite modificar el grosor de las fuentes, y tiene que ver con el texto en negrita. Algunas fuentes tienen varios grosores de negrita, pasando de un grosor más fino a uno muy grueso. Esta propiedad también se conoce como peso o anchura de la fuente.

El grosor de las fuentes se indica con palabras clave de valores absolutos o relativos. También se puede indicar valores numéricos que, de 100 en 100, van desde el 100 (grosor mínimo) hasta el 900 (grosor máximo). El grosor por defecto (normal) es 400, y el de la negrita (bold) es 700.

Veamos algunos ejemplos:

.grosor-400 { font-weight: 400 }
.grosor-700 { font-weight: 700 }

Párrafo de grosor 400.

Párrafo de grosor 700.

Hay que tener en cuenta que si la tipografía usada no tiene diferentes grosores diseñados por el autor de la fuente, el navegador web asignará el grosor de fuente más cercano posible al que se haya especificado.

Para entender el algoritmo: si una fuente sólo dispone del estilo normal y negrita (grosores 400 y 700): los valores numéricos 100, 20, 300, 400 y 500 se visualizan como si fuera 400 (estilo normal), mientras que los valores numéricos 600, 700, 800 y 900 se visualizan en negrita, como si fuera 700.

La propiedad ‘font’

La propiedad font es una abreviatura (shorthand) gracias a la cual se puede establecer de una sola vez los valores de las propiedades de fuentes mencionadas anteriormente. El orden de las propiedades es el siguiente:

Veamos un ejemplo:

.fuente { font: italic small-caps bold 1em Georgia }

Párrafo original.

La propiedad line-height se utiliza para indicar la altura de una línea de texto y, por lo tanto, se explica en el artículo dedicado al texto.