CSS avanzado

5.4. Texto con el framework YUI

El manejo del texto es una de las grandes ventajas aportadas por el uso del framework. Definir las propiedades del texto de la forma que indica YUI asegura que tus páginas se ven exactamente igual en cualquier versión de cualquier navegador. Además, garantiza que las propiedades del texto de tus páginas serán consistentes y que los contenidos de texto se adaptan perfectamente a cualquier medio y/o dispositivo.

En primer lugar, el tercer componente CSS de YUI es fonts.css, una hoja de estilos tan sencilla como se muestra a continuación:

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}

Después de aplicar reset.css, base.css y fonts.css, las páginas muestran el texto normal con un tamaño de letra de 13px y un interlineado de 16px. Los títulos <h1> se muestran con un tamaño de 18px, los títulos <h2> con un tamaño de 16px y los títulos <h3> con un tamaño de 14px. Además, todos los elementos de texto se muestran con el tipo de letra Arial o similar, salvo los elementos <code> y <pre> que se muestran con una fuente de ancho fijo.

YUI recomienda establecer todos los tamaños de letra utilizando el porcentaje como unidad de medida, porque asegura que el texto se muestra de forma más consistente que al utilizar la unidad em. Como el tamaño de letra base establecido por fonts.css es 13px, esta medida es la que corresponde al valor 100%. Utilizando una sencilla operación se puede obtener el porcentaje correspondiente a cualquier tamaño en píxeles. La siguiente tabla muestra algunos de los valores más comunes:

Para obtener este tamaño en píxeles... ...utiliza el siguiente valor de porcentaje
10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%

Por lo tanto, si se quiere modificar por ejemplo el tamaño de letra de los párrafos y de los títulos de sección <h1> y <h2>, debes utilizar las siguientes reglas en tu hoja de estilos propia:

p {
  font-size: 123.1%;  /* equivale a 16px */
}
h1 {
  font-size: 182%;    /* equivale a 24px */
}
h2 {
  font-size: 167%;    /* equivale a 22px */
}
h3 {
  font-size: 153.9%;  /* equivale a 20px */
}

De la misma forma, también es posible modificar el tipo de letra de cualquier elemento de la página. Las siguientes reglas hacen que los párrafos se muestren con un tipo de letra Georgia o similar y los títulos de sección con un tipo de letra Verdana o similar:

p {
  font-family: Georgia, "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Para hacer uso de los estilos proporcionados por el componente fonts.css es necesario que las páginas enlacen esa hoja de estilos:

<link rel="stylesheet" type="text/css" href="css/fonts-min.css">

Recuerda que también puedes enlazar esta misma hoja de estilos directamente desde los servidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css">

Por último, como es muy común utilizar todos los componentes CSS de forma simultánea, YUI incluye una hoja de estilos que combina todas las hojas de estilos individuales. Además de reducir el tamaño total de los archivos, disponer de una sola hoja de estilos reduce el número de peticiones realizadas al servidor. Para utilizar la hoja de estilos completa sólo es necesario utilizar la siguiente etiqueta <link>:

<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

La hoja de estilos completa también se puede enlazar directamente desde los servidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">