$30 off During Our Annual Pro Sale. View Details »

Las Fuentes Tipográficas en la Web

MaxMendez
February 18, 2010

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.

MaxMendez

February 18, 2010
Tweet

More Decks by MaxMendez

Other Decks in Design

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