el Isra - CSS: Fuentes (parte I)

CSS: Fuentes (parte I)

Friday, November 20, 2009 1:33:39 AM

Tal vez a todos nos ha pasado: Nos mandan un documento hecho en Word todo mal acomodado, con saltos de página a lo loco, tablas desfazadas, etc., y lo más probable, es que sea porque el gracioso que nos lo mandó lo hizo con el título principal en Showcard Gothic, nombre de los capítulos en Bauhaus, textos en Hobo Std (es un ejemplo, no la usaría en realidad), y toda una serie de fuentes de las que ni siquiera sabíamos su existencia. Obviamente, como no las tenemos en nuestra computadora, Word elegirá las fuentes para reemplazarlas.

Lo mismo pasa en las páginas Web. Podemos definir a nuestro gusto los tipos de letra, pero lo que vea el usuario dependerá de la existencia de estas fuentes en su computadora.

En esta primera parte explicaré la regla más básica para aplicar tipos de letra a nuestras páginas Web, para evitar que esos problemas se presenten.

Existen una inmensidad de tipos de letra para computadora, y para bien o para mal, todos pueden ser usados en las páginas Web. Es bueno porque le dan estilo a las páginas Web. El problema es que pasa eso de los documentos, si no tenemos la fuente corremos el riesgo de que no sólo se pierda diseño, sino también se desacomode el contenido.

El correcto diseño de un sitio Web abarca todo lo que involucre el prepararlo para cualquier tipo de situación, en navegadores diferentes, en sistemas diferentes, en dispositivos diferentes. Pues también el manejo de los tipos de letra es algo que debemos cuidar.

El lenguaje CSS (Cascade Style Sheets/Hojas de estilo de cascada) nos permite definir el tipo de letra de cada objeto mediante la propiedad font-family.

Suponiendo que yo hago mi página Web como en el ejemplo del documento de Word, haría esto:

body{
    font-family:'Hobo Std'; /* Texto para toda la página */
}
h1{
    font-family:'Showcard Gothic'; /* Título de la página */
}
h2{
    font-family:Bauhaus; /* Nombre de los capítulos */
}

La etiqueta <body> abarca todo el contenido del documento, por lo que sus propiedades serán aplicadas a toda la página, pero como definí propiedades únicas para <h1> y <h2>, en este caso los tipo de letra, estos reemplazarán al definido para <body>

El asunto aquí es que pasará lo mismo. En mi computadora, el documento se verá tan feo como lo definí, pero en la de cualquier otra persona, muy probablemente mostrará todo en un tipo de letra propio del sistema, sea Arial o Times New Roman, Nimbus, Helvetica, o el que el sistema operativo tenga como predeterminada para casos de desarrolladores inconscientes como yo.

Tipos de fuente genéricos

Para tener un poco de mayor control en la definición de tipos de letra para páginas Web, CSS utiliza las fuentes genéricas. Los tres primeros son tipos ya definidos en imprenta, desde mucho antes de la computadora. Los otros dos no estoy seguro, pero creo que fueron posteriores.

Serif (con serifas, o con terminal o gracia): Son las que tienen los extremos "adornados" (Roman, Times New Roman, Georgia, Cambria)
Sans-Serif (sin serifas): No tienen esas terminaciones en los extremos (Arial, Helvetica, Calibri)
Monospace (monoespacio): Todos los caracteres tienen la misma anchura (Courier, Courier New, Consolas, Lucida Console). Es común ver como este tipo de letra las que parecen de máquina de escribir, pero no necesariamente son así (no necesita serifas). La única condición es la anchura de los caracteres.
Cursive (cursiva): Son las fuentes con estilo manuscrito (Script, Lucida Handwritting)
Fantasy (fantasía): Todos los tipos de letra estilizados, como las letras góticas, las estilo graffiti, etc. No cuentan las que son garabatos, como Wingdings.

Los ejemplos los puse con el tipo de letra definido. Si alguna no adopta un estilo diferente (excepto Sans-Serif, posiblemente), es porque tu navegador no tiene definido correctamente ese tipo.

Cada tipo de letra existente pertenece a uno de los grupos genéricos. La única excepción serían las que son caracteres, como Wingdings, porque es imposible clasificarlas.

Como diseñadores Web, debemos siempre ser conscientes de que nuestros visitantes no usarán el mismo sistema, ni las mismas fuentes que nosotros. Por lo que nuestro sitio debe estar preparado al ambiente en el que se mostrará, siempre definiendo un tipo genérico.

body{
    font-family:'Hobo Std', Sans-Serif;
}
h1{
    font-family:'Showcard Gothic', Serif
}
h2{
    font-family:Bauhaus, Serif
}

Además de eso, nuestro sitio debe tener el texto y sus estilos acomodados de tal forma que el cambiar el tipo de letra no afecte al usuario. Por ejemplo, algo que me pasó a mí: hice un sitio en Windows, usando esta declaración del texto:

    font-family:Calibri,Arial,Helvetica,Sans-Serif;

Calibri (de las nuevas que se instalan con Office 2007), es la primera en Windows, porque se me hace más decente que Arial, que es la segunda, en caso de que la primera no exista. Helvetica es para Mac (siempre he sabido eso, pero si me equivoco, corríjanme, por favor). Después de algún tiempo con el sitio, incluso ya subido al servidor, se me ocurrió probarla sin Calibri. Pues todo el texto se veía gigante con Arial, los textos en negrita se extendían demasiado, y se perdía el estilo. El primer problema es que Calibri es demasiado pequeña, el segundo, que Arial en negrita es muy gorda. Lo que hice fue buscar un tercer comparativo. Usé un programa que tengo para sacar las fuentes de mi partición ya inservible de Linux e instalarlas en Windows, para usar la fuente Nimbus Sans L (predeterminada de OpenOffice.org) y checar el sitio con la nueva fuente.

Pues Nimbus resultó del tamaño de Arial, pero en negrita su grosor es en proporción como en Calibri, sin desbordarse tanto.

De las fuentes Sans-Serif de Windows, están Arial, Verdana, Tahoma, Lucida Sans y Trebuchet MS. Las dos primeras no las recomiendo, Arial por lo que ya dije, y Verdana es igual, con la diferencia de no necesitar ser negrita para desparramarse por la pantalla. Las otras tres van en ese orden de la más elegante a la más estilizada, pero todas son adecuadas. Para los usuarios de Windows, la fuente usada en todo el sitio de Opera es Trebuchet MS.

Helvetica para Mac no la conozco bien, pero es la predeterminada, y las variantes que he encontrado para Windows siempre mantienen un aspecto uniforme, ni muy anchas ni muy delgadas, ni muy largas ni muy cortas. Para Linux no recuerdo los tipos de letra, pero tengo entendido que Nimbus son de los más comunes.

Como sea, al final de la definición siempre debe darse el tipo genérico, para al menos tener una referencia común para cualquier dispositivo.

body{
    font-family:Tahoma,Helvetica,'Nimbus Sans L',Sans-Serif;
    font-size:10px;
}
h1{
    font-family:'Times New Roman',Georgia,Roman,'Nimbus Roman No9 L',Serif;
    font-size:16px;
}
pre{
    font-family:'Courier New',Courier,'Nimbus Mono L',Monospace;
    font-size:10px;
}

El tamaño de la letra también es muy importante definirlo, para asegurarnos que cada definición de un tipo de letra respetará el tamaño indicado.

Los tipos script y fantasy son más delicados, pues ahí realmente las probabilidades de coincidencia son muy escasas, así que lo mejor es limitar su uso en lo posible.

Parte II: WebFonts en CSS3

CSS: body{display:none}CSS: Fuentes (parte II)