Indudablemente la tipografía (llamada también formato de fuente o, simplemente, fuente) es uno de los aspectos más importantes de la estética de un documento escrito. Manejar adecuadamente el estilo de la letra puede hacer que nuestra página sea mucho más atractiva. De hecho hay diseñadores que consideran que esta es la primera decisión a tomar por la tremenda influencia que tiene sobre el resto de elementos. Lo ideal es dedicar mucho tiempo a esta decisión.
CSS dispone de numerosas propiedades para modificar los tipos de letra. Muchas de sus propiedades se pueden observar en la
En la imagen anterior se observan las líneas básicas que permiten encajar las letras. Los elementos a tener en cuenta son:
Las primeras letras vectoriales fueron las pertenecientes al lenguaje PostScript de Adobe incluidos en los ordenadores Apple MacIntosch. Microsoft creo tipos de letra TrueType para Windows y ambas compañías actualmente desarrollan los tipos OpenType que se espera se convierta en un estándar abierto.
En la actualidad se da por hecho que todas las fuentes son vectoriales.
Además de estas dos famosas familias, CSS permite distinguir otras tres familias. En total son:
Modifica el tamaño de la fuente. Se puede especificar de tres maneras:
Son:
valor | significado |
xx-small | Fuente muy pequeña |
x-small | Fuente pequeña |
small | Fuente un poco pequeña |
medium | Fuente normal. |
large | Fuente un poco grande |
x-large | Fuente grande |
xx-large | Fuente muy grande |
valor | significado |
smaller | Más pequeña |
larger | Más grande |
Ejemplo (sube la letra un 40% sobre el tamaño que le correspondería normalmente al elemento h1):
h1 {font-size:1.4em; } |
Indica el tipo de letra. El problema es que no todas las fuentes están disponibles en todos los sistemas. Por ello, se suelen indicar varias opciones separadas por comas. Si la primera no está disponible, se usa la siguiente.
Ejemplo:
p{
font-family:”AvantGarde Bk”, Arial, Helvetica, sans-serif;
} |
En este código se intenta asignar la fuente AvantGarde Bk a todos los párrafos. Si el sistema del usuario no posee este tipo de letra, se prueba con Arial. Si tampoco está disponible, se prueba con Helvetica. Si tampoco, se prueba con una letra sans-serif genérica.
Se usan comillas dobles para los nombres de fuentes compuestas por varias palabras.
La norma obliga a dar como última opción de la lista de valores de
font-family una de estas familias genéricas:
|
familia |
uso |
|
serif |
Letra genérica utilizada en tipos de letras con patitas. Como por ejemplo Times New Roman. |
|
sans-serif |
Para letras genéricas sin patas como Arial O Helvética. |
|
fantasy |
Para letras más informales como Impact. |
|
monospaced |
Letras donde cada carácter ocupa lo mismo. En Windows suele ser Arial. |
|
cursive |
Para letras que simulan escritura manual como Brush Script |
Peso de la fuente (grosor). Valores posibles:
También son válidos los valores initial e inherit.
Estilo de letra. Puede ser: normal, italic (cursiva) u oblique (normalmente se representa igual que la anterior). Como siempre, también son válidos los valores initial e inherit.
Versales (small-caps). Valores: normal y small-caps (además de initial e inherit)
Permite calibrar el interlineado (la distancia entre cada línea). Se puede especificar de estas formas:
Establece la anchura de la letra. Posibles valores:
Solo funciona en Firefox e Internet Explorer, ambos desde la versión 9.
Permite desde una sola propiedad cambiar en un solo golpe todas las anteriores. Su sintaxis es:
font: font-style font-variant font-weight font-size/line-height font-family; |
El orden tiene que ser estrictamente ese, pero algunas propiedades se pueden dejar sin utilizar.
Ejemplos:
/*Letra cursiva y negrita de tipo Comic con opciones a Arial y Helvetica*/
font: italic bold 16pt “Comic Sans MS”, Arial,
Helvetica, sans-serif;
/* Letra cursiva con versalitas de tamaño 18 puntos y 24 de puntos de distancia entre cada línea */
font: italic small-caps 18pt/24pt;
/* Letra cursiva */
font: italic;
|
Esta propiedad también nos permite utilizar las fuentes de los elementos del sistema operativo en el que estemos, concretamente:
Color de la fuente. Utilizando cualquiera de los códigos de color explicados en el apartado dedicado a las unidades y medidas (Véase [8.5] indicación de colores en CSS en la página 151).
Uno de los problemas más importantes sobre la tipografía es querer utilizar un tipo de letra sobre la que no hay seguridad que exista en el dispositivo de la persona que está viendo la página HTML.
CSS3 ha introducido el uso de esta directiva en el código CSS para precargar el tipo de letra necesario. Para ello deberemos utilizar el archivo que contiene el tipo de letra en sí. El formato posible para los archivos con el tipo de letra es:
Con tantos formatos e incompatibilidades podemos tener el problema de que la fuente elegida al final no se vea correctamente. Por ello servicios como el disponible en la página Font Squirrel (http://www.fontsquirrel.com/tools/webfont-generator) permite subir la letra en formato Open Type (suponiendo que la fuente no posea derechos reservados o bien les hayamos pagado) y nos descarga todos los archivos en los demás formatos e incluso el código que hay que escribir en nuestra hoja de estilos CSS para cargar la fuente correctamente en cualquier navegador compatible con CSS3.
Para cargar la fuente se usa la instrucción @font-face a la que se le incroporan varias propiedades entre las que están al menos font-family (para d
Por ejemplo supongamos que queremos utilizar el tipo de letra Cantarell y disponemos (teniendo en cuenta que los tipos de letra pueden tener derechos exclusivos de uso, por lo que habrá que asegurarse de que uso es libre o bien pagar los derechos para su uso) de archivo Artistik.ttf que contiene el tipo de letra en sí. El código para que todos los párrafos la usen (con la seguridad de que sí saldría) es:
Opcionalmente podemos utilizar las propiedades:
Todas ellas vistas anteriormente y que ahora sirven para indicar de qué tipo es la fuente que se está cargando; si es negrita, cursiva, etc.
Ejemplo:
@font-face {
font-family: cantarellbold;
/* primera opción, tipo de letra EOT, no admite
usar opciones */
src: url(‘font/cantarell-bold-webfont.eot’);
/* opciones en orden de prioridad deseada para
importar los tipos de letra */
src: local(“Cantarell Bold”),
url(‘font/cantarell-bold-webfont.eot?#iefix’)
format(‘embedded-opentype’),
url(‘font/cantarell-bold-webfont.woff’)
format(‘woff’),
url(‘font/cantarell-bold-webfont.ttf’)
format(‘truetype’),
url(‘font/cantarell-bold-webfont.svg#cantarellbold’)
format(‘svg’);
font-weight: bold;
font-style: normal;
} p{
font-family:cantarellbold;
... } |
En el ejemplo anterior en la propiedad src se indican varias rutas mediante la función url y en cada una de ellas, se indica el formato del archivo mediante la función format. Antes de usar las rutas, se buscará la fuente Cantarell Bold en el ordenador local gracias a la función local y así si el usuario ya la tiene en el sistema no hará falta cargarla desde el archivo externo.
Aunque esta técnica es muy interesante porque nos permite utilizar fuentes personales y no depender de que lo el usuario o usuaria tiene instalado en su ordenador, hay que cargar el archivo de fuentes y eso puede llevar cierto tiempo, durante el cual no se ve texto alguno o se ve con un formato diferente, lo cual puede ser problemático. No hay que abusar de esta técnica cargando demasiadas fuentes porque si no la carga de la página web sería muy lenta.
El problema de los tipos de letra poco a poco se va solucionando gracias al elemento @font-face, el problema es que su manejo no es nada sencillo.
Por ello han aparecido servicios de tipos de letra online, que nos permiten utilizar tipos de letra de librerías (algunas gratuitas y otras de pago) disponibles en Internet. Para ello se suele requerir añadir en las páginas un enlace a un archivo CSS o JavaScript, que en realidad se encarga por nosotros de importar adecuadamente el tipo de letra.
Importar muchos tipos de letra puede retrasar muchísimo la carga de la página web por lo que se debe utilizar con cautela. Las instrucciones para importar estos tipos de letra les proporcionan los propios servicios online. Los más conocidos son:
Modifica el kerning del tipo de letra actual. Posibilidades:
Permite asignar propiedades especiales a la letra, cuando esta es de tipo OpenType. Por ejemplo:
.matematicas{
font-feature-settings: “frac”; } |
El código anterior hace que el texto de la clase matematicas, active el modo de fracciones automáticas. Las propiedades son muy avanzadas y permiten especificar características muy espectaculares. En la URL (sugerida en la ayuda de Mozilla sobre esta propiedad):
https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf hay una extensa guía con ejemplos de uso de las propiedades de las fuentes OpenType (no todas las fuentes tienen esas propiedades).
Esta propiedad solo funciona en los últimos navegadores (Internet Explorer a partir de la versión 10). Algunas propiedades posibles son (solo funcionan si la letra en uso lo permite):
).Además se pueden indicar varias propiedades a la vez separándolas por comas.
Normalmente el elemento html contiene la información sobre el lenguaje de la página. Con esa información, los navegadores deciden qué ligaduras (como el hecho de que el texto fi aparezca pegado) se aplican. Esta propiedad permite cambiar el lenguaje (de cara a decidir qué ligaduras aplicar) en un elemento concreto.
Propiedad que permite indicar si el navegador debe aplicar negritas y cursivas para el tipo de letra del elemento al que se aplica esta propiedad. Valores posibles:
Puede tomar los valores weight y style a la vez.
Sólo funciona en Firefox (y desde la versión 35) y requiere el sufijo -moz-.
Permite indicar ligaduras especiales para el texto. Funciona solo en navegadores modernos (pero en todos los actuales, aunque en los webkit requiere el prefijo -webkit-):
Permite establecer propiedades para el establecimiento de glifos en la letra actual (si dicha letra lo permite).
Es una compleja propiedad (aunque muy valorada por los diseñadores gráficos) disponible solo en Firefox desde la versión 34.
Permite establecer nombres a utilizar por font-variant-alternates. Es una propiedad que permite establecer nombres para los números utilizados por dicha propiedad.
Asigna valor para la forma de mostrar las mayúsculas. Nuevamente solo funciona en Firefox 34 y posteriores.
Valores:
Establece el uso de glifos alternativos para los números (Firefox 34 y posteriores). Posibilidades:
Establece la posición del texto (Firefox 34 o superior):
Aunque ya se ha visto la propiedad, en las versiones futuras de los navegadores permitirá además con esta propiedad establecer, a la vez, todas las que comienzan con el nombre font-variant.
Son propiedades que afectan al texto, fundamentalmente cambian el formato de los párrafos y aspectos del texto que no se refieren a su tipografía.
Indica la distancia entre las palabras del texto. Usa las mismas medidas que la propiedad font-size. Ejemplo de texto con word-spacing:20px;
Indica la distancia entre las letras del texto. Es similar a la anterior, pero ahora referida a la distancia horizontal entre caracteres. Ejemplo con letter-spacing:20px;
Se indican posibles efectos en el texto. Valores:
Permite especificar el color del subrayado cuando se utilizan líneas mediante text-decoration. Solo funciona, por ahora, en Mozilla Firefox (y requiere utilizar el prefijo -moz-).
Permite especificar el estilo del subrayado. Solo funciona, por ahora, en Mozilla Firefox (y requiere utilizar el prefijo -moz-). Valores: solid (sólida), double (línea doble), dotted (línea punteada), dashed (línea rayada) y wavy (línea ondulada).
Posición vertical del texto (o imagen) respecto a su contenedor. Es muy versátil porque permite tanto alinear en vertical un texto respecto, por ejemplo, a la celda de la tabla en la que se encuentre; como indicar superíndices y subíndices. Posibilidades:
Lo malo es que sólo funciona en texto dentro de celdas de tablas. Si deseamos alinear el texto dentro de una etiqueta div por ejemplo, habría que utilizar la propiedad display con el valor table-cell.
Ejemplo:
<!doctype html> <html lang=”es”> <head> <meta charset=”UTF-8”> <title>Document</title> |
<style> div{
height:200px;
width: 300px;
background-color: yellow;
display:table-cell;
} </style> </head><body> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, rerum, explicabo ratione qui provident consequatur ab quasi recusandae vitae sit voluptatibus laboriosam in eum ipsum ipsam perspiciatis suscipit quis asperiores magni quibusdam .</p> </div> </body> |
Resultado:
Otra posibilidad es alinear respecto a un elemento que está puesto en la misma línea:
<!doctype html> <html lang=”es”> <head> <meta charset=”UTF-8”> <title>Document</title> <style> <style> img{
vertical-align: middle;
} </style> </head> |
<body> <p><img src=”turing/turing16.jpg”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, rerum, explicabo ratione qui provident consequatur ab quasi recusandae vitae sit voluptatibus laboriosam in eum ipsum ipsam perspiciatis suscipit quis asperiores magni quibusdam.</p> </body> </html> |
Se obtiene este resultado:
Alineación horizontal del texto. Puede ser: left (izquierda), right (derecha), center (centrada) o justify (justificada a derecha e izquierda).
|
Alineación izquierda: text-align:left; |
Alineación derecha: text-align:right; |
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident obcaecati porro soluta mollitia quae sapiente explicabo necessitatibus beatae id tempora ab eligendi omnis quibusdam eius exercitationem doloremque minima |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident obcaecati porro soluta mollitia quae sapiente explicabo necessitatibus beatae id tempora ab eligendi omnis quibusdam eius exercitationem doloremque minima |
|
Alineación centrada: |
Alineación justificada: |
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident obcaecati porro soluta mollitia quae sapiente explicabo necessitatibus beatae id tempora ab eligendi omnis quibusdam eius exercitationem doloremque minima |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident obcaecati porro soluta mollitia quae sapiente explicabo necessitatibus beatae id tempora ab eligendi omnis quibusdam eius exercitationem doloremque minima |
Sangría de la primera línea del párrafo. Distancia extra que se deja a la primera línea respecto al resto de líneas. Por ejemplo si indicamos, text-indent:50px; el resultado sería (para un párrafo al que se aplique ese código):
Permite modificar el texto para que se muestre en mayúsculas o minúsculas.
Procede de CSS2, especifica la dirección en la que se escribe el texto. Posibilidades:
Parte de CSS3. Indica que hacer con el texto cuando está dentro de un contenedor (como una capa) y no tiene el tamaño suficiente para mostrar todo el texto. Posibilidades:
Se trata de una propiedad CSS3. Permite colocar una sombra al texto para darle efecto de volumen. Tiene esta sintaxis:
text-shadow: color distanciaX distanciaY desenfoque; |
Ejemplo:
<style> h1{
color:red;
text-shadow:5px 5px 10px black;
} </style> </head> <body> <h1>Título</h1> |
Resultado:
Se pueden incluso indicar varios sombreados a la vez al texto:
h1{
color:gray;
text-shadow:2px 2px 4px yellow, 4px 4px 4px red,
6px 6px 4px green;
}
Ese código muestra el siguiente resultado:
Se trata de una nueva propiedad de CSS3 que permite partir el texto cuando tenemos palabras muy largas. Ejemplo:
<style> div{
width:200px;
height:600px;
background-color:red;
} </style> </head> <body> <h1>Título</h1> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, obcaecati, eligendi velit incidunt natus inventore sint quidem dolores cumque praesentium! Sapiente veritatis totam |
Obtiene este resultado:
Modificando el CSS:
<style> div{
width:200px;
height:600px;
background-color:red; }
</style> |
Obtenemos:
Es decir word-wrap con valor break-word, parte el texto en aquellas palabras que, de otro modo, se salen fuera del margen.
Decide la forma de mostrar las fuentes que utilizará el navegador. Es una propiedad poco soportada hasta ahora por los navegadores. Posibles valores:
Indica si el texto se puede dividir al final de la línea. Posibilidades;
Es una propiedad en borrador pero que es adoptada ya en parte (no para todos los idiomas) en los navegadores (eso sí indicando los prefijos de cada motor de navegador).
Personaliza el tamaño del tabulador (normalmente vale 8 caracteres). Se utiliza para el uso con el elemento pre. Está en proceso de borrador CSS3 y es soportada por Chrome y por Opera y Firefox (estos dos si se indica el prefijo).
Indica cuál es la alineación de la última línea de un párrafo. Posibles valores:
Solo los navegadores modernos la permiten utilizar.