Las Fuentes Tipográficas en la Web

Uno de los elementos indispensables en el diseño de un sitio web son las fuentes tipográficas, esto debido a que la mayor parte de estas está compuesta por textos y con el correcto uso y selección de las mismas se puede mejorar la experiencia del usuario como también la armonía de sitio como un todo.
En general existen un número muy grande de fuentes y cada vez son más, esto debido a que estas pueden ser libremente creadas. En este escrito se analizara el uso de estas, como también se detallara lo que se conoce como fuentes seguras, además se introducirá a soluciones de programación de hojas de estilo para asegurar la correcta visualización del sitio web.

Transcript

1. Índice Introducción........................................................................................................2 Uso de Fuentes Personalizadas ..........................................................................3 Fuentes Seguras..................................................................................................5 Aseguramiento del estilo en CSS........................................................................5 Conclusión ..........................................................................................................6 Bibliografía .........................................................................................................7
2. Introducción Uno de los elementos indispensables en el diseño de un sitio web son las fuentes tipográficas, esto debido a que la mayor parte de estas está compuesta por textos y con el correcto uso y selección de las mismas se puede mejorar la experiencia del usuario como también la armonía de sitio como un todo. En general existen un número muy grande de fuentes y cada vez son más, esto debido a que estas pueden ser libremente creadas. En este escrito se analizara el uso de estas, como también se detallara lo que se conoce como fuentes seguras, además se introducirá a soluciones de programación de hojas de estilo para asegurar la correcta visualización del sitio web.
3. Uso de Fuentes Personalizadas La creación de una fuente tipográfica para un computador es una tarea relativamente sencilla si se tienen conocimientos básicos de un programa de creación de imágenes vectoriales como CorelDRAW1, debido a esto y a que pueden ser libremente instaladas en el sistema operativo estas permiten diseños impresos con fuentes hechas a la medida pero en el caso de una web su uso no es para anda conveniente, ya que la pagina indica al browser con qué fuente debe visualizar el contenido y si esta no está instalada en la maquina del cliente, el browser utilizara una fuente por defecto lo cual afecta la visualización correcta del diseño original, en donde se corre el riesgo de arruinar completamente la legibilidad, armonía y experiencia del visitante. Un ejemplo de esto es la siguiente pagina, la cual cuenta con un fondo negro, letra roja y una fuente llamada Algerian disponible en mi sistema operativo en el cual se ve de la siguiente manera: Las fuentes pueden no estar disponibles en los diferentes sistemas operativos y aun más si esta ha sido creada por nosotros mismos ya que somos los únicos que la poseemos, para seguir ejemplificando esto a continuación se puede ver la visualización de la página en el browser Konqueror 3.5, bajo una distribución de Linux Debian. 1 Primer programa de diseño gráfico para Windows, el cual es programado por Corel Corporation desde 1989.
4. Seguidamente la visualización en Ubuntu Linux: Visualización en Mac OS, en el browser Safari: Visualización en FreeBSD, en el browser Firefox:
5. Cómo fue posible observar la visualización varía notablemente con el diseño original y tan solo por una mala selección de la fuente, es por esto que debe de seleccionarse una fuente que sea común entre los diferentes sistemas operativos.
6. Fuentes Seguras Debido a los problemas de variación en la visualización de los textos según el ordenador como son originalmente diseñados en los sitios web, es que nace el concepto de fuentes seguras, siendo estas las fuentes que pueden utilizarse garantizando que la visualización no variara según el computador, porque estas se encuentran presentes por defecto en los diferentes sistemas operativos. Las fuentes seguras se encuentran divididas en diferentes niveles de seguridad, esto debido a que algunas son más o menos frecuentes en los sistemas operativos por lo cual se debe poner gran importancia a la selección de la misma y su grado de seguridad cuando se está diseñando un sitio web. Algunas de las fuentes consideradas como seguras son las siguientes:
7. Aseguramiento del estilo en CSS En la actualidad el próximo estándar para el HTML creado por la W3C2 es llamado HTML 5, en el cual se establecen cambios radicales a las formas de programar y dar estilo a las páginas web en general debido a que se eliminaron atributos de una gran parte de etiquetas, como también etiquetas de estilo, obligando a la utilización de viejas y nuevas instrucciones CSS que llegan a sustituir sus funciones. Entre estas instrucciones se encuentra la propiedad font la cual sustituye la etiqueta <font> y todos los atributos que daban estilo a la tipografía de la página, esta puede ser utilizada para dictar el tamaño de letra, la fuente o familia, permitiendo establecer un orden de jerarquía de uso de estas últimas. El ejemplo más simple del uso de esta propiedad es la siguiente: font: 1em "Times New Roman", Times, serif; Con esta línea de código CSS se le indica un tamaño relativo de tamaño a la letra y también se establece como primera opción de fuente Times New Roman, si está no se encuentra disponible se indica utilizar Times y por último si las dos anteriores no pueden utilizarse que use Serif. Utilizando en esta instrucción tipos de letra similares se logra preservar lo más que se pueda el diseño original del sitio web sin dejar a libre elección el tipo de letra por parte del navegador si la fuente no está disponible. 2 Consorcio World Wide Web, organización la cual dicta los estándares de la Word wide web, teniendo como objetivo guiar la web a su máximo potencial.
8. Conclusión Se concluye este trabajo resaltando la importancia que implica la selección de las fuentes para cada uno de los diseños de sitios web, en donde debe tomarse muy en cuenta la disponibilidad de las mismas entre los diferentes sistemas operativos, como también que debe de tenerse prevención al indicar la fuente al navegador mediante CSS, logrando esto al indicar fuentes alternativas en caso de que la principal no se encuentre disponible para el visitante, con esto preservando el diseño lo más intacto y armonioso posible.
9. Bibliografía Brewer Dustin. (2007). Fonts on the web and a list of web safe fonts. Disponible en: http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ CSS Font. Disponible en: http://www.w3schools.com/css/css_font.asp List of Web Safe Fonts. Disponible en: http://www.fonttester.com/help/list_of_web_safe_fonts.html