Las fuentes o tipografías juegan un papel muy importante en el mundo del diseño, y por lo tanto, también en el diseño web. Si los documentos HTML siempre tuvieran la misma fuente nos resultarían sosos y aburridos. Modificando las fuentes se puede lograr un resultado más atractivo, pero también más legible y accesible.
En versiones antiguas de HTML existía el elemento <font>, que permitía modificar el tamaño, la tipografía y el color de las fuentes. Pero en la actualidad es un elemento obsoleto; lo correcto es utilizar las hojas de estilo en cascada (CSS), y de hecho, es a través del CSS que debe tratarse la apariencia de una página web.
Lo mismo que sucede con los colores, las fuentes también se pueden especificar a través del atributo style sobre el elemento que se quiera modificar, o también usando selectores en las hojas de estilo CSS, ya sea el nombre del elemento, o los que se hayan indicado con los atributos class e id.
Sintaxis
Es muy recomendable que se esté familiarizado con el CSS para modificar de forma correcta las propiedades CSS y sus valores. Existen muchas propiedades que permiten un alto nivel de modificación de apariencia de las fuentes. Por ejemplo, para usar una tipografía concreta usaremos la propiedad font-family y en el valor escribiremos el nombre exacto de la tipografía.
Código HTML de ejemplo de párrafo con una tipografía distinta:
<p style='font-family:Times New Roman'>Texto con serifa</p>
El resultado es el siguiente:
Texto con serifa
En los siguientes puntos se describen las propiedades CSS para fuentes.
Tipografía
La propiedad font-family permite especificar la tipografía de un texto. Esta propiedad debe contener varios nombres de fuentes para que exista alternativa en caso de que la primera fuente indicada no se encuentre disponible. De esta manera se asegura la máxima compatibilidad entre navegadores y sistemas operativos.
Generalmente, se usan familias de fuentes parecidas. Se empieza poniendo la fuente que se desea y se termina con fuentes similares de la misma familia. En caso de que el navegador no la encuentre, tendrá una fuente similar. Los nombres de las fuentes deben estar separados por comas.
Alternativa, se pueden introducir fuentes almacenándolas directamente en el servidor y cargándolas cuando se cargue la página web y todos sus recursos. Sin embargo, este tema es extenso y da para un artículo en el curso de CSS.
Ejemplos varios de familias de fuentes (código CSS):
font-family: "Times New Roman", "Times", "serif";
font-family: "Arial", "Helvetica", "sans-serif";
font-family: "Lucida Console", "Courier New", "monospace";
Color
La propiedad color permite especificar el color de un texto. Tal y como se explicó en el artículo referente a los colores, estos se pueden especificar mediante su nomenclatura —en inglés—, un código hexadecimal o utilizando las propiedades rgb() y hsl() de los modelos de color RGB y HSL.
Ejemplo de código HTML de texto en otro color:
<p style='color:teal'>Texto cian</p>
El resultado es el siguiente:
Texto cian
Alineación
La propiedad text-align permite alinear el texto horizontalmente. Un texto puede estar alineado a la izquierda, a la derecha, al centro o estar justificado. Por tanto, sus valores pueden ser: left, right, center y justify. Si no se especifica ningún valor, el texto se alinea a la izquierda por defecto.
Ejemplo de código HTML de texto centrado:
<p style='text-align:center'>Texto centrado</p>
Resultado:
Texto centrado
Decoración
La propiedad text-decoration permite añadir añadir o eliminar elementos de decoración en el texto, ya sea una línea de subrayado, una línea de tachado o una línea de subrayado superior. Los valores pueden ser underline, overline, line-through y none; este último elimina la decoración del texto.
Ejemplo de código HTML de texto subrayado por encima:
<p style='text-decoration:overline'>Texto subrayado</p>
Resultado:
Texto subrayado
Transformación
La propiedad text-transform se utiliza para especificar la capitalización de un texto, es decir, si debe aparecer en mayúsculas, en minúsculas o con la primera letra en mayúscula en todas las palabras. Sus valores pueden ser lowercase (minúsculas), uppercase (mayúsculas) y capitalize (capitalizar).
Ejemplo de código HTML de texto que se transforma en mayúsculas:
<p style='text-transform:uppercase'>En mayúsculas</p>
Resultado:
En mayúsculas
Sangrado
La propiedad text-indent es utilizada para indicar el sangrado de un párrafo, que se aplicará únicamente a la primera línea del párrafo. Su valor será un número entero seguido de las unidades, normalmente en píxeles (px).
Ejemplo de código HTML de texto sangrado 50px:
<p style='text-indent:50px'>Texto sangrado</p>
Resultado:
Texto sangrado
Altura
La propiedad line-height permite especificar la altura o el espacio entre líneas. El valor por defecto coincide con el valor del tamaño del texto. Es recomendable no usar un interlineado demasiado estrecho porque se dificulta la legibilidad del texto, por lo que se recomienda usar un valor un poco más alto que el tamaño de la fuente. Su valor será un número entero con sus unidades, también en píxeles (px).
Ejemplo de código HTML de texto con mucha altura:
<p style='line-height:50px'>Texto muy alto</p>
Resultado (observe el espaciado arriba y abajo):
Texto muy alto
Espaciado de letra
La propiedad letter-spacing se usa para especificar el espacio entre los caracteres de un texto. Al igual que en la propiedad anterior, un espaciado de letras demasiado estrecho puede hacer que el texto sea difícil de leer. Su valor será un número entero con sus unidades en píxeles (px).
Ejemplo de código HTML de texto de letras espaciadas:
<p style='letter-spacing:5px'>Letras espaciadas</p>
Resultado:
Letras espaciadas
Espaciado de palabra
La propiedad word-spacing permite modificar el espaciado entre palabras. Puede usarse en combinación con la propiedad de espaciado de letras para obtener resultados interesantes. Como es de esperar, su valor también debe ser un número entero con las unidades en píxeles (px).
Ejemplo de código HTML de texto de palabras espaciadas:
<p style='word-spacing:20px'>Palabras espaciadas</p>
Resultado:
Palabras espaciadas
Espacio en blanco
La propiedad white-space sirve para especificar el tratamiento del espacio en blanco dentro de un elemento de texto. Esta propiedad se utiliza para textos que ocupan más de una línea. Por ejemplo, se puede evitar que un texto salte a la segunda línea, o se puede forzar el salto al final de cada punto. Sus valores pueden ser normal (por defecto), nowrap, pre, pre-wrap y pre-line.
Ejemplo de código HTML de texto que no se divide:
<p style='white-space:nowrap;overflow:hidden'>Este texto es muy largo y no se verá entero debido al valor «nowrap» que hemos indicado en esta propiedad.</p>
Resultado:
Para evitar que el texto se salga de la pantalla también hemos añadido la propiedad overflow, con el valor hidden. De esta manera, el texto queda cortado dentro de la caja que lo contiene, sin invadir otras secciones de la página.
Desbordamiento del texto
La propiedad text-overflow permite especificar una forma de señalar al usuario el contenido desbordado que no se está mostrando. En el ejemplo anterior sobre la propiedad white-space pudimos ver como el texto quedó cortado sin ninguna indicación. Sería interesante que el usuario estuviese avisado.
Como valor de esta propiedad podemos indicar ellipsis, que introducirá de forma automática los famosos tres puntos suspensivos (…). El valor por defecto es clip; en este caso, el texto es cortado y, por tanto, no es accesible.
Ejemplo de código HTML de texto que no se divide, con indicación de desbordamiento de texto para el usuario:
<p style='white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>Este texto es muy largo y no se verá entero debido al valor «nowrap» que hemos indicado en esta propiedad.</p>
Resultado:
Sombreado
La propiedad text-shadow permite añadir una sombra debajo del texto. Es una opción muy bonita para modificar el aspecto del texto, y puede ser muy útil en casos en los que tengamos una imagen debajo del texto, así no se mezcla el color del texto con tonos de la imagen que sean idénticos, facilitando que resalte más.
Esta propiedad puede tener cuatro valores: los tres primeros se introducen como valores enteros y en píxeles, y el último es un color que se puede introducir como nombre, código hexadecimal o en los modelos RGB y HSL. El primer valor define el desplazamiento horizontal, el segundo el desplazamiento vertical, el tercero el nivel de difuminado y el cuarto es el color, como ya mencionamos.
Por ejemplo, queremos un texto con un sombreado que esté desplazado 1 píxel por debajo, 3 píxeles a la derecha, con un difuminado de 2 píxeles de ancho y que sea de color rojo. Los pondremos en ese orden. Ejemplo de código HTML:
<p style='text-shadow:1px 3px 2px red'>Texto sombreado</p>
Resultado:
Texto sombreado
Dirección del texto
La propiedad direction se usa para indicar la dirección del texto dentro de un elemento de bloque. Puede contener los valores ltr (left-to-right, de izquierda a derecha, por defecto) y rtl (right-to-left, de derecha a izquierda).
Esta propiedad debe usarse junto con la propiedad unicode-bidi, que determina si el texto debe anularse para admitir varios idiomas en el mismo documento HTML o página web. El navegador web usa un algoritmo complejo para determinar cómo mostrar el texto, y esta propiedad anula este algoritmo para dar el control al desarrollador. Con el valor bidi-override se anula dicho algoritmo y ordena el texto de forma estricta según la propiedad direction.
<p style='direction:rtl;unicode-bidi:bidi-override'>Texto de derecha a izquierda</p>
Resultado:
Texto de derecha a izquierda
Aislamiento bidireccional: elemento <bdi>
El elemento <bdi> es un elemento de aislamiento bidireccional que lo que hace es aislar una porción de texto para que pueda ser formateada con una dirección diferente al texto circundante (fuera del elemento). Este elemento es de gran utilidad cuando se incrusta texto cuya direccionalidad se desconoce; esto sería el caso por ejemplo si el texto procede de una base de datos externa.
Para visualizar la funcionalidad de este elemento, se hace uso del ejemplo anterior y se añade el elemento <bdi> al término «derecha»:
<p style='direction:rtl;unicode-bidi:bidi-override'>Texto de <bdi>"derecha"</bdi> a izquierda</p>
En el resultado se observa como el término «derecha» no se ve afectado por la direccionalidad del texto indicada a través de la propiedad direction.
Texto de "derecha" a izquierda
Anulación bidireccional: elemento <bdo>
El elemento <bdo> permite anular la direccionalidad del texto. Lo que hace este elemento es sobreescribir la direccionalidad del texto predefinida, y para ello, hace uso del atributo dir, que puede tener dos valores:
ltr: de izquierda a derecha (left to right).rtl: de derecha a izquierda (right to left).
Ejemplo de uso del elemento <bdo>:
<p>0123456789 <bdo dir="rtl">0123456789</bdo></p>
Dando como resultado:
0123456789 0123456789
Tal y como se puede observar en este ejemplo, los números que se encuentran dentro del elemento <bdo> aparecen en el orden inverso, es decir, ordenados de derecha a izquierda. Además de eso, este grupo de números también aparece visualmente a la derecha del párrafo en cuestión.
