Tipografía Web

Si has usado HTML,  probablemente habrás llegado a través de la etiqueta <font>. Esta es una etiqueta que te permite definir el tamaño de fuente, el color y la familia. Pero hay inconvenientes con la etiqueta <font>

1. No te permiten cambiar todos los aspectos de la tipografía.
2. No te da mucha flexibilidad en las opciones que admite.
3. Se mezcla la presentación visual en la estructura del documento, haciendo las cosas difíciles para editar más tarde.

Por suerte las hojas de estilo “Cascading Style Sheets” (CSS) te permiten hacer la tipografía de tu Web más precisas.

Familias de fuentes / Font Families
La determinación de la fuente que vas a utilizar es el primer paso para la tipografía adecuada en la Web. El método más común es la definición de la familia de fuentes ya sea como una fuente genérica o específica, y, a continuación una lista de varias fuentes como las copias de seguridad (separados por comas).

Por ejemplo:

p { font-family: Geneva, Arial, Helvetica, sans-serif;

Tamaño fuente / Font Size
Una vez que hayas definido la familia de la fuente, tendrás que ajustar el tamaño de la fuente. Hay muchas unidades de medida que puedes utilizar con  CSS:

  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • points (pt)
  • picas (pc)
  • pixels (px)
  • ems (em)
  • X-height (ex)
  • percentages (%)

Los cinco primeros tipos son absolutos (fijos) y los ajustes no funcionan muy bien en las páginas Web porque las páginas Web son vistas por las personas con muchas configuraciones diferentes. La segunda son cuatro tamaños relativos de fuente y se trabajan mejor en la Web. Yo prefiero usar ems.

p { font-size: 1em; }

Colores de fuente / Font Colors
Curiosamente, la propiedad no es color de fuente font-color, es sólo del color. Elige los colores de fuente de la misma manera que lo harías con cualquier otro color. Luego, lo defines en tu CSS:

p { color: #330000; }

Linea de altura, espacio, y resaltado
Algunas de las cosas que puedes hacer con CSS que no se puede hacer con la etiqueta de fuente son lineas de altura, eapacios, y destacar texto. Las líneas de altura en CSS se llaman line-height. Utiliza las mismas unidades de medida que usas para tus fuentes de tu line-height:

p { line-height: 1.25em; }

Espacio es la cantidad de espacio entre las letras. Aunque a menudo no tiene que cambiar esta en las páginas Web, puede que desees espacio más estricto o más flojo para conseguir un efecto. Esto se hace con la propiedad de espaciado entre letras:

p { letter-spacing: -0.1em; }

Y puedes resaltar el texto con varias propiedades de la fuente:

  • background-color: Para resaltar el texto con un fondo de color.
  • font-weight: Establece la audacia de una fuente.
  • font-style: determina la letra cursiva de la fuente.
  • font-variant: Cambia la fuente a versalitas.

p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}

Saca el máximo provecho a tu tipografía Web.

Y para los usuarios la tipografía con CSS ofrece una gran cantidad de opciones y flexibilidad. Hay que aprovecharse de ella.

Dejar un comentario

*