tipografia-css-comparativa-estandar-estandares

Muchas veces encontramos tipografías, decimos, “son muy bonitas”. Pero a la hora de usarlas en el blog/sitio web nos llevamos una decepción. Y es que se ven distintas según el sistema operativo que utilicemos. Para evitar esto aquí os dejamos algunas tipografías estándares, con una comparativa de cada fuente estándar por sistema operativo que podéis ver en la ilustración del principio de la entrada. Si conoces otras, por favor, ponla en los comentarios.

Os mostramos el código CSS de las tipografías estándares:

Impact

impact

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

Palatino Linotype

palatino-linotype

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

Tahoma

tahoma

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

Century Gothic

century-gothic

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

Lucida Sans Unicode

lucida-sans-unicode

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

Arial Black

arial-black

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

Times New Roman

times-new-roman

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

Arial Narrow

arial-narrow

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

Verdana

verdana

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

Copperplate Gothic Light

copperplate-gothic-light

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

Lucida Console

lucida-console

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

Gill Sans

gill-sans

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

Trebuchet MS

trebuchet-ms

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

Courier New

courier-new

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

Arial

arial

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

Georgia

georgia

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


Vía | Cosassencillas

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!