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
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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:
   

   View Slide

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.
   

   View Slide

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:
   

   View Slide

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 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.
   

   View Slide

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.
   

   View Slide

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
   

   View Slide