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 configurar fuentes en CSS:
| Propiedad | Descripción |
|---|---|
font-family | Define la familia de la fuente. |
font-size | Define el tamaño de la fuente. |
font-style | Define el estilo de la fuente. |
font-variant | Define la variante de la fuente. |
font-weight | Define el grosor de la fuente. |
font-stretch | Define la anchura de la fuente. |
line-height | Define el alto de la linea del texto. |
font | Abreviatura para definir la fuente. |
Cuando se indica la familia de la fuente (tipografía) con la propiedad font-family, solo se visualizará en caso de que esté disponible en el dispositivo del usuario. Si no está disponible se usará una fuente alternativa. Para cargar fuentes tipográficas externas se puede usar la regla arroba @font-face.
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:
| Palabra clave | Descripción | Ejemplo |
|---|---|---|
serif | Fuentes con serifa. | Serif |
sans-serif | Fuentes sin serifa. | Sans-Serif |
monospace | Fuentes monoespaciadas. | Monospace |
cursive | Fuentes en cursiva. | Cursive |
fantasy | Fuentes decorativas. | Fantasy |
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.
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 que se pueden dividir entre las que son para tamaño absoluto y las que son 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.
| Tamaños absolutos | Ejemplo |
|---|---|
xx-small | Tamaño muy, muy pequeño. |
x-small | Tamaño muy pequeño. |
small | Tamaño pequeño. |
medium | Tamaño medio. |
large | Tamaño grande. |
x-large | Tamaño muy grande. |
xx-large | Tamaño muy, muy grande. |
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.
| Tamaños relativos | Ejemplo |
|---|---|
smaller | Tamaño muy, muy pequeño. |
larger | Tamaño muy pequeño. |
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:
| Valor | Descripción |
|---|---|
normal | Texto normal. Valor por defecto. |
italic | Texto en estilo cursiva. |
oblique | Texto en cursiva inclinado artificialmente. |
inherit | Hereda del elemento padre. |
Veamos algunos ejemplos:
.normal { font-style: normal }
.italic { font-style: italic }
.oblique { font-style: oblique }
Texto normal, sin estilos.
Texto en cursiva.
Texto 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.
| Valor | Descripción |
|---|---|
normal | Texto normal. Valor por defecto. |
small-caps | Texto con letra versal. |
inherit | Hereda del elemento padre. |
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.
| Valor | Descripción |
|---|---|
normal | Grosor normal (por defecto). |
bold | Texto en negrita. |
bolder | Incrementa el grosor. |
lighter | Decrementa el grosor. |
100 | Grosor de 100. |
200 | Grosor de 200. |
300 | Grosor de 300. |
400 | Grosor de 400. |
500 | Grosor de 500. |
600 | Grosor de 600. |
700 | Grosor de 700. |
800 | Grosor de 800. |
900 | Grosor de 900. |
inherit | Hereda del elemento padre. |
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, 200, 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-stretch’
La propiedad font-stretch permite definir la anchura de la fuente. Esta propiedad es útil para aquellas familias de fuentes que tienen una versión con la anchura más condensada o más expandida.
La mayoría de fuentes no tienen esta capacidad, y las que la tienen se distribuyen como tipos de fuente independiente. Por tanto, es oportuno asociar dichas variantes a la propiedad font-stretch mediante la regla arroba @font-face.
La anchura de las fuentes se indica a través de una serie de palabras clave o mediante un porcentaje que puede ir en un rango limitado, desde el 50% hasta el 200%. Su valor por defecto es normal, equivalente al 100%.
A continuación se muestra una tabla con los valores posibles de font-stretch, comparando las palabras clave con los porcentajes equivalentes.
| Valor | Equivalencia |
|---|---|
ultra-condensed | 50% |
extra-condensed | 62.5% |
condensed | 75% |
semi-condensed | 87.5% |
normal | 100% |
semi-expanded | 112.5% |
expanded | 125% |
extra-expanded | 150% |
ultra-expanded | 200% |
La propiedad ‘line-height’
Con la propiedad line-height se puede controlar el interlineado de un texto, es decir, el espacio vertical que queda entre líneas. Lo que realiza esta propiedad es establecer la altura de la línea del texto, un espaciado que puede mejorar significativamente la comodidad de lectura.
El valor de line-height debe ser una unidad de longitud, que puede ser relativa o absoluta. Si se utiliza un número sin unidad, se interpreta como un multiplicador del tamaño de la fuente, por lo que un valor de 1.2 (valor por defecto) es equivalente a indicar 1.2em o un porcentaje del 120%.
En los siguientes ejemplos se puede apreciar la diferencia entre usar un interlineado de 1.0, 1.2 y 1.4. El texto se verá cada vez más espaciado.
.lh-10 { line-height: 1.0 }
.lh-12 { line-height: 1.2 }
.lh-14 { line-height: 1.4 }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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:
font-stretch(opcional)font-style(opcional)font-variant(opcional)font-weight(opcional)font-size(obligatoria)line-height(opcional)font-family(obligatoria)
En el caso de line-height, se introduce justo después de font-size, separándolos con una barra inclinada (/).
Veamos algunos ejemplos:
.fuente1 { font: italic small-caps bold 1em Georgia }
.fuente2 { font: 1.2em/1em Courier }
.fuente3 { font: condensed 1.1em Oswald }
Párrafo de ejemplo 1.
Párrafo de ejemplo 2.
Párrafo de ejemplo 3.
La regla arroba ‘@font-face’
En el diseño web puede ser conveniente usar tipografías más elegantes que las que vienen instaladas por defecto en la mayoría de dispositivos electrónicos. Si se indica un tipo de letra con la propiedad font-family y no está instalada en el dispositivo, se usará una fuente alternativa. Por ejemplo:
p {
font-family: 'Oswald', Helvetica, sans-serif;
}
Si el tipo de letra «Oswald» no está disponible, como alternativa se usará la tipografía «Helvetica». Y si esta última tampoco está disponible, se buscará una tipografía del sistema que sea sin serifa, de paloseco.
En este punto, una solución nada práctica sería intentar que los usuarios instalen las tipografías necesarias para visualizar correctamente la página web. Por suerte, existe una solución más práctica: el uso de la regla arroba @font-face, que permite cargar y configurar una fuente tipográfica externa. De esta forma se elimina la necesidad de tener las fuentes instaladas en el dispositivo.
Dentro de @font-face puede usarse una serie de descriptores que permiten configurar la representación de la tipografía externa. El uso de estos descriptores es muy parecido al que hemos visto con las propiedades CSS.
| Descriptor | Descripción |
|---|---|
src | Permite indicar una URL válida con la ubicación de la fuente. Puede ser relativa o absoluta. |
font-family | Indica el nombre de la fuente. |
font-weight | Indica el grosor de la fuente. |
font-style | Indica el estilo de la fuente. |
font-stretch | Indica la anchura de la fuente. |
font-display | Cambia la estrategia de carga de la fuente. |
Los valores de estos descriptores son los mismos que se usa en las propiedades CSS. Por ejemplo, podemos indicar que queremos usar la fuente «Oswald», con un grosor de 400, un estilo normal y su ubicación en el directorio.
@font-face {
font-display: swap;
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url('/oswald.eot');
src: url('/oswald.woff2') format('woff2'),
url('/oswald.woff') format('woff'),
url('/oswald.ttf') format('truetype'),
url('/oswald.svg#Oswald') format('svg');
}
El descriptor ‘font-display’
Cuando se accede a una página web que usa una fuente tipográfica externa que no está instalada en el dispositivo, el navegador web debe descargarla. Esto implica que la fuente no se visualizará al instante. El tiempo de descarga dependerá de la conexión o del tamaño de archivo de la fuente.
Mientras se descarga la fuente, puede suceder dos cosas: que el texto permanezca invisible al usuario hasta que la tipografía se haya descargado por completo, o que el texto se visualice de forma temporal con una tipografía alternativa.
El primer caso es conocido como «FOIT» (del inglés flash of invisible text), que significa que el texto será temporalmente invisible. En cambio el segundo caso es conocido como «FOUT» (del inglés flash of unstyled text), que significa que el texto se verá sin los estilos deseados.
El descriptor font-display permite modificar la estrategia de visualización de la fuente indicada. Dicho de otra manera, este descriptor permite indicar al navegador web la forma de cargar y representar una fuente tipográfica externa, y qué es lo que tiene que hacer mientras se está cargando y no esté disponible.
Los valores de este descriptor son una serie de palabras clave para indicar esta estrategia. En caso de no indicar ningún valor, su valor por defecto es auto, en el que el propio navegador web define la estrategia de visualización. Los navegadores tienen por costumbre que el texto aparezca invisible.
Estos son los posibles valores de font-display:
| Valor | Descripción |
|---|---|
auto | El navegador define la estrategia de visualización. |
block | Tiempo de bloqueo corto y un tiempo de intercambio infinito. |
swap | Sin tiempo de bloqueo. Con tiempo de intercambio infinito. |
fallback | Tiempo de bloqueo muy corto. Con tiempo de intercambio corto. |
optional | Tiempo de bloqueo muy corto. Sin tiempo de intercambio. |
Con el valor block, el texto permanecerá invisible (FOIT) en un período de bloqueo corto. Como resultado, cuando la fuente tipográfica externa se haya cargado por completo, el texto se mostrará con el estilo deseado.
El valor swap es muy interesante, ya que mientras se está cargando la fuente tipográfica externa, el texto será visible (FOUT) con una tipografía alternativa. Por tanto, no tiene establecido un tiempo de bloqueo. Cuando la tipografía externa se haya cargado, el estilo del texto cambiará al deseado.
El valor fallback es similar a swap: se muestra una fuente alternativa mientras se esté cargando la tipografía externa. El diferencia es que si pasa demasiado tiempo para que la fuente externa se cargue, la fuente alternativa se usará de forma definitiva, por tanto sin que se vea el estilo deseado.
Finalmente, con el valor optional, el navegador web considerará que la fuente tipográfica externa es opcional si determina que hay algún problema con la descarga. Como resultado, se usará la fuente alternativa.
