Tipografia (5)

Tipografía en la web

Incrustación de tipografías dentro de código HTML

El momento de elegir una tipografía para internet debemos ser consientes, que existen algunas limitaciones, dependiendo para que y en qué medio se va ha usar, pero sin embargo hay una gran cantidad de tipografías que son compatibles entre los dos sistemas operativos más populares como MAC OS y Windows (Ej. Windows font packs). o mencionar mediante CSS, fuentes alternativas.

Pero también existen algunos trucos para incrustar fuentes desde nuestro hosting, y que la información tipográfica, no reciba desde las fuentes instaladas dentro del sistema operativo del usuario, sino del sitio donde esta alojado nuestro portal web, de ésta forma siendo seguro la visualización del texto en la pantalla, para lo cual es necesario introducir código JavaScript y CSS en nuestro documento HTML.

O de otra forma aún más segura, es utilizar Google Font, que en este caso la información tipográfica cogería del sitio web de google. Para lo cual debemos ir a Google Font, escoger la fuente tipográfica que deseamos, este nos dará un código y lo copiamos en nuestro editor HTML. Por ejemplo si deseamos cambiar el estilo texto de la etiqueta body y escogemos la tipografía Lobster el código sería el siguiente.

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<style type="text/css">

body {

   font-family: 'Lobster', serif;

   font-style: italic;

   font-size: 24px;

}

</style>

Como vemos el código se divide en dos partes, uno para la dirección del sitio web donde extraemos la tipografía y la otra, para los atributos de fuente, pero si queremos deseamos más de una fuente externa a los navegadores se debe separar los nombres de las fuentes por el carácter "|" en la ruta, por ejemplo si deseamos utilizar las fuentes Lobster y Cantarell, tendríamos.

http://fonts.googleapis.com/css?family=Lobster|Cantarell

En el caso de utilizar ayuda de Google o incrustar fuentes dentro de nuestro sitio web, debemos estar seguros de que su licencia es de uso libre o sino crear nuestra propias tipografías y evitarnos algún problema legal.

Si no deseamos utilizar familias tipográficas que dependan de terceros, en nuestros sitios web y hacer lo mas fácil y lógico (siempre y cuando el  sitio amerite el caso), es utilizar fuentes estándares, es decir las que ya vienen por defecto en los sistemas operativos.

Otro punto importante es nombrar varios tipos de familias tipográficas para un mismo estilo de texto, separado por comas, ya que; si por un acaso esa fuente falta, enseguida saltara a la siguiente fuente tipográfica, de esta forma no dañara el diseño Ej.

h1 {

    font-family: Helvetica, Geneva, Arial,

          SunSans-Regular, sans-serif }

Debido a que no es lo mismo leer en pantalla que leer en papel, es necesario mediante estilos CSS, escribir que tipografía, es para lectura y con que tipografía debería salir en la impresión, por si al usuario se le ocurre llevar una copia impresa, a continuacion el codigo CSS, para esta operación.

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

Diferencias entre fuentes Mac OS y Windows

Se debería tomar en cuenta de cuando diseñamos un sitio, este posiblemente va ha ser visto en todo el mundo, por lo tanto en un sinnúmero de sistemas operativos. Entre los más comunes tenemos: a Windows, Linux y Mac OS.

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. (En un futuro muy cercano ya no se aplicará esto, devido a la llegada de las pantallas con Retina Display)

Mac: 12 pt ---------- 12 px

PC: 12 pt ----------- 16 px

Como consecuencia, el tamaño de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac verán las fuentes más pequeñas que los de PC.

Para lo cual si sabemos que la diferencia en el diseño es notoria, con el cambio de tamaño en la tipografía, es recomendable no usar puntos ni pixeles como unidad de medida, sino más bien en porcentajes; con esto nos evitamos cualquier inconveniente el momento que el usuario visualice en la Web.