Tipografías standard y cómo usarlas en HTML

Muchas veces una tipografía dada nos puede parecer muy bonita, pero a la hora de usarla en el sitio web que estamos armando nos pueden terminar decepcionando. Y es porque se ven distinto según el sistema operativo que usemos. Para evitar esto hay que saber cuales son las tipografías estándares, y sus equivalentes en distintos sistemas operativos.

En la siguiente imagen se pueden ver los equivalentes entre Windows Vista, Windows anteriores y MacOS.

 

Y a continuación repasamos el código CSS de las tipografías estándares:

Arial

.classname {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}

Arial Black

.classname {
color: #333333;
font-family: 'Arial Black', Gadget, sans-serif;
}

Arial Narrow

.classname {
color: #333333;
font-family: 'Arial Narrow', sans-serif;
}

Century Gothic

.classname {
color: #333333;
font-family: Century Gothic, sans-serif;
}

Copperplate Gothic Light

.classname {
color: #333333;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}

Courier New

.classname {
color: #333333;
font-family: 'Courier New', Courier, monospace;
}

Georgia

.classname {
color: #333333;
font-family: Georgia, Serif;
}

Gill Sans

.classname {
color: #333333;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}

Impact

.classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
}

Lucida Console

.classname {
color: #333333;
font-family: 'Lucida Console', Monaco, monospace;
}

Lucida Sans Unicode

.classname {
color: #333333;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

Palatino Linotype

.classname {
color: #333333;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

Tahoma

.classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}

Times New Roman

.classname {
color: #333333;
font-family: 'Times New Roman', Times, serif;
}

Trebuchet MS

.classname {
color: #333333;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

Verdana

.classname {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
}

Visto en: CSSblog