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">