Tipografías web

Irene 13 Nov 2007 | 16 comentarios

Este es un tema al que siempre vuelvo porque como todo en Internet cambia. Y es que se sorprenderían al saber que hay diseñadores que no saben todavía que no se puede usar cualquier tipografía en la web y que, además, al especificar tipografías se deben listar más de una, porque nunca tenemos la certeza de que el usuario tenga la que nosotros elegimos.
Diseñar para la web implica saber y aceptar que todo cambia de equipo a equipo, de usuario a usuario y además, con el tiempo.

Para saber qué tipografías utilizar, hay que buscar listados de tipografías web (web-safe fonts). Este listado tiene relación con el software que se utiliza en cada época, porque son las tipografías que traen los programas más usados los que determinan qué familias se utilizan. Por eso, porque los programas, las versiones y los sistemas operativos van cambiando, es que esta lista va cambiando con el tiempo.

Microsoft en 1996 tuvo la iniciativa de crear un paquete estándar de tipografías web, para tener un grupo que permaneciera a pesar de todos estos cambios. Pero por algún motivo, razón o circunstancia en 2002 lo discontinuó. Todavía pueden conseguirse en diferentes lugares, como por ejemplo en Internet Archive.

Liberation fonts

Más allá de iniciativas poco masivas como la Liberation fonts, que comparte bajo licencia GNU GPL tres tipografías diseñadas para ser métricamente compatibles con Arial, Times New Roman y Courier New, ahora tenemos un nuevo SO que trae nuevas tipografías instaladas además de las que ya conocemos (Trebuchet MS, Georgia, Verdana, Comic Sans, Arial, Times New Roman, etc.).
Windows Vista y Office 2007 traen la Clear Type Font Collection, que consta de 6 familias: Calibri, Cambria, Candara, Consolas, Constantia, Corbel.

Clear Type Fonts

Si bien todavía es el XP el que reina en las estadísticas, ya se ve un creciente avance del Vista respecto a los períodos anteriores, asi que poco a poco podemos agregar estas nuevas tipografías como variación de las que ya conocemos.

Pueden bajarse estas tipografías junto con el Power Point viewer 2007. No sé si hay otra manera, pero después de instalarlo, encontré los .ttf en la carpeta Program Files/MSECache/PPTViewer en un archivo para descomprimir (ppviewer.cab).

[Vía webspaceworks.com]

En este PDF pueden verse las nuevas familias dialogando con las que usamos ahora.

[Vía Isopixel]

Tabla de tipografías disponibles según Sistema Operativo

Genérico Font Windows
9x/2K/XP
Windows
Vista
Mac
Classic
Mac
OS X
Linux
Unix
serif Cambria   *      
Constantia   *      
Times New Roman * * (*) * (*)
Times     * * *
Georgia * * (*) * (*)
sans-serif Andale Mono * * (*) * (*)
Arial * * (*) * (*)
Arial Black * * (*) * (*)
Calibri   *      
Candara   *      
Corbel   *      
Helvética     * * *
Impact * * (*) * (*)
Trebuchet MS * * (*) * (*)
Verdana * * (*) * (*)
cursiva Comic Sans MS * * (*) * (*)
monoespaciado Consolas   *      
Courier New * * (*) * (*)
Courier     * * *

* Tipografías comunes
(*) MS Core fonts, menos comunes

[Vía Browser News]

Enlaces

Liberation fonts
Core fonts for the Web en Internet Archive
Otra fuente con las tipografías para Mac (no verificada)
Microsoft Yanks Core Fonts [Inglés]
Web safe fonts (noviembre 2006)
Commons Fonts [Inglés]

16 comentarios

  • FrancoG says:

    Muy útil este post para pasarselo a los clientes que vienen a pedir tipografías raras en los sitios basados en HTML… gracias! 😛

  • Vuarnet says:

    Excelente anotación. Muy completa y súper informada, complementa la mía que después de leerte hasta me da pena… 🙂

    Saludos y gracias.

  • Irene says:

    Muchas gracias 🙂

  • minombresbond says:

    hay un paquete para gnu/linux llamado msttcorefonts, que reune las fuentes q se distribuian con el explorer (en una epoca se podian bajar las .ttf por separado desde la pagina de microsoft, ahora no)

    incluye:

    Andale Mono
    Arial Black
    Arial (Bold, Italic, Bold Italic)
    Comic Sans MS (Bold)
    Courier New (Bold, Italic, Bold Italic)
    Georgia (Bold, Italic, Bold Italic)
    Impact
    Times New Roman (Bold, Italic, Bold Italic)
    Trebuchet (Bold, Italic, Bold Italic)
    Verdana (Bold, Italic, Bold Italic)
    Webdings

    se puede bajar desde:

    http://corefonts.sourceforge.net/
    (como paquete rpm para redhat)

    pero no hace falta tomarse ese trabajo porque hace tiempo esta disponible en los repositorios de la mayoria de las distros, y empaquetado para otros sistemas operativos UNIX tambien (como BSD)

    por ejemplo en distros tipo debian, si no vino instalada de base, solo hay que hacer en la consola:

    apt-get install msttcorefonts

    o usar el front-end para instalar paquetes del que disponga su escritorio

    creo que solo la fuente tahoma por un tema de licencias, no admite su redistribucion, y la debes instalar por tu cuenta

    sobre las fuentes incluidas en vista, no se si los terminos de la licencia permiten su redistribucion en repositorios, pero basta con extraer los archivos .ttf del Visor de PowerPoint 2007 que se puede bajar desde la pagina de microsoft, aca explican como hacerlo:

    http://linux.bolsanegra.com/2007/04/instalar-las-tipografias-de-windows-vista-en-ubuntu.html

    es probable que este proceso tambien se pueda realizar en mac os x

    tener estas fuentes (las de msttcorefonts) en cualquier distribucion es algo corriente, depende la politica de licencias de la distro si decide incluirlas en el sistema base que se instala de entrada, o las tenes que agregar luego, pero hace años que estan disponibles en los repositorios, en fin, no se por que no estan en el cuadro 😛

    saludos!

  • Irene says:

    minombresbond: gracias por la corrección, voy a ver si leo un poco más sobre el tema, seguramente tenés razón.
    Espero animarme pronto a instalarme un linux (más allá del celular, que no vale realmente :)) y verificarlo con mi experiencia.

  • minombresbond says:

    acabo de darme cuenta que el guioncito del cuadro no es un ‘no-tiene’, sino ‘menos-comunes’, yo pense que era un ‘no-tiene’ por eso que le di rienda suelta a la verbo-linux-rragia, pero que barbaridad! si yo tengo linux y esas fuentes las tuve siempre!

    linux te guiña un ojo cuando se entera que estas trabajando con wordpress! y si corre sobre LAMP te dice: soy tuyo!
    …pero como vas a tener a abandonar a todas tus amistades… dreamweaver, photoshop, fireworks.. en fin, es como irte a vivir al campo 😛

    saludos!

  • Irene says:

    ah! por eso!!!
    cierto que se podía entender mal.
    ya está, lo cambié por (*) así es más claro, me parece.
    el DW y el PS no los uso…. si encuentro un reemplazo para el FW más o menos decente ¡me paso!

    ¡gracias!

  • Irene says:

    y otra cosa, no incluí Webdings porque leí acá que IE las muestra pero los demás browsers no. Lo verifiqué viendo esta página en IE y en Firefox y es verdad.

  • minombresbond says:

    ya que el tema es fuentes para la web te paso este link re-groso, es un cuadro con todas las fuentes standart de la web en diferentes cuerpos y variantes!

    http://jontangerine.com/silo/typography/web-fonts/

    otro tema pertinente es el renderizado de las fuentes: el anti-aliasing y el hinting, que en la web lo notamos mucho por el escalon en el grosor de una fuente al incrementar levemente el cuerpo cuando se cruza el umbral de comienzo de aplicacion del antialiasing

    vista viene con el sistema cleartype por defecto que es muy bueno y mejor que el que traia XP, mac os x usa el de apple llamado ATSUI

    las cuestiones de patentes sobrevuelan todas estas tecnologias, sobre todo la cuestion del ‘hinting’, sin embargo existe un desarrollo de alta calidad llamado freetype, que es el motor de renderizado de fuentes que viene con las distros de linux y es libre

    los problemas de patentes hacen que algunas funcionalidades de freetype vengan desactivadas por defecto y deba activarlas el usuario, se relaciona con los datos sobre hinting en una fuente, que al parecer pueden venir protegidos por patentes para ser interpretados solo por una tecnologia autorizada para usar esa patente, logicamente propietaria, es decir un usuario lector de un texto digital debe, ademas de contar con las licencias de las fuentes que esta usando para leer, tambien licenciar el software para no violar las patentes el hinting (si no quiere quedarse ciego!)

    muchas de las licencias de las fuentes por defecto que trae windows o mac, mas las patentes por las tecnologias de renderizacion, han sido pagadas junto con el SO

    esto nos lleva al absurdo de que en el unico medio donde un usuario deba complicarse con cuestiones de licencias tipograficas, con el solo fin de poder leer un texto, sea en internet, ya que al leer un libro, un diario o leer los subtitulos en la tv o cine, el usuario no necesita contar con las licencias de esas fuentes para poder usarlas, simplemente las usa y lee sin necesitar estar pidiendo permiso (y pagando) por las fuentes

    pero volviendo al tema del antialiasing, aca un enlace muy interesante con un comparativo de los sistemas de mac y ms

    http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts

    saludos!

  • Tonatiuh says:

    Muy bueno el artículo, y tienes muchoa razon respecto a lo que comentas sobre que muy pocos se preguntan acerca de la importancia de la tipografia, dejemos un poco de lado lo estético, sino a lo que te refieres sobre la funcionalidad, ya que hay que tener en cuenta cuando surgió y porque una cierta familia, el momento histórico y tecnológico, la necesidad social y cultural y si todo esto va conforme a nuestro proyecto, y no solo con las tipografias electrónicas sino con la impresa, hay todo un mundo detras de cada fuste y cada serif y es cuestion de cada uno de nosotros como diseñadores el conocer el pasado de la tipografia que queramos utilizar y educar a nuestros clientes que detras del “es que se ve bien bonita” debe de haber una fundamentación. Gracias por hacernos ver estos aspectos que por lo general pasan desapercibidos para la gran mayoria de nosotros. Saludos.

  • minombresbond says:

    siguiendo con el tema de fuentes para ver en pantalla: tipografias y celulares

    escondido en el kit de desarollo para Android, (el sistema operativo basado en linux para celulares promovido por google), viene una familia llamada Droid (son 3 variantes: serif, sans y mono), una fuente muy completa que incluye soporte para alfabetos latinos extendidos, y tambien baltico, cirilico, griego, turco, provista por Ascender Corporation, especialista en diseño de fuentes para pantalla, aunque todavia no esta clara la licencia que trae esta fuente
    desde este blog se puede descargar

    y hablando de celulares, la lista de fuentes de mac os x incluidas en el i-phone

    un bonus, la Relato Sans, de nuestro colega argentino Eduardo Manso, para descargar sin costo en la seccion free-fonts del sitio de fontshop

    otro bonus: el proximo sabado 15 de diciembre Alejandro Lo Celso hablando sobre el lunfardo y rocambole como diseñar una tipografia para rufianes y malandras, en la Gutenberg auspiciado por la udgba (esto sera un chivo?)

  • Daniel says:

    Desde hace más de 50 años, y casi desde su aparición, Helvetica se ha convertido en una de las tipografías más utilizadas y de mayor éxito en todo el mundo. ¿Qué la ubica en esta posición? ¿Por qué aún sigue tan vigente?

    Sin duda, la neutralidad de sus trazos es uno de los motivos principales. Se puede utilizar Helvetica exitosamente en casi cualquier diseño, porque su significación no va a depender mayoritariamente del estilo tipográfico, sino del contexto en que sea utilizada. Helvetica es una tipografía imparcial, neutral, incluso le falta algo de carácter. Pero esta transparencia y simplicidad, es justamente su esencia. Helvetica es clara y sencilla, lo que explica ciertamente su éxito en todas partes.

    Pero hay una gran cantidad de tipografías similares a Helvetica, también claras y neutrales. ¿Qué más se oculta detrás de este éxito?

    http://www.espacioeme.com.ar/Debate.aspx?arId=1

  • Akane Miyano says:

    Sugoi!!! Formateé la pc y no sabía de donde había salido la Candara XD y la estaba usando para un trabajo, me salvaste ;_;

  • Federico says:

    Muchísimas gracias IRENE! Me salvaste porque me pasaron un archivo con una de esas Fuentes y no lo podía modificar! Gracias a vos pude terminar el trabajo! PLASSES PLASSES para VOS! SMUACH!

  • Irene says:

    Me alegro haberles dado una mano 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *