Conjeturas sobre el uso de fuentes
En esta entrada analizaré aspectos sobre el uso de las fuentes tanto a nivel local como en la web. Por otro lado, os mostraré que con algunos trucos podemos ahorrar hasta el 20% de tinta siendo una medida bastante interesante para nuestros bolsillos además de ser respetuosa con el medio ambiente.
Para muchos usuarios, el empleo de las fuentes suele ser un tema bastante desconocido. Simplemente las usamos desde programas ofimáticos como Word, cuando creamos documentos y seleccionamos la fuente que necesitamos. Es necesario conocer que muchas de las aplicaciones que instalamos nos agregan tipos de letra a nuestro ordenador sin darnos cuenta de ello.
Cuantas más fuentes dispongamos, más recursos emplearemos, y la carga de las aplicaciones y el sistema se verán afectados de forma negativa.
Los tipos de letra en Mac pueden ser de varios formatos. Al igual que Windows, posee fuentes TrueType (lógico pues fueron desarrolladas inicialmente por Apple), postscript y openType.
Las fuentes que emplea Windows pueden ser reconocidas por mac.
Postscript Tipo 1: Cada fuente se encuentra compuesta por dos ficheros. El primero es una fuente de tipo bitmap o de pantalla. Es un archivo conocido como “maleta de tipos” y contiene información global sobre la familia (icono FFIL). El segundo archivo es LWFN que pueden ser 1 ó varios. Tienen que estar en la misma carpeta. Suelen ser fuentes representadas con el icono A.
Truetype: Desarrollado por Apple inicialmente, y luego licenciado a Microsoft. Es un formato vectorial, donde toda la información de la fuente se almacena en un solo archivo. Este formato es multiplataforma y pueden contener dos tipos de curvas para describir sus glifos. En Windows se describen con el icono “O”
OpenType: Proyecto de fuentes entre Microsoft y Adobe. Formato OT, que es realmente una ampliación del TrueType. Existen dos variantes el PS (Curvas tipo 1 o postscript) con extensión oft y el TT (las curvas son truetype) con extensión ttf.
Linux soporta fuentes TTF, que se almacenan generalmente en usr/share/fonts dentro puede existir una carpeta truetype. Muchas fuentes de Windows no están presentes en Linux como pueden ser la times new roman o la Comic sans. No obstante las podemos pasar de un sistema hacia otro porque son compatibles.
Para no tener que instalar todas las fuentes para poder verlas y utilizarlas, antes de ello, podemos hacer doble clic sobre la fuente para ver su estilo. Existen aplicaciones para gestionar fuentes e instalar y desinstalar al vuelo y bajo demanda tipos de letras. Hace tiempo se empleaba Adobe Type Manager (ATM), pero desde el 2005 está fuera de soporte.
Gestores de fuentes locales y alguno en la nube:
Extensis Font Manager:
http://www.extensis.com/font-management/?id=1055
LinoType:
http://www.linotype.com/es/6876/gestindefuentes.html
FontAgent Pro(win/mac):
http://www.insidersoftware.com/FA_win.php
MainType 5.1:
http://www.high-logic.com/font-manager/maintype.html
Typograf font manager:
http://www.high-logic.com/font-manager/maintype.html
OT1 Font Manager:
http://www.ot1fontmanager.com/en/
FontExpert 2014:
http://www.proximasoftware.com/fontexpert
AMP Font Viewer:
http://www.ampsoft.net/utilities/FontViewer.php
Printer´s Apprentice:
http://www.ampsoft.net/utilities/FontViewer.php
Apolisoft Font Fitting Room:
http://www.apolisoft.com/ffr/index.php
X-Fonter de Backsun:
http://www.blacksunsoftware.com/xfonter.html
En la nube, Extensis Font manager Cloud:
http://www.extensis.com/suitcase-fusion/whats-new/
¿Cómo ahorrar tinta en la empresa a través del empleo de fuentes? ¿Eres ecológico?
Hace tiempo, el comparador printer.com, hizo un experimento y determinó que eligiendo bien los tipos de letra podríamos ahorrar costes y tinta. Esto se confirmó mediante el estudio realizado por la Universidad de Wisconsis-Green, llegando a la conclusión además que la fuente Century Gothic era la que menos tinta consumía. Ésta universidad empleo y aconsejó el uso para la impresión de documentos, siendo la fuente empleada por defecto en sus trabajos, proyectos de estudiantes, emails,etc. El centro paso de gastar 100.000$ en tinta cada año a 90.000$, suponiendo un ahorro de 10.000$. Además de la mejora medioambiental que ello supone.
Os aseguro que a pesar de lo que se piensa, la fuente Century Gothic se lee bastante bien.
Existe en Internet una fuente de uso gratuito (no el software),creada por una empresa alemana de diseño. Su nombre es Ecofont.
La fuente original ecofont fue una modificación de la Bitstream Vera Sans. Pero a diferencia de esta, posee agujeros en todas sus letras. Investigadores de printer.com llegaron a la conclusión que la fuente ecofont ahorra de forma similar a la fuente Century Gothic anteriormente mencionada.
Sin embargo, los diseñadores alemanes tuvieron la idea de crear un software que permite insertar los agujeros en cualquier documento que desees imprimir y usando la fuente que tu quieras. De tal forma que tipos de letra estrechos, emplean menos papel y además del ahorro en tinta, podemos economizar con el papel, que también es importante. Por supuesto todas las impresiones con este software son con puntitos huecos. No obstante, recuerda que la mejor forma de economizar es evitar imprimir si es necesario, al estar en una era digital, llena de dispositivos móviles, teléfonos, tablets, se pueden visualizar los documentos sin necesidad de imprimir.
Con la incorporación de fuentes ideales para ser mostradas en pantalla, la visualización y lectura de textos digitales cada vez es más sencilla y fácil.
Os dejo el enlace a la página ecofont, “el tipo de letra verde con agujeritos”
Y el enlace directo a la descarga de la fuente Ecofont Vera Sans Regular. Necesitaremos estar dados de alta.
http://www.ecofont.com/en/products/green/font/download-the-ink-saving-font.html
Esta fuente puede ser usada en aplicaciones ERP empresariales como SAP o CRMs. Funciona con cualquier programa de diseño y es compatible con PC y Mac.
Recuerda proponerlo en tu empresa, o usarla de forma particular. Seamos respetuosos con el Medioambiente.
Pero, ¿Cómo puedo crear mis propios tipos de letra?
Existen varias alternativas. Mediante software local o a través de plantillas que crean de forma automática el tipo de letra.
Mediante software local, destaco este producto de High-Logic llamado FontCreator, en su versión 7.5.
Otras alternativas:
- FontForge, http://fontforge.sourceforge.net/
- gbdfed Bitmap Font Editor(http://sofia.nmsu.edu/~mleisher/Software/gbdfed) para linux
- Font Constructor para mac gratuita, http://www.fontconstructor.com/
Poseen también un software local que mediante unas plantillas podemos escanear cada letra y automáticamente generará fuentes sin necesidad de poseer los conocimientos para desarrollarlas. Podemos por lo tanto crear fuentes con nuestro propio tipo de letra en unos pocos minutos.
Este tipo de generación de fuentes mediante nuestras plantillas también se encuentra disponible en Internet;
ejemplos www.fontstruct.com, paintfont.com, yourfonts.com, www.myscriptfont.com
Fuentes en la web. Términos y recursos.
Hasta ahora el empleo de fuentes web en nuestros proyectos de Internet ha sido siempre una tarea con muy poca flexibilidad a la hora del tipo y número de fuentes a usar. Problemas con navegadores, sistemas, etc, nos hacían siempre seleccionar un tipo determinado de fuente web. Pero como veremos más adelante, hoy en día es posible dar una nueva dimensión al diseño de nuestros sitios.
Antiguas técnicas sustituían textos por imágenes que emulaban su forma, para lograr el diseño requerido, pero considero que es mucho mejor crear fuentes siempre en vez de imágenes, por motivos de accesibilidad, usabilidad, diseño y SEO.
El CSS3 permite incorporar nuevas fuentes de forma dinámica en la web, todas las propiedades se describen en esta web. Algunos son ya estándar otros son borradores. Lo ideal es que los módulos se encuentren en verde.
http://www.w3.org/TR/css3-fonts
Las fuentes son glyphs que comparten un diseño común. Las propiedades del CSS permiten definir características de texto como la fuente, el tamaño, grosor, anchura, color, etc.
Las propiedades generales, existen más, para las fuentes CSS son:
Font-size, line-height, color, Font-weight, Font-style, Font-variant, text-transform, text-align, letter-spacing, Word-spacing.
El Font-family, especifica una lista de familias de fuentes genéticas.
El problema es que el usuario tenga instalada las fuentes, es por ello que se va buscando recursivamente la fuente a aplicar. Las fuentes genéricas suelen ser serif (serifas o adornos), sans-serif (palo seco), cursive, verdana, arial.
Ejemplo de aplicación recursiva de una fuente web:
P {Font-family: Grupo de fuentes separadas por comas y comillas a utilizar …;}
No todos los navegadores pueden interpretar las mismas propiedades para las fuentes con exactitud. Si empleamos las fuentes en px tendremos problemas con la accesibilidad, es recomendable emplear em (no es la única), para cambios del tamaño.
1em corresponde al tamaño de la fuente que tenga el navegador por defecto, El Firefox son 16px, 2em sería el doble, 32px. Pero claro esto depende del navegador. Safari son 18px.
Las fuentes ahora pueden ser descargadas, ofreciendo muchas alternativas al diseño. Pero es necesario saber que cuando se descargan, no se instalan, no se pueden reutilizar, y solo son aptas para el visionado en pantalla. Gracias a la cache, no necesitaremos descargar las fuentes una y otra vez.
Gracias a Font-face podremos realizar la descarga de fuentes, pero depende de la versión del navegador. Actualmente es soportado por la mayoría.
Existen diversos formatos de fuentes web.
EOT: Desarrollado por Microsoft, basado en True Type o TTF, pero sólo es soportado por explorer.
WOFF: Web Open Font Format, creado por Mozilla. Tiene su propia especificación dentro de la
web: http://www.w3.org/TR/WOFF
SVG: Fuente vectorial escalable o Scalable vector graphics, basado en XML, poco tamaño para la descarga, muy popular en dispositivos móviles. Existe una variante comprimida SVGz.
TTF/OTF
Y la @font-face.
Cada navegador y tecnología es soportado de diversa forma por los navegadores.
El 93% de los navegadores actuales soportan @font-face., TTF/OTF: el 85%, EOT: 24%, WOFF: 80%
Podemos ver los soportes en caniuse.com
Cuando las usemos, podremos tener las fuentes en nuestra web, o extenarlizarlo en otro sitio. Si estuviera en nuestro servidor, tendremos más control.
Los servicios de fuentes externos, ofrecen ventajas de disponibilidad, velocidad y espacio ocupado. Muchos de ellos son gratuitos otros de pago.
Fonts.com -> Servicio de pago. Ellos ofrecen las web Fonts y las suscripciones para usar sus fuentes. La más barata es 10$, en este plan da acceso a todas las fuentes web, pero solo a 10 fuentes Mockup de uso rápido. Mejor ver las diferentes modalidades. Posee un software para descargar fuentes para local. Y posee elementos e información para aprender sobre el uso y diseño de fuentes.
Google Fonts-> www.google.com/fonts
Son fuentes opensource, de libre uso. Se pueden consultar todas las fuentes, serif, sanf-serif, display, etc. Ofrece filtros para buscar la que deseemos y necesitemos. Posee una herramienta para colocar el código en la web para emplear la fuente. Permite saber el peso, carga o impacto en nuestra web. Es recomendable no emplear más de 3 fuentes diferentes. El código generado lo pegaremos dentro de la etiqueta head, recomendable debajo de los archivos css.
Me ha resultado muy interesante, puesto que posee muchas herramientas de personalización del uso de la fuente. Repito al ser un servicio de fuente externo no la necesitamos descargar, por lo que la disponibilidad está asegurada.
Podemos descargar la fuente también, en formato zip, dentro suelen tener extensión ttf.
Font-squirrel:
Servicio opensource. Posee un generador de fuentes o conversor. Podremos ver todas las fuentes por nombre, categoría, etc. Podemos descargar la fuente. Pero también podemos dar diferentes usos a las fuentes. Mediante los iconos que nos muestra sabremos su uso.
Si es para desktop, si admite Font-face, si puedo usarlo para ebooks o pdfs, o uso de aplicaciones. Los archivos descargados suelen tener extensión otf. Es interesante la opción de poder convertir fuentes en diversos formatos. Cuando nos bajemos los archivos de las fuentes, podremos ver tutoriales para usar las fuentes en nuestra web. En el archivo .css descargado podremos ver un ejemplo de como usarlo.
Adobe Edge Web Fonts.
Es un servicio opensource, de fácil uso. Ofrecen unas 600 fuentes. Posee buscadores y tutoriales para su inserción.
Adobe Type Kit.
Es un servicio de pago, de adobe. De uso sencillo. Posee trial, y el plan básico suele ser de 25$.
Esto es todo…
