Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrán el mismo aspecto (oel más parecido posible) sea cual sea la pareja SO-navegador de cada usuario. Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lógico diseñar nuestras páginas web buscando la mayor compatibilidad tipográfica entre ambos sistemas. buscando  un listado similar de “fuentes” instaladas por defecto en los sistemas operativos más populares, pero luego de buscar y buscar no pude dar con la mayoría de las versiones y posibilidades. Pero por suerte desde Font Tester pudieron realizar este trabajo de manera fantástica. Ahora muchos se preguntaran para que sirve conocer las tipografías instaladas por defecto, la respuesta es sencilla: Para utilizar en nuestros sitios asegurándonos que en todos los sistemas operativos se puedan visualizar sin complicaciones y sin utilizar ningún sustituto

.

Listado de tipografías seguras para el uso web:

font-family: Arial, Helvetica, sans-serif; font-family: ‘Arial Black’, Gadget, sans-serif; font-family: ‘Bookman Old Style’, serif; font-family: ‘Comic Sans MS’, cursive; font-family: Courier, monospace; font-family: ‘Courier New’, Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: ‘Lucida Console’, Monaco, monospace; font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; font-family: ‘MS Sans Serif’, Geneva, sans-serif; font-family: ‘MS Serif’, ‘New York’, sans-serif; font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: ‘Times New Roman’, Times, serif; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, ‘Zapf Dingbats’, sans-serif; Así que ya sabes, si quieres que las tipografías de tu sitio web sean visualizadas de forma correcta en la mayoría de los sistemas operativos verifica que aparezca en este listado.

Tipografia y Diseño Grafico Para Web

Inspírate con los profesionales. Fijate como se usan y combinan los tipos e imítalo con descaro para tus trabajos. Por ejemplo, según el blog especializado Smashing Magazine estos son algunos de los tipos de letra preferidos por los diseñadores gráficos.

• Helvetica, Helvetica Neue
• Univers
• Lucida Grande, Lucida Bright
• FF DIN
• Arial, Verdana
• Georgia
• Gotham
• Avenir
• Century Gothic

Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son: Tamaño de las fuentes Un Mac trabaja por defecto a una resolución de 72 ppp (pixels por pulgada), por lo que en él existe una equivalencia exacta entre punto y píxel, cosa que no ocurre en un PC con Windows, cuya resolución de trabajo por defecto es de 96 ppp. Mac: 12 pt ———- 12 px PC: 12 pt ———– 16 px La siguiente imagen muestra la equivalencia entre puntos y píxeles, así como la visualización de los diferentes tamaños en fuente Verdana.

Nótese como se forma automática al llegar y/o superar los 13 puntos o los 17 píxeles , las fuentes se muestran en bold

Como se puede apreciar en la imagen, los tamaños inferiores a 9 píxeles (7 puntos) no se visualizan correctamente, ya que las letras se hacen demasiado pequeñas a esos tamaños. Por el contrario, a tamaños superiores a 16 píxeles (12 puntos), las letras comienzan a escalarse, produciéndose un efecto de dientes de sierra en sus contornos, sobre todo en las zonas inclinadas y curvas de las mismas. Por estos motivos, el tamaño de los contenidos textuales para la web debe oscilar entre 9 y 15 píxeles (7 y 11 puntos), ya que con estos valores los caracteres resultan legibles y sin escalado. Si necesitamos incluir textos de mayor o menos tamaño en una página, la alternativa pasa por hacerlo como fichero gráfico, en formato GIF o PNG, teniendo en cuenta entonces la imposibilidad de modificar dichos textos “en el aire», por lo que no es viable este sistema para contenidos que deban cambiar con el idioma, por ejemplo (habría que crear versiones de la imagen para cada opción posible). Una consideración adicional referente a los tamaños de las fuentes, válida tanto para puntos como para píxeles, es que conforme se aumenta la resolución de pantalla disminuye el tamaño relativo de las fuentes, es decir, su tamaño de visualización final. Esto obliga a tener especial cuidado al usar textos de pequeño tamaño a resolución 800×600, ya que para los usuarios que visualicen la página web a 1024×768 o superior pueden resultar ilegibles. Caso de ser necesario incluir textos en estas condiciones, una buena solución es crear dos ficheros de estilos CSS, uno para cada resolución, asignando un fichero u otro a la página mediante JavaScript según la resolución empleada por cada usuario.

Ventajas e inconvenientes de usar medidas en píxeles

La especificación de tamaños de fuente en píxeles ofrece la ventaja de permitirnos controlar en todo momento la visualización final de los contenidos textuales, ya que nos asegura la máxima compatibilidad entre sistemas operativos y la inmutabilidad del tamaño de los textos frente a posibles configuraciones personalizadas de los navegadores web (Ver > Tamaño de la fuente > Grande, por ejemplo). Sin embargo, con su uso pueden producirse problemas de accesibilidad, ya que impide la personalización por parte de los usuarios con problemas de visión de mayores tamaños para las fuentes. Como norma general, y si las especificaciones del proyecto no nos marcan condiciones específicas sobre accesibilidad, usaremos siempre como unidad de medida en trabajos web el píxel.

Fuentes a usar en las páginas web

A la hora de seleccionar las fuentes que vamos a usar en una página, deberemos tener en cuenta que existe algunas especialmente diseñadas para su visualización en la pantalla de un monitor, por lo que suelen resultar las más apropiadas para la web. Estas fuentes suelen ser sans serif, destacando entre ellas Verdana, Arial y Helvetica, pudiendo especificarse también el tipo genérico sans-serif, con lo que el navegador usará la fuente sans serif que por defecto tenga instalada la máquina del usuario. En caso de facilitar a los usuarios de la web documentos o páginas para impresión, es conveniente sustituir las fuentes anteriores por alguna tipo serif (con remates en sus extremos), ya que son más legibles en documentos impresos y menos monótonas. Entre ellas podemos destacar Times New Roman, Courier y Courier New, pudiendo especificarse también el tipo genérico serif, con lo que el navegador usará la fuente serif que por defecto tenga instalada la máquina del usuario. Es posible asignar a una página web mediante CSS dos conjuntos de fuentes diferentes, uno para su visualización en pantalla y otro para su impresión. Basta con declarar los dos bloques de estilos separadamente, especificando en el atributo media de la etiqueta style el tipo de medio en el que será válido cada uno. Ejemplo: 

<style type=»text/css» madia=»screen»>

.contenidos{

font-size:12px;

font-family:Verdana,Helvetica,sans-serif;

}

</style>

<style type=»text/css» madia=»print»>

.contenidos{

font-size:10px;

font-family:Times New Roman,Times,serif;

}

</style>

 

¿Texto o Imágenes?

Al usar fuentes no comunes para un sitio web, o se ponen en imagen o se usan fuentes estándar, y se pone en HTML. La desventaja es que todo el texto que este en una imagen no será rastreable por un buscador, es decir que no será SEO friendly

 

Conclusiones A la hora de trabajar con textos en nuestras páginas web deberemos siempre especificar el tamaño de las fuentes y las familias mediante estilos CSS. Los tamaños se especificarán normalmente en píxeles, considerando valores válidos aquellos comprendidos entre 9 y 16 píxeles. Si debemos usar el tamaño 8 píxeles en resolución 800×600, se deberá comprobar su correcta visualización en resolución 1024×768, implementando un fichero de estilos para cada resolución caso de ser necesario. En ningún caso se usarán tamaños inferiores a 8 píxeles. Si debemos usar tamaños superiores a 16 píxeles, es conveniente sustituir el texto afectado por una imagen en la que figure el mismo, evitándose con ello el escalado. Las fuentes a usar serán aquellas que tengan un equivalente en PC y Mac, declarando ambas en estilos CSS. Se elegirán preferentemente las fuentes Verdana, Helvetica y Arial para la presentación de textos en pantalla, añadiendo además la fuente genérica sans-serif, en aras de la correcta visualización en todos los casos. Si ofrecemos páginas alternativas para la impresión, se usarán en ellas preferentemente las fuentes Times New Roman y Times, añadiendo la fuente genérica serif.