Web Fonts, CSS, y HTML

Originalmente podíamos utilizar la propiedad font-family de CSS para especificar qué fuente deseábamos utilizar, algo que sólo funcionaba si la fuente en cuestión estaba instalada en los equipos de los usuarios, motivo por el cual se podían especificar varias fuentes (el navegador intentará utilizar la primera fuente disponibles).

p { font-family : “Times New Roman”, Times, serif; }

Las Fuentes que podremos utilizar dependerán en muchos casos del Sistema Operativo y del Software instalado en los equipos de los usuarios. A continuación se comentan los distintos tipos de fuentes, así como se incluyen algunos ejemplos del valor que podríamos utilizar en la propiedad font-family. Es importante tener en cuenta que algunas fuentes no admiten variaciones (ej: negrita y/o cursiva).

• Serif. Destacan por tener como unos pequeños piececillos al final de sus extremos, originado en las antiguas fuentes tradicionales. Ejemplos:
  • Georgia, "Times New Roman", Times, serif
  • Baskerville, "Palatino Linotype", Times, serif
  • "Hoefler Text", Garamond, Times, serif
• Sans-Serif. Destacan por una apariencia sencilla y vértices en punta (sin pies). Ejemplos:
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif
  • Tahoma, "Lucida Grande", Arial, sans-serif
  • "Trebuchet MS", Arial, Helvetica, sans-serif
  • "Century Gothic", "Gill Sans", Arial, sans-serif
• Otros tipos de fuentes.
  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco, monospace
  • "Copperplate Light", "Copperplate Gothic Light", serif
  • "Marker Felt", "Comic Sans MS", fantasy
  • Arial Black
  • Arial Narrow
  • Impact

Introducción a las Web Fonts

Actualmente, la mayoría de los navegadores ya soportan las Web Fonts, lo cual, hace que cada vez sean más interesantes, más aún con el aumento del ancho de banda en el acceso a Internet que se ha producido en los últimos años (hay que tener en cuenta que el usuario tendrá que descargárselas). Quizás el principal inconveniente es que muchas fuentes tienen Licencias que prohíben explícitamente su utilización en la Web, aunque igualmente, otras muchas podremos utilizarlas.

Existen varios formatos de fuentes que podremos utilizar, de los que al menos, deberíamos ser capaces de proporcionar EOT, WOFF, y True Type:

• Embedded Open Type (EOT). Sólo funcionan con Internet Explorer.
• True Type (*.ttf) y Open Type (*.otf). Es el formato más común, soportado en IE9+, Firefox, Chrome, Safari, Opera, iOS Safari 4.2+, Android, y Blackberry.
• Web Open Font Format (WOFF). Nuevo formato comprimido diseñado para la Web, soportado por IE9+, Firefox, Chrome, Safari, Opera, iOS Safari 5+ y Blackberry (falta Android).
• Scalable Vector Graphic (SVG). Realmente no es un formato de fuente, sino un formato gráfico. No está soportado por Internet Explorer ni Firefox.

Afortunadamente, existen muchas Web desde la que podemos descargarnos Web Fonts de forma gratuita (ojo, otras son de pago), o que en su defecto hospedan Web Fonts que podemos utilizar, como son los siguientes casos.

• The League of Movable Type: http://www.theleagueofmoveabletype.com/
• Exljbris font foundry: http://www.exljbris.com/
• Fontex: http://www.fontex.org/
• The Open Font Library: http://openfontlibrary.org/ 
• Font Squirrel: http://www.fontsquirrel.com/
• Google Fonts: http://www.google.com/webfonts
• Adobe TypeKit (de pago): https://typekit.com/

En el caso particular de Google Fonts, disponemos de un Wizard que permite seleccionar las fuentes, y que nos generará el código (HTML/CSS) que tendremos que pegar en nuestra Web para utilizar las Web Fonts de Google que hemos seleccionado. Hecho esto, ya podremos crear nuestros estilos utilizando las Google Fonts.

Si lo necesitamos, podemos utilizar el servicio Generador de Fuentes de Font Squirrel (@font-face Generator), que nos permitirá realizar un upload de un fichero de fuente (ej: True Type), para seguidamente generar/convertir a los diferentes formatos de fuentes (ej: WOFF, EOT, etc.), lo cual, puede resultarnos de gran utilidad. Podemos acceder a este servicio en la siguiente URL: Squirrel Font-Generator

Algo que también nos resultará de gran utilidad disponer de Fuentes de Iconos (Icon Fonts), ya sea de terceros o creadas por nosotros mismos.

• The Big List of Flat Icons & Icon Fonts
• HTML for Icon Font Usage
• Icon Fonts are Awesome
• IcoMoon
• Pictonic

Utilizando las Web Fonts en CSS

Para utilizar las Web Fonts en nuestras Hojas de Estilo CSS, deberemos utilizar la directiva @font-face (en la que si lo deseamos, podremos incluir diferentes formatos de fuente, de tal modo que el navegador se descargará la primera que entienda) para seguidamente poder utilizar la fuente de la forma convencional.

Debemos tener en cuenta que para cada variación (negrita, cursiva, o negrita-y-cursiva) necesitaremos utilizar una directiva @font-face, en la que deberemos incluir las propiedades font-weight (normal ó bold) y font-style (normal ó italic) para saber a qué variación se corresponde dicha directiva @font-face. Por lo tanto, si deseamos utilizar una Web Font en sus distintas variaciones (normal, negrita, cursiva, negrita-y-cursiva) necesitaremos incluir cuatro directivas @font-face, y los usuarios se descargarán cuatro fuentes. A continuación se muestra un ejemplo de una directiva @font-face.

@font-face {
   font-family: 'GuilleSQL';
   src: url('GuilleSQL Regular.eot');
   src: url('GuilleSQLRegular.eot?#iefix') format('embedded-opentype'),
      url('GuilleSQLRegular.woof') format('woff'),
      url('GuilleSQLRegular.ttf') format('truetype'),
      url('GuilleSQLRegular.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

En consecuencia, podríamos crear cuatro directivas @font-face (una para cada variación), asignando a todas ellas el mismo valor de font-family (ej: GuilleSQL), así como el valor que corresponda para las propiedades font-weight (normal ó bold) y font-style (normal ó italic). Sin embargo, esta técnica no funcionaría en IE8 (ni IE9 en Modo de Compatibilidad).

Como alternativa compatible con IE8, podríamos crear cuatro directivas @font-face (una para cada variación), asignando a cada una ellas un valor distinto de font-family (ej: GuilleSQL, GuilleSQLnegrita, GuilleSQLcursiva, etc), y omitiendo las propiedades font-weight y font-style. Seguidamente, deberíamos especificar varios estilos, como en se muestra en el siguiente caso de ejemplo:

• p { font-family: GuilleSQL; font-style: normal; font-weight: normal: }
• p em { font-family: GuilleSQLcursiva; font-style: normal; font-weight: normal: }
• p strong { font-family: GuilleSQLnegrita; font-style: normal; font-weight: normal: }

Otra alternativa, sería evitar la utilización de variaciones de nuestra Web Font. Por poner un ejemplo, podemos utilizar una fuente regular en los encabezados h1. En este caso, podríamos crear un estilo para los encabezados h1 que especifique la utilización de la fuente que deseamos en su variación normal (font-weight: normal), evitando de esta manera la utilización de la variación negrita, como sería el caso por defecto. Evidentemente, esto nos puede funcionar con encabezados, pero con párrafos de texto libre, no será tan buena idea perder el resto de variaciones.

h1 {
   font-family: GuilleSQL;
   font-weight: normal;
}

Estableciendo el color y tamaño de las fuentes

La forma de establecer el color de la fuente en una Hoja de Estilos CSS es utilizando la propiedad color, la cual nos permitirá utilizar diferentes sintaxis al establecer su valor:

• Hexadecimal. Es el método tradicional, introduciendo los valores RGB en hexadecimal. Ej: color: #3300FF
• RGB. Permite establecer los valores RGB en decimal o como un porcentaje. Ej: color: rgb(20%, 0%, 100%) ó color: rgb(45, 0, 255)
• RGBA: RGB con nivel de transparencia. Permite establecer los valores RGB, junto con un cuarto valor entre 0 y 1 que indica el nivel de transparencia (0 es transparente y 1 es opaco). Ej: color: rgba(45, 0, 255, .5). Debe tenerse en cuenta que IE8 (y versiones anteriores) no entienden RGBA. Como Workaround puede utilizarse dos veces la propiedad color, la primera estableciendo un valor RGB (lo entenderán todos los navegadores) y la segunda estableciendo un valor RGBA (para quién pueda entenderlo).
• HSL. Permite establecer los valores HSL (Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad). El primer valor debe estar comprendido entre 0 y 360, y los dos siguientes son porcentajes. Un color puro debe tener un valor del 50% de Luminosidad. Ej: color: hsl(0, 100%, 50%)
• HSLA: HSL con nivel de transparencia. Permite establecer los valores HSL, junto con un cuarto valor entre 0 y 1 que indica el nivel de transparencia (0 es transparente y 1 es opaco). Ej: color: hsl(0, 100%, 50%, .5)

Del mismo modo, la forma de establecer el tamaño de la fuente en una Hoja de Estilos CSS es utilizando la propiedad font-size, la cual nos permitirá utilizar diferentes unidades de medida:

• Píxeles. Quizás la forma más tradicional. Ej: font-size: 32px
• Palabras clave (keywords). Podemos utilizar los siguientes valores: xx-small, x-small, small, medium, large, x-large, xx-large. Ej: font-size: large
• Porcentajes. Se trata de un valor relativo que además es heredable. Ej: font-size: 200%. Si tenemos listas HTML anidadas con un font-size del 200%, si partimos de un tamaño base de fuente de 18px, la primera lista utilizará un tamaño de 36px, mientras que la segunda lista utilizará un tamaño de 72px.
• EMS. Similar al porcentaje. De hecho, es como dividir el valor de un porcentaje entre 100, ya que por ejemplo, un 200% equivale a 2em. En consecuencia, se trata de un valor relativo que además es heredable. Ej: font-size: 2em.

Otras opciones de formato

A continuación comentamos otras opciones de formato que pueden resultarnos de utilidad.

• Negrita. Por defecto el texto en el interior de las etiquetas <strong>, <b>, <th>, y <h1>-<h6> se muestra en negrita, un comportamiento que podemos sobrescribir al establecer la propiedad font-weight al valor bold o al valor normal. Ej: font-weight: bold. Otra alternativa es establecer la propiedad font-weight a un valor numérico comprendido entre 900 (extremadamente negrita) y 100 (extremadamente fina), como se hace por ejemplo con las Google Fonts.
• Cursiva. Por defecto el texto en el interior de las etiquetas <em> e <i> se muestra en cursiva, un comportamiento que podemos sobrescribir al establecer la propiedad font-style al valor italic o al valor normal. Ej: font-style: italic.
• Letras Capitales. Tenemos la opción de mostrar el texto utilizando letras mayúsculas o minúsculas, estableciendo la propiedad text-transform al valor uppercase o al valor lowercase. Ej: text-transform: uppercase. Dado que se trata de una propiedad heredable, también podremos necesitar establecer la propiedad text-transform a none.
• Decoraciones del texto. Es posible añadir una línea inferior (subrayado), una línea superior, una línea media (tachado), e incluso hacer que el texto parpadee, para lo cual podemos establecer la propiedad text-decoration a alguno de sus valores: underline, overline, line-throught, o blink. Debe tenerse en cuenta que pueden establecerse varios valores simultáneamente. Ej: text-decoration: underline overline; Además, se trata de una propiedad heredable, por lo que podremos necesitar establecer la propiedad text-decoration a none. Ej: text-decoration: none; Este tipo de estilos son útiles en muchos casos, como por ejemplo al establecer los estilos de los enlaces. Ej: a:hover { text-decoration: none; }
• Espaciado de Letras. Es posible reducir el espaciado entre letras utilizando un valor negativo para la propiedad letter-spacing (ej: letter-spacing: -2px) o ampliarlo utilizando un valor positivo (ej: letter-spacing: .7em).
• Espaciado de Palabras. Es posible reducir el espaciado entre palabras utilizando un valor negativo para la propiedad word-spacing (ej: word-spacing: -1px) o ampliarlo utilizando un valor positivo (ej: word-spacing: 2px).
• Sombras de Texto. Es posible añadir una sombra al texto utilizando la propiedad text-shadow, la cual requiere de cuatro valores: posición X (horizontal offset), posición Y (vertical offset), amplitud (blurriness), y color. Ej: text-shadow: -2px 2px 2px #999999. Incluso es posible definir varias sobras simultáneamente, consiguiendo efectos bastantes interesantes. Ej: text-shadow: -2px 2px 2px #999999, 2px -2px 2px #999999. Desafortunadamente, se trata de una propiedad CSS3 que no funciona en IE9. Para más info de cómo sacarle provecho a las sombras de texto con CSS3 ver Fun with CSS3 Text Shadow Property.

También tenemos disponible la propiedad font que permite establecer de forma simultánea las propiedades font-style, font-variant, font-weight, font-size, line-height, y font-family, aunque las únicas propiedades obligatorias son font-size y font-family. Ejemplos:

• font: italic bold small-caps 18px/150% Georgia, Times, serif;
• font: 150% Arial, Helvetica, sans-serif;
• font: normal normal normal 1.5em/normal Arial;

Partiendo de aquí, tan sólo nos queda darle rienda suelta a nuestra imaginación. Por ejemplo:

• Sabemos que los encabezados <h1>-<h6> se muestran en negrita, por lo que si deseamos resaltar texto dentro de ellos podemos crear un estilo h1 strong { color: #3300FF;}. De este modo, podemos resaltar el texto etiquetado como negrita existente dentro de un encabezado.
• En lugar de utilizar el subrayado (text-decoration: underline) es posible utilizar el borde inferior (ej: de un DIV, TD o de un LI), lo cual nos permitirá controlar el color, grosor, y ubicación del borde.

Formateando párrafos, encabezados y demás

Algunas opciones de formato están orientadas a utilizarlas con párrafos, encabezados y otros elementos, como es el caso de las siguientes propiedades de estilo.

• Espacio entre líneas del mismo párrafo. Es posible utilizar la propiedad line-height para especificar el espaciado entre las líneas de un mismo párrafo, pudiendo utilizar como unidades píxeles, ems, o porcentajes, siendo recomendable utilizar ems o porcentajes, ya que ajustan el espaciado entre líneas en función del tamaño de la fuente. Ej: line-height: 200%. También es posible especificar un valor numérico sin indicar la unidad, lo que se interpretará como un multiplicador. Ej: line-height: 2
• Alineación del texto. Es posible utilizar la propiedad text-align para especificar cómo deseamos alinear el texto: left, right, justify, ó center. Ej: text-align: justify
• Indentación o sangrado del texto. Es posible utilizar la propiedad text-indent para especificar la indentación o sangrado del texto, pudiendo utilizar como unidades píxiles, ems (en base al tamaño de fuente) o porcentajes (en base al ancho del elemento que contiene el texto). Ej: text-indent: 20px
• Márgenes. También podemos configurar los márgenes, por ejemplo, para cambiar el espaciado entre párrafos, para lo cual podemos utilizar las propiedades margin-top y margin-bottom. Así, podríamos eliminar el espaciado entre párrafos utilizando un estilo como p { margin-top:0; margin-bottom:0; }. Debido a que no todos los navegadores utilizan los mismos valores para los márgenes, suele ser recomendable configurarlos en nuestra Hoja de Estilos para garantizar que conseguimos el aspecto deseado.

Despedida y Cierre

Hasta aquí llega el presente artículo, que en cierto modo, es una continuación de otros artículos recientes también relacionados con el Desarrollo Web:

• Selectores CSS
• Un vistazo a HTML5
• Minificadores de Código (JavaScript, HTML, CSS, y demás)

Poco más por hoy. Como siempre confío que la lectura resulte de interés.