Tipografías web
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.

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.

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



















Muy útil este post para pasarselo a los clientes que vienen a pedir tipografías raras en los sitios basados en HTML… gracias!
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.
Muchas gracias
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 msttcorefontso 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!
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.
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!
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!
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.
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!
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.
Tipos para la web
En el blog Buenos Aires de Diseño se ha realizado un interesante informe sobre tipografias para la web, riguroso y didactico!
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?)
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
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 ;_;
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!
Me alegro haberles dado una mano