Ediciones ENI Editorial | líder en informática
Las fuentes
Objetivo
En este capítulo vamos a ver todas las propiedades CSS relativas a las fuentes tipográficas: cómo usar fuentes locales, es decir, instaladas en los equipos de los internautas, incorporadas a la página HTML o fuentes en línea en servidores remotos. Veremos también todas las posibilidades de formato «clásicas»: los estilos, los tamaños fijos y relativos, el ancho y el grosor de los caracteres, el cambio de caja (mayúsculas, minúsculas...), la aplicación de color, el formato superíndice y subíndice. Finalizaremos con algunas propiedades CSS3 que aún están en fase de definición, pero que resultan muy prometedoras como opciones de tipografía fina.
La aplicación de las fuentes tipográficas
En primer lugar hay que decir que no existe una taxonomía definida para la clasificación de las fuentes tipográficas. Cada diseñador de fuentes a menudo emplea su propia terminología. Así, se usan distintos términos para indicar que una fuente debe ir en negrita: negrita, bold; y lo mismo sucede con la cursiva: cursiva, oblicua, itálica...
Para mostrar una fuente tipográfica en pantalla, el navegador empieza por identificar el origen de la fuente que se le pide. Este origen puede estar definido en el equipo del internauta, incrustado en la página o hallarse en un servidor en el Web.
Es perfectamente posible definir un conjunto de diversas fuentes tipográficas, e incluso resulta aconsejable. Si la fuente solicitada está disponible en el sistema operativo en el que se halla el navegador, se utiliza. Si no la encuentra allí, el navegador prueba con la segunda fuente de la lista, y así hasta el final. Y si el navegador no encuentra la fuente solicitada en el equipo del internauta, usa la fuente predeterminada que esté definida en las preferencias.
Una vez que el navegador ha identificado la fuente que debe usar, intenta aplicarle las demás propiedades: estilos, caja, grosor y tamaño.
Las fuentes locales
Comencemos por el uso de fuentes tipográficas «locales». El término «local» no es nomenclatura estándar; simplemente designa las fuentes instaladas en el equipo del internauta. No cuesta mucho entender que esta solución resulta muy limitada para los diseñadores, ya que los restringe a la utilización de fuentes de aspecto muy similar que se suministran por defecto con todos los sistemas operativos de los internautas (Windows, Mac y Linux-Unix). Estas fuentes pueden clasificarse usualmente en tres familias genéricas:
-
Fuentes con remates o romanas: Georgia, Times New Roman, Times y serif.
-
Fuentes sin remates o de palo seco: Verdana, Arial, Helvetica y sans-serif.
-
Fuentes de ancho fijo: Courier New, Courier y monoespaciadas.
Propiedad: font-family
Valor: familia-nombre | familia genérica
Valor inicial: propio del navegador
Se aplica a: todos los elementos HTML
Herencia: sí
He aquí un ejemplo de una sintaxis CSS:
<style type="texto/css">
.texto-corriente {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.titulo {
font-family:Georgia, "Times New Roman", Times, serif;
}
</style>
Observe que los nombres de las fuentes compuestos por varias palabras se escriben entre comillas.
Esta es su aplicación en la parte HTML:
<h2 class="titulo">Mi...Las fuentes incrustadas
1. Los formatos de fuente
La regla @font-face de las CSS3 permite «incrustar» fuentes tipográficas en las páginas web. De este modo, los diseñadores no quedan limitados al uso de fuentes genéricas. No obstante, tenga siempre en cuenta estos tres grandes principios:
-
La mayoría de las fuentes «profesionales» están sujetas a derechos de uso y difusión.
-
Cuando «incrusta» una fuente tipográfica, se incorpora al archivo todo el juego de caracteres, lo que puede hacer que sus páginas pesen considerablemente más.
-
Por lo general, el antialiasing (un método que evita que los caracteres se vean pixelados) no se aplica a las páginas web.
Ahora hemos de enfrentarnos al problema de la compatibilidad de los formatos de fuentes tipográficas con las distintas versiones de los navegadores.
He aquí los formatos de fuentes reconocidos por los navegadores:
-
TrueType: extensión .ttf.
-
OpenType: extensión .otf.
-
Web Open Font: extensión .woff.
-
SVG Font: extensión .svg y .svgz.
-
Embed OpenType: extensión .eot. Pero cuidado: es un formato propietario de Microsoft y, por lo tanto, solo compatible con Internet Explorer.
Estas son las compatibilidades con los formatos .ttf y .otf (http://caniuse.com/#feat=ttf) según el sitio Can I use:
Y estas son las compatibilidades con el formato .woff...
Las fuentes en línea
1. Las Google Fonts
Existen numerosos servicios en línea que ofrecen la posibilidad de utilizar fuentes tipográficas para el Web. El servicio Google Fonts es uno de los más conocidos: http://www.google.com/fonts/. Google ofrecía 698 fuentes en el momento de escribir este libro (junio de 2015).
Puede utilizar los filtros que aparecen a la izquierda de la pantalla para elegir una fuente. Si desea ampliar la información sobre una fuente en concreto, haga clic en el botón Pop out.
Podrá acceder entonces a toda la información útil:
Para usar la fuente escogida, en la pantalla anterior haga clic en el botón Quick-use:
Aparecen cuatro recuadros.
El primero le indica el impacto que tendrá esta fuente cuando se carguen las páginas:
El segundo recuadro permite elegir el alfabeto que se desea utilizar, en caso de que la fuente lo permita. En este ejemplo, la fuente dispone de un solo alfabeto:
El tercer recuadro indica la sintaxis que se ha de utilizar para enlazar esta fuente tipográfica a las páginas web:
El último recuadro indica la sintaxis que se ha de usar en las reglas CSS:
Este es el código completo de una página (03_02.html) que utiliza esta fuente tipográfica de Google:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Las fuentes de Google</title> ...El grosor de los caracteres
El grosor de los caracteres puede describirse con diversos términos: normal, negrita, supernegra... Para ello, usaremos la propiedad font-weight.
Propiedad: font-weight
Valor: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valor inicial: normal
Se aplica a: todos los elementos
Herencia: sí
Es posible utilizar distintos valores.
-
Valores fijos: normal (sin negrita) y bold (negrita).
-
Valores relativos: bolder (más gruesa) y lighter (menos gruesa) que el valor de herencia.
-
Valores definidos: de 100 (ultrafina), pasando por 400 (normal), 700 (bold) a 900 (heavy). Naturalmente, es preciso que la fuente elegida conozca estos valores definidos.
He aquí un ejemplo (03_03.html) en el que la fuente reconoce el valor 100, pero no el valor 900.
<!DOCTYPE html>
<html lang="es">
<head>
<title>El grosor</title>
<meta charset="UTF-8" />
<style>
p {
font-family: "helvetica neue";
}
.ultrafina {
font-weight: 100;
}
.negrita...La anchura de los caracteres
La propiedad CSS3 font-stretch permite definir la anchura de los caracteres: condensada o expandida. De nuevo, es preciso que la fuente escogida disponga de estas variantes.
Propiedad: font-stretch
Valor: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
Valor inicial: normal
Se aplica a: todos los elementos
Herencia: sí
Esta propiedad solo la reconoce Firefox e Internet Explorer versión 9 o superior.
El estilo de los caracteres
Los estilos permiten elegir la inclinación de una fuente: normal (letras «rectas») o cursiva.
Propiedad: font-style
Valor: normal | italic | oblique
Valor inicial: normal
Se aplica a: todos los elementos
Herencia: sí
El valor normal indica el aspecto de la fuente por defecto: recta.
El valor italic indica al navegador que debe usar la versión cursiva de la fuente tal y como la ha diseñado el tipógrafo. No debe confundirse con el valor oblique, que corresponde al carácter normal inclinado, y que se utiliza cuando una fuente no dispone de un diseño específico para la cursiva.
El tamaño de los caracteres
La propiedad font-size permite definir el tamaño de la fuente del texto.
Propiedad: font-size
Valor: tamaño absoluto | tamaño relativo | longitud | porcentaje
Valor inicial: medium
Se aplica a: todos los elementos
Herencia: sí
Porcentaje: relativo al tamaño de la fuente padre
Los tamaños absolutos son tamaños calculados por el navegador. He aquí los valores posibles: xx-small, x-small, small, medium, large, x-large y xx-large. Un factor de 1,5 separa cada uno de estos valores. Cada navegador calcula estos tamaños, que pueden ser diferentes en función de la fuente y el medio utilizado, algo que no facilita el uso de los tamaños absolutos.
Los tamaños relativos se calculan según el tamaño del elemento padre. Los valores posibles son larger y smaller. Si el elemento padre tiene un tamaño medium, el elemento hijo tendrá un tamaño large con el valor larger, y small con un valor smaller.
Los valores em, rem y ex también son tamaños relativos. Ya hemos mencionado los valores em y rem en el capítulo anterior, en el apartado dedicado a las unidades. El valor ex corresponde a la altura de un carácter en caja baja como a, o, c... También se hereda de un elemento padre.
Los tamaños expresados en longitud utilizan las distintas unidades que se aplican al tamaño de las fuentes:...
Ajustar el tamaño de los caracteres
En los programas de tratamiento de texto, de autoedición y para el Web, el tamaño de las fuentes se basa en la altura de los ascendentes (parte vertical de las letras l, d, b...) y los descendentes (parte vertical de las letras p, q...). Visualmente, algunas fuentes presentan alturas distintas para las minúsculas. La fuente Verdana (creada especialmente para mejorar la legibilidad en el Web) tiene una minúscula más alta que una Arial o una Helvética, o que una Futura o una Bodoni, como se muestra en este ejemplo:
La propiedad CSS3 font-size-adjust permite ajustar el tamaño de los caracteres basándose en la altura de las minúsculas, y no en la altura tradicional de los caracteres (ascendentes y descendentes). El valor que se atribuye a esta propiedad es un múltiplo del tamaño usual.
Esta propiedad forma parte del módulo CSS Fonts Level 3, que se halla en el estado Canditate Recommendation 3 October 2013 (http://www.w3.org/TR/css3-fonts/) en el momento de escribir este libro (junio de 2015).
Veamos el código usado para este ejemplo (03_04.html) sin ajuste:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ajustar tamaños</title>
<meta charset="UTF-8" />
<style> ...Las versalitas
La propiedad font-variant permite indicar si la fuente debe mostrar o no el estilo versalita.
Propiedad: font-variant
Valor: normal | small-caps
Valor inicial: normal
Se aplica a: todos los elementos
Herencia: sí
Valores disponibles:
-
normal: los caracteres no cambian.
-
small-caps: los caracteres se muestran en versalitas.
He aquí un ejemplo sencillo (03_05.html):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Versalitas</title>
<meta charset="UTF-8" />
<style>
.textoVersalitas {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Nullam id dolor id nibh ultricies vehicula ut id
elit. <span class="textoVersalitas">Cras mattis
consectetur purus sit amet fermentum</span>. Curabitur
blandit tempus porttitor.</p>
</body>
</html>
Esta es la visualización que se obtiene:
La propiedad genérica
La propiedad genérica font permite agrupar todas las propiedades de las fuentes tipográficas en una sintaxis más corta. Si no se indica un valor para determinadas propiedades, estas toman su valor inicial. Cada valor se separa del siguiente mediante un espacio.
Propiedad: font
Valor: font-style | font-variant | font-weight | font-stretch | font-size | line-height | font-family
Valor inicial: propio de cada navegador
Se aplica a: todos los elementos
Herencia: sí
Observe la ausencia de la propiedad font-size-adjust en esta propiedad genérica por razones de compatibilidad descendente.
Esta forma «acortada» comporta la propiedad line-height, que sirve para modificar la interlínea del texto. Trataremos esta propiedad en el capítulo siguiente, dedicado al formato del texto.
Veamos un ejemplo sencillo (03_06.html) de uso de la propiedad font:
<!DOCTYPE html>
<html lang="es">
<head>
<title>La propiedad font</title>
<meta charset="UTF-8" />
<style>
.formaCorta {
font: italic bold 14px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head> ...El color de los caracteres
La propiedad color sirve para aplicar color a un gran número de elementos, entre los cuales se halla el texto. En el capítulo Crear hojas de estilos CSS, concretamente en el apartado dedicado a las unidades de colores, ya hemos mencionado los valores disponibles.
He aquí un ejemplo sencillo (03_07.html):
<!DOCTYPE html>
<html lang="es">
<head>
<title>El color del texto</title>
<meta charset="UTF-8" />
<style>
.azul {
color: blue;
}
</style>
</head>
<body>
<p>Nullam id dolor id nibh ultricies vehicula ut id
elit. <span class="azul">Cras mattis consectetur purus sit
amet fermentum</span>. Curabitur blandit tempus
porttitor.</p>
</body>
</html>
Los desplazamientos verticales de los caracteres
La propiedad vertical-align permite desplazar un elemento por encima o por debajo de la línea de texto o línea base. Podemos utilizar esta propiedad, por lo tanto, para poner en subíndice o superíndice un carácter.
Propiedad: vertical-align
Valor: baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length
Valor inicial: baseline
Se aplica a: los elementos situados en la línea de texto
Herencia: no
Porcentaje: según el valor de line-height (interlínea) del propio elemento.
Estos son los valores posibles:
-
baseline: alinea la línea base del elemento con la del elemento padre. Si el elemento no tiene línea base (no se trata de texto), la alineación se lleva a cabo a partir de la base del elemento (el borde inferior de una imagen, por ejemplo).
-
sub: coloca el elemento como subíndice.
-
super: coloca el elemento como superíndice.
-
text-top: alinea la parte superior del elemento con la parte superior del texto padre.
-
text-bottom: alinea la base del elemento con la base del texto padre.
-
top: alinea la parte superior del elemento con el elemento más alto en la línea.
-
middle: alinea el centro vertical del elemento con el centro vertical del elemento padre.
-
bottom: alinea la base del elemento con el elemento más bajo en la línea.
-
percentage: es un valor relativo cuya referencia es la propiedad...
Otras propiedades (a punto de llegar)
El módulo CSS Fonts Level 3 (http://www.w3.org/TR/css3-fonts/) está en proceso de finalización; consta como Candidate Recommendation, 3 October 2013 en el momento de redactar este libro. Este módulo contiene una serie de propiedades, no todas reconocidas por los principales navegadores. Estas propiedades servirán para administrar de forma más específica las variantes tipográficas.
La propiedad font-kerning permitirá administrar el interletraje, es decir, el espacio entre los caracteres, los glifos.
La propiedad font-variant-ligatures permitirá administrar las ligaduras de los caracteres. Las ligaduras son los elementos de fusión entre dos caracteres, como la ese con la te, la efe con la i o con la ele...
La propiedad font-variant-position permitirá administrar mejor los caracteres en subíndice y superíndice, con criterios más tipográficos que los que aplica la propiedad vertical-align de la que hemos hablado con anterioridad.
La propiedad font-variant-caps permitirá gestionar mejor las versalitas, con criterios más tipográficos que los que aplica la propiedad font-variant de la que hemos hablado con anterioridad.
La propiedad font-variant-numeric permitirá gestionar mejor las variantes numéricas, como las fracciones, por ejemplo.
La propiedad font-variant-alternates permitirá...
