Propiedades CSS

• Inicio
• Medidas
• Modelo de cajas
• Flujo y posicionamiento de cajas
  Tipos de elementos Float Position Flex Maquetación fluida
• Texto y fuente
  Tipografías Web Propiedades básicas de texto Sombras y efectos
• Visualización y organización
  Colores Propiedades de fondo Efectos de caja, degradados y sombras Propiedades para tablas Propiedades para listas

Tipografías web

Las fuentes (tipografías) también tienen cabida dentro del mundo del CSS. De hecho, son muy importantes. La elección de una tipografía, su tamaño, color, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o capta los contenidos de una página web.

Características de una tipografía

Existen muchos estilos de fuentes, pero antes de profundizar en ello, veamos algunas de las características principales de una tipografía:

• Serifa: Las fuentes o tipografías que utilizan serifa o gracia, son aquellas que incorporan unos pequeños adornos o remates en los extremos de los bordes de las letras.

• Paloseco: Las fuentes o tipografías de paloseco o sin serifa (sans serif) son unas tipografías lisas, sin adornos o remates en los extremos de los bordes de las letras.

Tradicionalmente, se han utilizado tipografías con serifa en medios impresos argumentando que dichos bordes ofrecen una mayor legibilidad que las tipografías de paloseco. Sin embargo, en medios digitales, estas últimas suelen ser más utilizadas puesto que dan un aspecto más limpio y claro que las tipografías con serifa.

Por otro lado, existe un tipo de fuente denominada fuente monoespaciada, que se basa en que cada una de sus letras tienen exactamente la misma longitud horizontal. Son muy útiles para tareas de programación o emuladores de terminal, donde se leen mejor líneas con estas características.

Familia tipográfica

Existe un amplio abanico de propiedades CSS para seleccionar las fuentes o tipografías a utilizar. Empezaremos por la más lógica, la de seleccionar una familia tipográfica, que no es más que indicar mediante CSS el nombre de la tipografía que queremos utilizar:

Con la primera propiedad, denominada font-family, podemos seleccionar se puede seleccionar cualquier tipografía simplemente escribiendo su nombre. Si dicho nombre está compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples para indicarla (como se ve en el segundo ejemplo):

div {
    font-family: Verdana;
    font-family: 'PT Sans';     /* Otro ejemplo */
}

Esta es la forma más básica de indicar una tipografía. Sin embargo, hay que tener en cuenta que estas fuentes sólo serán visibles si el usuario las tiene instaladas en su sistema.

Esto hace que esta tarea se convierta en algo muy complejo, puesto que los diferentes sistemas operativos (Windows, Mac, GNU/Linux) tienen diferentes tipografías instaladas (y carecen de tantas otras) así como que también entramos en temas de licencias y tipografías propietarias, que no se permiten utilizar en según que casos.

Consejo: La página FontFamily.io incorpora un sencillo formulario para mostrar información sobre determinadas tipografías y como se mostrarían en diferentes sistemas (Windows, Mac OS, GNU/Linux, Android, iOS, Windows Phone, etc...). Más adelante, veremos la regla @font-face de CSS3, que permite utilizar fuentes tipográficas sin necesidad de tenerlas instaladas, utilizando repositorios gratuitos de fuentes como Google Fonts.

Para paliar en parte este problema, una de las primeras buenas prácticas es añadir varias tipografías alternativas, separadas por una coma:

div {
    font-family: Vegur, 'PT Sans', Verdana, Sans-serif;
}

Así pues, el navegador busca la fuente Vegur en nuestro sistema, en el caso de no estar instalada, pasa a la siguiente y así sucesivamente. Se recomienda especificar al menos 3 tipografías diferentes.

Truco: Como última opción de font-family se recomienda utilizar una palabra clave denominada «web-safe fonts» (fuentes seguras). Estas palabras claves son simplemente una forma de decirle al navegador que busque una tipografía instalada en el sistema que cumpla con ciertas características.

Las palabras clave de fuentes seguras son las siguientes:

Tamaño de la tipografía

Otra de las propiedades más utilizadas con las tipografías es font-size, que permite especificar el tamaño que tendrá la tipografía que utilicemos:

Se pueden indicar tres tipos de valores:

• Medidas absolutas: Palabras clave como medium que representan un tamaño medio (por defecto), small: tamaño pequeño, x-small: tamaño muy pequeño, etc...

• Medidas relativas: Palabras clave como smaller que representan un tamaño un poco más pequeño que el actual, o larger que representa un tamaño un poco más grande que el actual.

• Medida específica: Simplemente, indicar píxeles, porcentajes u otra medida para especificar el tamaño concreto.

Estilo y peso

A las tipografías elegidas se les puede aplicar ciertos estilos, muy útil para maquetar los textos, como por ejemplo negrita o cursiva (italic). La propiedad que utilizamos es font-style y puede tomar los siguientes valores:

Con la propiedad font-style podemos aplicarle estos estilos. En la mayoría de los casos, se aprecia el mismo efecto con los valores italic y oblique, no obstante, italic muestra la versión cursiva de la fuente, específicamente creada por el diseñador, mientras que oblique es una representación forzosa artificial de una tipografía cursiva.

Por otro lado, tenemos el peso de la fuente, que no es más que el grosor de la misma. También depende de la fuente elegida, ya que no todas soportan todos los tipos de grosor. De forma similar a como hemos visto hasta ahora, se puede especificar el peso de una fuente mediante tres formas diferentes:

• Valores absolutos: Normal y bold. Normal es el valor por defecto.
• Valores relativos: Bolder (más gruesa) o Ligther (más delgada).
• Valor numérico: Un número del 100 (menos gruesa) al 900 (mas gruesa). Generalmente, se incrementan en valores de 100 en 100.

Las tipografías en CSS3

Las versiones previas de CSS tenían una gran limitación: la imposibilidad de utilizar fuentes personalizadas. Es cierto que bastaba con utilizar la propiedad font-family y especificar el nombre de la fuente a utilizar. Pero resulta que no era tan bonito como podía parecer en un principio. Por varias razones:

• Las fuentes especificadas mediante la propiedad font-family debían estar instaladas en el sistema donde se visualizaba la página web. En el ejemplo superior y al contrario que Times New Roman o Georgia (las cuales venían de serie en un sistema Windows), la tipografía Vegur no viene instalada de serie en Windows. Así pues, nosotros (y los usuarios con esa fuente instalada) veríamos la página web con dicha tipografía, pero en el navegador de otro usuario que no la tenga, no se encontraría la fuente y se pasaría a la siguiente alternativa (Times New Roman), y así sucesivamente.

• Otro de los problemas que existían se basa en el mismo problema, pero con matices diferentes. Mientras que las tipografías que vienen en sistemas como Microsoft Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS...) se verían correctamente en navegadores con dicho sistema operativo, no ocurriría lo mismo en dispositivos con GNU/Linux o Mac. Y lo mismo con tablets o dispositivos móviles. Esto ocurre porque frecuentemente dichas tipografías son propietarias y tienen licencias que permiten usarse sólo en dispositivos de dicha compañía.

En definitiva, aunque teníamos los mecanismos, era complicado conseguir cambiar la fuente y obtener el mismo resultado de diseño en todos los navegadores y sistemas disponibles.

Actualmente, todo esto ha cambiado debido a CSS3 y la regla @font-face, la cual permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Todo ello de forma transparente al usuario.

Veamos como se utiliza:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),
         url(opensans.eot) format('embedded-opentype'),
         url(opensans.ttf) format('truetype'),
         url(opensans.otf) format('opentype'),
         url(opensans.woff) format('woff');
}

La regla @font-face permite crear uno (o varios) bloques donde definir las tipografías a cargar en el documento. En el ejemplo superior vamos a hacerlo con la fuente Open Sans, una tipografía libre creada por Steve Matteson para Google.

Basicamente, abrimos un bloque @font-face, establecemos su nombre mediante font-family y definimos sus características mediante propiedades como font-style o font-weight. El factor clave viene a la hora de «adjuntar» la tipografía, cosa que se hace mediante la propiedad src con los siguientes valores:

Consejo: Actualmente, basta con utilizar la expresión local() y la expresión url utilizando el formato WOFF. Actualmente, se ha empezado a adoptar este formato como sistema principal, el cuál no es más que un archivo Open Type (OTF) o True Type (TTF) comprimido para ahorrar ancho de banda (reducciones de hasta un 40%) que además también puede contener metadatos adicionales.

Usar Google Fonts como proveedor

En la actualidad, es muy común utilizar Google Fonts como repositorio proveedor de tipografías para utilizar en nuestros sitios web por varias razones:

• Disponen de un amplio catálogo de fuentes y tipografías libres y/o gratuitas.
• Resulta muy cómodo su uso y simplifica mucho la utilización de tipografías externas.
• El servicio está muy extendido y utiliza un sistema llamado CDN, que brinda ventajas de velocidad.

En la propia página de Google Fonts podemos seleccionar las fuentes con las características deseadas y generar un código HTML con la tipografía (o colección de tipografías) que vamos a utilizar. No perder de vista el medidor que Google pone a nuestra disposición, porque dependiendo del tipo de fuente o cantidad de características puede resultar una colección de tipografías muy pesadas que ralentizarán nuestra página de forma notable:

Todo esto nos generará el siguiente código que será el que tendremos que insertar en nuestro documento HTML, concretamente, antes de finalizar la sección <head>:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>

Como se puede ver, al añadir este código, estamos enlazando en el documento HTML un enlace al repositorio de Google, que nos genera automáticamente todo el código CSS necesario de @font-face especialmente diseñado para las características y tipografías escogidas.

Si además, por ejemplo, añadimos también la familia de tipografías Roboto (con grosor 400) y Lato (con grosor 300 y 400), el código necesario sería el siguiente:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto:400|Lato:300,400' rel='stylesheet' type='text/css'>

De esta forma conseguimos cargar varias tipografías desde el repositorio de Google de una sola vez, sin la necesidad de varias líneas de código diferentes, que a su vez conectarían varias veces con Google, pudiendo hacerlo de una sola vez.

Para terminar, sólo necesitaremos añadir la propiedad font-family:'Open Sans', font-family:'Lato' o font-family:'Roboto' a los textos que queramos dar formato con dichas tipografías.

Propiedades CSS3

CSS3 añade algunas propiedades interesantes relacionadas con fuentes y tipografías. Por ejemplo, la propiedad font-stretch, con la cuál puedes definir el grado de expansión de la tipografía, desde muy condensado (letras muy unidas entre sí) a muy expandido (letras muy separadas entre sí):

Existen muchas otras propiedades interesantes, aunque la mayoría sólo con soporte parcial en los navegadores actuales. Recuerda siempre revisar el soporte de las propiedades CSS que utilizas, ya que puede cambiar de una versión a otra del navegador (generalmente, mejorando el soporte).

Algunas otras propiedades interesantes son las siguientes:

La primera de ellas, font-variant, permite establecer el valor small-caps para convertir el texto en formato versalitas, una variación de mayúsculas, con un tamaño ligeramente inferior, similar al de las minúsculas.

Por otro lado, font-size-adjust permite ajustar la diferencia de tamaño entre las minúsculas y mayúsculas, tomando como base la x minúscula y la X mayúscula.

Atajo: Tipografías

Finalmente, algunas de las propiedades más utilizadas de tipografías y fuentes se pueden resumir en una propiedad de atajo, como viene siendo habitual. El esquema es el siguiente:

div {
    font: <style> <variant> <weight> <size/line-height> <family>;
}

Por ejemplo, utilizar la tipografía Arial, con la fuente alternativa Verdana o una fuente segura sin serifa, a un tamaño de 16 píxeles, con un interlineado de 22 píxeles, un peso de 400, sin utilizar versalitas y con estilo cursiva:

div {
    font: italic normal 400 16px/22px Arial, Verdana, Sans-serif;
}