Lista de fuentes estándar para la web. Fuentes seguras
Esta lista contiene fuentes comunes a todos los sistemas operativos Windows actuales (de hecho, desde Windows 98) y sus equivalentes en Mac OS. Estas fuentes a veces se denominan "fuentes seguras para el navegador" ( fuentes seguras para el navegador). Este es un pequeño libro de referencia que utilizo cuando hago páginas web y creo que también te será útil.Si eres nuevo en el diseño web, es posible que estés pensando algo como: “¿Por qué debería limitarme a un conjunto tan pequeño de fuentes? ¡Tengo una colección enorme de fuentes hermosas! El hecho es que el navegador del visitante solo puede mostrar aquellas fuentes que están instaladas en su Sistema operativo ( aprox. traductor: Actualmente, ya es posible utilizar prácticamente cualquier fuente al diseñar páginas utilizando CSS 3 y su nueva propiedad. @fuente-cara; sin embargo, no todos los navegadores todavía soportan esta función), lo que significa que cada el visitante de su página debe ser el propietario de las fuentes que ha elegido. Por lo tanto, sólo debes utilizar fuentes que estén disponibles en cada sistema operativo. Por suerte, CSS tiene una propiedad @fuente-familia, lo que facilita esta tarea.
Lista
| @font-familia significado | ventanas | Impermeable | Familia |
|---|---|---|---|
| Arial, helvética, sans-serif | arial | Arial, Helvética | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial Negro | Arial Negro, Gadget | sans-serif |
| "Comic Sans MS", cursiva | Cómic Sans MS | Cómic Sans MS 5 | cursivo |
| "Courier New", Courier, monoespacio | Mensajero nuevo | Mensajero Nuevo, Mensajero 6 | monoespacio |
| Georgia, serifa | georgia 1 | Georgia | serifa |
| Impacto, Carbón, sans-serif | Impacto | Impacto 5, Carbón 6 | sans-serif |
| "Lucida Console", Mónaco, monoespacio | Consola Lúcida | Mónaco 5 | monoespacio |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lúcida sin Unicode | lucida grande | sans-serif |
| "Palatino Linotipo", "Libro Antiqua", Palatino, serif | Linotipo Palatino, Libro Antiqua 3 | palatina 6 | serifa |
| Tahoma, Ginebra, sans-serif | tahoma | Ginebra | sans-serif |
| "Times New Roman", Times, serifa | Times New Roman | Veces | serifa |
| "Trebuchet MS", helvética, sans-serif | Trabuquete MS 1 | helvética | sans-serif |
| Verdana, Ginebra, sans-serif | Verdana | Verdana, Ginebra | sans-serif |
| Símbolo | Símbolo 2 | Símbolo 2 | - |
| Cintas | Cintas 2 | Cintas 2 | - |
| Wingdings, "Zapf Dingbats" | Alas 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Ginebra, sans-serif | MS Sans Serif 4 | Ginebra | sans-serif |
| "MS Serif", "Nueva York", serif | MS Serif 4 | Nueva York 6 | serifa |
1 Las fuentes Georgia y Trebuchet MS se envían con Windows 2000/XP y están incluidas en el paquete de fuentes de IE (y de hecho vienen con muchas aplicaciones de Microsoft), por lo que se instalan en muchas computadoras con Windows 98.
2 Las fuentes de símbolos se muestran solo en Internet Explorer; en otros navegadores generalmente se reemplazan por una fuente estándar (aunque, por ejemplo, la fuente Symbol se muestra en Opera y Webdings en Safari).
3 La fuente Book Antiqua es casi idéntica a Palatino Linotype; Palatino Linotype viene con Windows 2000/XP y Book Antiqua viene con Windows 98.
4 Tenga en cuenta que estas fuentes no son TrueType, sino mapas de bits, por lo que pueden verse mal en algunos tamaños (están diseñadas para mostrarse a 8, 10, 12, 14, 18 y 24 pt a 96 DPI).
5 Estas fuentes solo funcionan en Safari en estilo estándar, pero no funcionan en negrita ni cursiva. Comic Sans MS también funciona en negrita, pero no en cursiva. Otros navegadores de Mac parecen poder emular bien las propiedades de fuente que faltan por sí solos (gracias a Christian Fecteau por el consejo).
6 Estas fuentes se instalan en Mac solo con instalación clásica
Capturas de pantalla
- Mac OS X 10.4.8, Firefox 2.0, ClearType habilitado (gracias a Juris Vecvanags por la captura de pantalla)
- Mac OS X 10.4.4, Firefox 1.5, ClearType habilitado
- Mac OS X 10.4.11, Safari 3.0.4, ClearType habilitado (gracias a Nolan Gladius por la captura de pantalla)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType habilitado (gracias a Eric Zavesky por la captura de pantalla)
- Windows Vista, Internet Explorer 7, ClearType habilitado
- Windows Vista, Firefox 2.0, ClearType habilitado (gracias a Michiel Bijl por la captura de pantalla)
Al comenzar a crear un diseño, debe especificar específicamente en el CSS las fuentes utilizadas en la página. A menudo, en diferentes fuentes, el diseñador escribe no solo el texto principal de la página, sino también varios títulos, logotipos y monogramas:
Un buen diseñador, al igual que un buen maquetador, sabe que el navegador sólo puede utilizar aquellas fuentes que están instaladas en la computadora del usuario para mostrar una página. Es decir, las fuentes se pueden dividir en dos categorías:
- Fuentes que se mostrarán sin problemas para la gran mayoría de usuarios.
- Fuentes que un grupo bastante numeroso de usuarios no tiene.
Si el diseñador utilizó fuentes de la segunda categoría para crear, por ejemplo, un logotipo o títulos estáticos grandes, no puede dudar en utilizar la técnica. La desventaja de utilizar esta técnica es la inflexibilidad. Si hay cambios en el texto, tendrás que rehacer la imagen y cambiar el CSS (por ejemplo, si las dimensiones de la nueva imagen no coinciden con las antiguas).
Podemos decir que el peligro de utilizar una técnica depende directamente de la probabilidad de cambiar el texto. Por lo tanto, no puede utilizar, por ejemplo, el texto general de una página en fuentes no estándar. Un diseñador competente nunca haría esto. Y si el diseñador se encuentra con una fuente verde, un buen maquetador simplemente está obligado a corregir su error: en el diseño, reemplace esta fuente por la estándar más similar.
Pero, ¿cómo se pueden distinguir las fuentes del primer grupo del segundo? ¡Está claro que no puedes confiar en un conjunto de fuentes instaladas directamente en tu computadora! Vamos a resolverlo.
Fuentes estándar
Las fuentes estándar son un conjunto de fuentes que se instalan con el sistema operativo. Dado que los sistemas operativos son diferentes, su conjunto de fuentes es diferente. Puede encontrar una lista de fuentes estándar para diferentes versiones de Windows, por ejemplo, en el artículo Fuentes estándar de Windows y una lista de fuentes estándar de Mac OS en la página Fuentes incluidas con Mac OS. En cuanto a los sistemas operativos Unix/Linux, no tienen un único conjunto de fuentes. Muchos usuarios de Linux utilizan el conjunto de fuentes DejaVu, especialmente en Ubuntu, están instalados de forma predeterminada. Según las estadísticas de http://www.codestyle.org, muchos usuarios de Unix/Linux también tienen instalados conjuntos de fuentes URW, Free y otros. Según las mismas estadísticas, más del 60% de los usuarios de Unix/Linux tienen en sus ordenadores fuentes del Core Fonts for Web, que hasta 2002 estaban oficialmente disponibles para su descarga gratuita en el sitio web de Microsoft.
Para que la página se muestre como la concibió el diseñador, en cualquier sistema operativo, es posible especificar varias fuentes en la propiedad CSS, separadas por comas.
Esta propiedad especifica una lista priorizada de nombres de familias de fuentes y/o nombres de familias genéricos. Según la especificación CSS2, existen dos tipos de nombres de familias de fuentes:
- El nombre de la familia de fuentes de su elección. Por ejemplo, "Times New Roman", "Arial" y otros. Los nombres de familias de fuentes que contienen espacios deben ir entre comillas. Si faltan comillas, se ignoran los caracteres de espacio antes y después del nombre de la fuente y cualquier secuencia de espacios dentro del nombre de la fuente se convierte en un solo espacio.
- Familia genérica (común). La especificación define las siguientes familias genéricas:
- serif: fuentes con serifas en los extremos;
- sans-serif - fuentes sans-serif;
- cursiva: fuentes en cursiva;
- fantasía - fuentes decorativas;
- monospace - fuente monospace (con letras del mismo ancho).
Así, para el diseño se toma una fuente estándar del sistema operativo Windows, se selecciona una similar para Mac OS y Unix/Linux, se especifica una familia de fuentes común y listo.
Pero no es tan simple. Profundicemos con más detalle.
Encontrar fuentes seguras para la web
En Internet, el concepto de fuentes web "seguras" se ha desarrollado históricamente. Una fuente segura es una fuente estándar para todos los sistemas operativos. Puesto que sólo se puede soñar con tal estado de cosas, entonces ¡No existen fuentes absolutamente seguras!
Algunas fuentes pueden considerarse seguras con algunas reservas.
La base para definir las fuentes "seguras" fueron las fuentes del sistema operativo Windows más común, que también se utilizan en otros sistemas operativos. Un ejemplo de este uso son las fuentes Core ya mencionadas para el paquete de fuentes web, que, según las estadísticas, han sido descargadas por muchos usuarios de Unix/Linux.
Este paquete incluye las siguientes fuentes: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Todos ellos admiten el alfabeto cirílico, que es importante para Runet.
El conjunto de fuentes que viene de serie con Mac OS X (este sistema operativo es el más utilizado entre los usuarios de Mac OS) incluye todas las fuentes del conjunto de fuentes principales para la Web.
Así, basándose en las fuentes de Windows utilizadas en otros sistemas operativos, se formó la siguiente lista de las llamadas fuentes web "seguras":
- arial
- Arial Negro
- Cómic Sans MS
- Mensajero nuevo
- Georgia
- Impacto
- Times New Roman
- Trabuquete MS
- Verdana
La fuente Webdings contiene iconos y no se puede utilizar para contenido. Andale Mono no se usa mucho porque no es adecuado para la lectura de pantalla diaria y no todos los usuarios de Windows lo tienen.
Todos los usuarios de Windows, Mac OS X y la gran mayoría de los usuarios de Unix/Linux (es decir, aquellos que han instalado las fuentes Core para el paquete Web) tienen todas estas fuentes.
Pero ¿qué pasa con el resto? Después de todo, ¡lo que quieres es que el mayor número posible de usuarios vean el plan del diseñador!
Lea sobre esto en la segunda parte de la publicación.
Esta lista contiene fuentes comunes a todos los sistemas operativos Windows actuales (de hecho, desde Windows 98) y sus equivalentes en Mac OS. Estas fuentes a veces se denominan "fuentes seguras para el navegador" ( fuentes seguras para el navegador). Este es un pequeño libro de referencia que utilizo cuando hago páginas web y creo que también te será útil.Si eres nuevo en el diseño web, es posible que estés pensando algo como: “¿Por qué debería limitarme a un conjunto tan pequeño de fuentes? ¡Tengo una colección enorme de fuentes hermosas! El hecho es que el navegador del visitante solo puede mostrar aquellas fuentes que están instaladas en su Sistema operativo ( aprox. traductor: Actualmente, ya es posible utilizar prácticamente cualquier fuente al diseñar páginas y su nueva propiedad. @fuente-cara; sin embargo, no todos los navegadores todavía soportan esta función), lo que significa que cada el visitante de su página debe ser el propietario de las fuentes que ha elegido. Por lo tanto, sólo debes utilizar fuentes que estén disponibles en cada sistema operativo. Por suerte, CSS tiene una propiedad @fuente-familia, lo que facilita esta tarea.
Lista
| @font-familia significado | ventanas | Impermeable | Familia |
|---|---|---|---|
| Arial, helvética, sans-serif | arial | Arial, Helvética | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial Negro | Arial Negro, Gadget | sans-serif |
| "Comic Sans MS", cursiva | Cómic Sans MS | Cómic Sans MS 5 | cursivo |
| "Courier New", Courier, monoespacio | Mensajero nuevo | Mensajero Nuevo, Mensajero 6 | monoespacio |
| Georgia, serifa | georgia 1 | Georgia | serifa |
| Impacto, Carbón, sans-serif | Impacto | Impacto 5, Carbón 6 | sans-serif |
| "Lucida Console", Mónaco, monoespacio | Consola Lúcida | Mónaco 5 | monoespacio |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lúcida sin Unicode | lucida grande | sans-serif |
| "Palatino Linotipo", "Libro Antiqua", Palatino, serif | Linotipo Palatino, Libro Antiqua 3 | palatina 6 | serifa |
| Tahoma, Ginebra, sans-serif | tahoma | Ginebra | sans-serif |
| "Times New Roman", Times, serifa | Times New Roman | Veces | serifa |
| "Trebuchet MS", helvética, sans-serif | Trabuquete MS 1 | helvética | sans-serif |
| Verdana, Ginebra, sans-serif | Verdana | Verdana, Ginebra | sans-serif |
| Símbolo | Símbolo 2 | Símbolo 2 | - |
| Cintas | Cintas 2 | Cintas 2 | - |
| Wingdings, "Zapf Dingbats" | Alas 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Ginebra, sans-serif | MS Sans Serif 4 | Ginebra | sans-serif |
| "MS Serif", "Nueva York", serif | MS Serif 4 | Nueva York 6 | serifa |
1 Las fuentes Georgia y Trebuchet MS se envían con Windows 2000/XP y están incluidas en el paquete de fuentes de IE (y de hecho vienen con muchas aplicaciones de Microsoft), por lo que se instalan en muchas computadoras con Windows 98.
2 Las fuentes de símbolos se muestran solo en Internet Explorer; en otros navegadores generalmente se reemplazan por una fuente estándar (aunque, por ejemplo, la fuente Symbol se muestra en Opera y Webdings en Safari).
3 La fuente Book Antiqua es casi idéntica a Palatino Linotype; Palatino Linotype viene con Windows 2000/XP y Book Antiqua viene con Windows 98.
4 Tenga en cuenta que estas fuentes no son TrueType, sino mapas de bits, por lo que pueden verse mal en algunos tamaños (están diseñadas para mostrarse a 8, 10, 12, 14, 18 y 24 pt a 96 DPI).
5 Estas fuentes solo funcionan en Safari en estilo estándar, pero no funcionan en negrita ni cursiva. Comic Sans MS también funciona en negrita, pero no en cursiva. Otros navegadores de Mac parecen poder emular bien las propiedades de fuente que faltan por sí solos (gracias a Christian Fecteau por el consejo).
6 Estas fuentes se instalan en Mac solo con instalación clásica
Capturas de pantalla
- Mac OS X 10.4.8, Firefox 2.0, ClearType habilitado (gracias a Juris Vecvanags por la captura de pantalla)
- Mac OS X 10.4.4, Firefox 1.5, ClearType habilitado
- Mac OS X 10.4.11, Safari 3.0.4, ClearType habilitado (gracias a Nolan Gladius por la captura de pantalla)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType habilitado (gracias a Eric Zavesky por la captura de pantalla)
- Windows Vista, Internet Explorer 7, ClearType habilitado
- Windows Vista, Firefox 2.0, ClearType habilitado (gracias a Michiel Bijl por la captura de pantalla)
