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.

Tipografía (4)

Softwares de creación de fuentes

Cuando nos desenvolvemos en el mundo del diseño, llegamos a un punto donde decimos quién y cómo se crea una familia tipográfica o cual es el Software más apropiado para crear dichas fuentes; y un sinnúmero de preguntas que nos hacemos en torno al diseño tipográfico. En el siguiente artículo voy a mencionar los principales programas para crear familias tipográficas de manera simple e intuitiva.

Illustrator y Fontlab

Ésta es la forma más común y fácil de crear una familia tipográfica, ya que todo diseñador estamos familiarizados con Adobe Illustrator como herramienta de dibujo vectorial, y por lo tanto se nos va ha hacer simple la creación una familia tipográfica, pero únicamente sus gráficos. Una vez que ya tengamos cada uno de los caracteres dibujado en Illustrator, con simple ctrl+c y ctrl+v, pegamos uno a uno cada carácter en Fontlab y por último exportamos la fuente como .ttf u .otf, dependiendo con que fin lo vayamos a utilizar.

FontLab Studio, tiene un cómodo precio de 600 dólares, o si solo necesitamos de manera didáctico u por curiosidad podemos utilizar la versión beta online, que nos brinda las mismas características.

FontStruct

Es una muy importante herramientas de creación tipográfica en línea y de manera gratuita, utiliza una interfaz gráfica bastante amigable. Ésta también trabaja mediante pinceles, mediante la cual podemos ir personalizando una familia tipográfica y por consiguiente exportar en el formato que más nos convenga.

Fontifier

Una aplicación muy curiosa que nos permite crear una familia tipográfica, a partir de la tipografía que realizamos a mano alzada, con tan solo 7 pasos que nos detallan en su sitio web  FontiFier. Y con un módico costo de 10 dólares.

También una muy buena alternativa, para la creación de fuentes Corel Draw, ya que solo debemos crear el diseño de la fuente y una a una ir exportando como formato .otf y listo ya tenemos nuestra nueva tipografía.

Tipografía (3)

Tipografía Digital

La tipografía digital es la esencia del diseño gráfico, puesto que todo nuestro trabajo lo realizamos mediante una computador y de acuerdo a la utilización de la tipografía dependerá nuestro diseño final.

No podemos hablar  de tipografía digital sin mencionar a Apple Computers , la cual se preocupo de darle forma a las letras  en la computadora ya que ha mediados de los 80 solo se utilizaba la tipografía monoespaciada en las computadoras. Y en ese entonces la nombrada empresa fue la primera en  dar, nuevas formas  de visualizar en texto en la pantalla.

Truetype .TTF

Es un tipo de formato tipográfico que Apple desarrolló para poder competir y posteriormente derrocar al formato Type 1 de Adobe, fue creado a finales de los 80s, para principios de los 90s, Apple vendió parte de los derechos de este a Microsoft de esta forma hasta hoy en día son totalmente compatibles en los dos sistemas operativos. Vale recalcar que las fuentes en Mac OS, no son totalmente iguales que las de Windows, existen pequeñas variaciones ya sea en tamaño o forma pero en realidad estas pasan desapercibidas ante la vista humana.

Opentype .OTF

Debido a sus prestaciones (como la compatibilidad entre sistemas operativos y la compatibilidad lingüística),  este formato de fuentes está en proceso de convertirse en el estándar de su categoría, dicha tipografía fue desarrollada por Microsoft en colaboración con Adobe, Los cuales dieron a conocer en 1996 como sucesor del formato Truetype.

Existen muchos formatos tipográficos, pero hemos nombrado los más importantes y utilizados hoy en dia. Pero estos formatos no son determinantes ya que existen aplicaciones en internet que fácilmente nos pueden cambiar el formato de las fuentes, como es el caso de FreeFontConverter, que nos permite cambiar a cualquier formato, entre ellos pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin y suit. Con tan solo subir la fuente a la aplicación online y escoger el formato tipográfico. Este nos devolverá la fuente en nuestra nueva extensión, lista para instalarse en cualquier sistema operativo.

Donde descargar Fuentes

Existen muchos sitios en internet donde podemos descargar fuentes de manera gratuita una de las más importantes es google con su sitio GoogleWebFonts, en donde podemos encontrar cerca de 600 familias tipográficas, separadas en cuatro grupos conocidos; Serif, San Serif, Display y Handwriting. Este sitio como su nombre lo indica son tipografías para la web pero, también podemos crear una colección de fuentes y descargarlas para poderlos utilizar en nuestros diseños offline.

Otro sitio bastantes interesante donde podemos descargar fuentes es DaFont, pero algunas tenemos que pagar una licencia si queremos utilizar de manera comercial. Este sitio tiene una clasificación más extensa, detallada y de fácil descarga.

Otro sitio web recomendable similar al anterior es UrbanFonts

Siempre que descargamos alguna tipografía debemos ser conscientes, que detrás hay un arduo trabajo por parte de sus creadores, por semanas incluso meses y por lo tanto tienen un costo como cualquier diseño. Por lo tanto siempre debemos fijarnos en las licencias hay algunas; de uso libre, otras unicamente de uso académico, y otras tienen su respectivo costo para usarlas de manera libre. Trabajamos con ética, es decir no regalemos nuestro trabajo pero tampoco robemos el trabajo de otros, en tal caso utilicemos tipografías de licencia libre.

Otro sítio donde podemos descargarnos muy buenas fuentes es FontSquirel, pero debemos revisar su licencia para uso comercial.

Tipografía (2)

Clasificación de la Tipografía

Existen un sinnúmero de fuentes pero en este artículo nombraremos las más importantes y las más utilizadas. Tenemos entendido que fuente se denomina a un conjunto de letras que comparten características generales como por ej. la conocida tipografía Times, y familia tipográficas conocemos a un conjunto de letras basadas en las fuentes en este caso sería la times, pero bold, normal o cursiva.

Hay muchas maneras de clasificar las fuentes tipográficas, pero como decíamos antes aquí mencionaremos las principales, ya que algunas pueden entrar dentro de otra clasificación más general, como es el caso de la tipografía Grunge que se lo puede clasificar dentro de una tipografía decorativa.

Serif

Son aquellas que sus extremos presentan unos remates, conocidas en nuestro medio como serifas, estas tipografías facilitan la lectura pero en papel (por tal motivo es utilizado en todos los libros que tienen gran cantidad de páginas, ya que las serifas ayudan a mantener la concentración y el ritmo de lectura), en caso de pantalla dificulta la lectura debido a las serifas y a la resolución de una pantalla, que hasta el momento no logra superar a la del papel.

En cuanto a la Psicología de la tipografía, esta nos transmite tranquilidad, autoridad, dignidad y firmeza, es decir se debería utilizar para diseños formales y aquellos que queramos dar la sensación de antigüedad.

Entre las más recomendables para usar están: Georgia, times, times New Roman, Minion, entre otras, claro que debemos tener en cuenta el tipo de trabajo ha realizar de ahí en la web existen miles de fuentes de uso libre. Se ha recomendado las anteriores ya que son las más fáciles de conseguir y vienen con todos sus caracteres ideal para cualquier tipo de textos, pero existen otras visualmente mejores pero luego nos dan problemas como de espacios o que no funcionan las tildes entre otros. Yo utilizo por lo casi siempre Times New Roman o Plantín.

Sans Serif

Hablamos de tipografías Sans Serif, cuando estas no tienen remates, también conocidas como palo seco; estas son más rectas y no tienen remates en sus terminales. (Dificulta la lectura en textos largos)

Estas nos causa un  efecto de modernidad, sobriedad, alegría y seguridad, es recomendable para textos cortos como anuncios publicitarios, pero también para todo tipo de información en pantalla, claro siempre teniendo en cuenta que el diseño es relativo y todo depende del producto o servicio.

Decorativas

Estas fuentes son las que más llaman la atención de todas, pero de igual manera cansan la vista muy rápido, por tal motivo únicamente se utilizan de títulos, para decorar anuncios publicitarios y logotipos.

Estos nos expresan; un lugar, espacio y tiempo aparte de darnos la información de que se trata el diseño con solo utilizar una tipografía decorativa adecuada.

Inglesas o Manuscritas

Estas son parecidas a las itálicas, pero más pronunciadas no se la recomienda para textos largos, mas bien para resaltar una frase, títulos, pies de fotos, de páginas.

Entre las más utilizadas tenemos: Scriptina, Before the Rain,  Jellyka Nerevan, entre otros. Dificulta la lectura pero se utiliza para adornar diseños, estas dan un perfecto contraste con cualquier otro tipo de fuentes. también no pueden denotar exclusividad y elegancia.

La mayoría de tipógrafos hace una sub-clasificación mucho más extensa, como incluyendo tipografías góticas dentro de esta clasificación, o las brush; las que parecen hechas con una brocha, pero nosotros debido a la importancia y diferencia grande en su forma realizaremos otra clasificación para la tipografía gótica. En este espacio sólo hemos mencionado como su nombre lo indica a tipográficas inglesas.

Gótica

Es un tipo de fuente que apareció en el siglo XII hasta el XV en Europa, pero en realidad es utilizada hasta nuestros días en especial para textos ocultos de hechizos y magia,  como antecesor tenemos a la tipografía carolingia, que fue utilizada por Johannes Gutenberg cuando imprimió la biblia de 42 líneas y a partir de ahí muy popular en todo el mundo. Cuya característica principal son sus curvas pronunciadas al final y repetidas en todo el carácter.

Esta nos expresa ocultismo, misterio y antigüedad, ideal para temas que no son comprobados científicamente y como las más recomendables tenemos: Ithornët, Ruritania, Northwood High entre otras.

Dingbats

Estas  no traen tipografías sino, al presionar una tecla nos creara una imagen,  son colecciones de imágenes con un tema en común, generalmente se utiliza para iconos de diseños.

Tipografía (1)

Historia y Evolución de los Tipos

Las primeras manifestaciones de comunicación escrita se dio, en la antigua Mesopotamia alrededor del 3200 Ac (Ciudad donde se realizó los mayores inventos de la historia que se mantienen hasta hoy en día), también más tarde los egipcios crearon los jeroglíficos como una forma de comunicación, para futuras generaciones.

 Luego según la historia se dio lugar a la escritura cuneiforme  en eso de 2800 a.c. que no eran más que tablillas  escritas con unas puntas sobre arcilla y en algunas ocasiones sobre metal, los mismos que eran tallados por los denominados escribas. Dichos escritos contenían textos: religiosos políticos y legales.

 Los egipcios también aportaron  para que la tipografía evolucione, ya que por el año 1500 a.c. tenían 3 alfabetos (jeroglífico, hierático y demótico). basado en 24 símbolos

 Continuando con la historia del texto llegamos a lo que es el Imperio Romano, que fue el que influyó de manera decisiva en los países de occidente, el motivo principal fue que conquistaron la mayor parte de Europa, influenciando en esos países, como también la perfección en el diseño del alfabeto el cual fue acogido rápidamente por oriente. Esta escritura se caracterizó por: el uso de serifas, la perfección en el trazo y  adoptó tres estilos fundamentales: Quadrata (mayúsculas cuadradas romanas, originalmente cinceladas en piedra), Rústica (versiones menos formales y más rápidas en su ejecución) y Cursiva (modalidades de inclinación de las mayúsculas).

Todos estos escritos fueron realizados a mano y en pergaminos o piedras, pero esto cambió a partir de 110 d.c.  gracias a la invención del papel por parte de China, la cual permitía tener textos más largos que en los antes nombrados pergaminos, como también permitía  una fácil; manipulación, movilidad y almacenamiento de escritos. Durante 500 años perteneció, únicamente a China luego pasó a Japón, Korea y de poco a poco acogido por el resto del mundo.

 La tipografía gótica fue muy popular entre 1150 d.c.  y 1500 d.c. en Europa occidental, aunque fue prohibida durante un tiempo, se sigue utilizando hasta la actualidad, pero en poca medida ya que por sus forma dificulta la lectura, se utiliza más como elemento decorativo.

Sin lugar a duda una de las etapas más importantes en la tipografía y para un Diseñador Gráfico es la invención de la imprenta, que sucedió en 1448 por el Alemán Johannes Gutenberg, que al mismo tiempo imprimió la biblia de 42 líneas en una tipografía Gótica.

 En el último siglo la evolución de la informática ha hecho posible que todos lo tipos se manejan mediante una computadora, haciendo más fácil nuestra vida. primero fue la empresa de California denominada ADOBE, que creó los primeros tipos (type1) basados en el lenguaje PostScript, evitado la pérdida de calidad del texto al imprimir, Luego Steve Jobs basado en unas pocas clases de tipografía que asistió en la universidad, años más tarde a cargo de Apple decide darles un poco más de forma y diseño por consiguiente creó la tipografía (Truetype), la cual gracias a un convenio con Microsoft, ahora son compatibles con los dos sistemas operativos. y por último Microsoft crea OpenType en un convenio con ADOBE en 1991, la cual esta en Proceso de convertirse en un estándar abierto.