Puedes recibir las actualizaciones gratis por email

16 tipografías estándares para usar con CSS

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

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

Palatino Linotype

palatino-linotype

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

Tahoma

tahoma

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

Century Gothic

century-gothic

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

Lucida Sans Unicode

lucida-sans-unicode

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

Arial Black

arial-black

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

Times New Roman

times-new-roman

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

Arial Narrow

arial-narrow

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

Verdana

verdana

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

Copperplate Gothic Light

copperplate-gothic-light

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

Lucida Console

lucida-console

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

Gill Sans

gill-sans

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

Trebuchet MS

trebuchet-ms

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

Courier New

courier-new

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

Arial

arial

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

Georgia

georgia

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

Vía | Cosassencillas

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Por ahora hay 9 comentarios ¿Quieres opinar?

muy buena tu entrada, pruebo y veo que tal…saludos!!!

[...] 16 tipografías estándares para usar con CSS fuente: cssblog.es http://www.cssblog.es/16-tipografias-estandares-para-usar-con-css/ [...]

[...] de la misma manera en Windows que como se visualiza en Mac, pues bien para evitar este problema en CSS BLOG publican una lista de 16 Fuentes Estándares que se visualizan igual, tanto en Windows, Mac y [...]

[...] See original here: 16 tipografías estándares para usar con CSS | CSSBlog ES [...]

07.25.09

La Century Gotic está en todos los ordenadores?

07.25.09

@aleKSandro está en todos los sistemas operativos.

Un saludo.

07.25.09

Pues es un pelotazo… porque es bastante parecida a la Futura, y ésta no está en todas partes…

07.25.09

@Pedro, la Century Gothic no está en todos los ordenadores ni en todos los sistemas operativos. Es una de las fuentes que se instalan con Office: http://support.microsoft.com/kb/837463/es
Puedes probarlo con un Windows en una máquina virtual.

07.25.09

[...] [...]

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
Comentaristas del mes
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores