Share
¿Harto de Arial? ¿Cansado de Times New Roman? Los métodos de reemplazo de fuentes han mejorado dramáticamente en los últimos 2 años, pero a menudo puede ser difícil distinguir los diferentes métodos si no estás leyendo constantemente sobre ellos. Este artículo discutirá varias técnicas de reemplazo de fuentes que están disponibles ahora mismo.
Tutorial republicadoCada pocas semanas, revisamos algunas de las publicaciones favoritas de nuestros lectores de toda la historia del sitio. Este tutorial fue publicado por primera vez en noviembre de 2010..
Revisaremos las ventajas y desventajas de cada uno, el problema de las licencias de fuentes y los mejores recursos de fuentes en la web para que pueda comenzar a usarlas en sus propios diseños web..
"Desde el comienzo de la web, los diseñadores han estado restringidos a un número limitado de fuentes"
Las posibilidades de diseño en la web parecen ir en aumento día a día. La aplicación de tecnologías como HTML5, CSS3 y Javascript ha dado lugar a muchos diseños de sitios web interesantes e innovadores. La web parece haber recorrido un largo camino desde los días del navegador de solo texto. A pesar de esto, hay un aspecto del diseño web que se ha mantenido relativamente estancado..
La tipografía y la selección de fuentes son elementos integrales del arsenal de cualquier diseñador para crear el aspecto y la "sensación" de un sitio web. Desafortunadamente, desde el comienzo de la web, los diseñadores se han restringido a un número limitado de fuentes. Helvetica, Arial y Georgia son tres de las pocas fuentes atractivas (sin olvidar Comic Sans) en las que los diseñadores pueden confiar para que se muestren correctamente para la mayoría de los usuarios de la web..
El método tradicional para que los diseñadores eviten tales limitaciones y exprese su creatividad con las fuentes es incorporar texto dentro de las imágenes; sin embargo, existen numerosas desventajas en este método. Surgen varios problemas de accesibilidad y el rendimiento del sitio web también se ve afectado negativamente con el aumento de los tiempos de carga.
Este artículo discutirá varios métodos diferentes e interesantes para incorporar fuentes no estándar en sus páginas web sin usar imágenes. Analizaremos las ventajas y desventajas de cada método, los problemas relacionados con el uso de fuentes y lo que realmente significa esta tecnología para los diseñadores web..
Cuf? N es un método increíblemente simple y efectivo para incorporar fuentes no estándar en una página web y en el que su funcionalidad no depende de los lenguajes o complementos del lado del servidor. Cuf? N opera únicamente en unas pocas líneas de código Javascript y utiliza una combinación de VML (Vector Mark-up Language), para Internet Explorer, y la función de lienzo de HTML5 para representar las fuentes..
Cuf? N proporciona una herramienta de conversión de fuentes en su página de inicio que le permitirá convertir su fuente elegida a SVG y crea un archivo Javascript para que pueda hacer referencia dentro de su HTML. El editor de Nettuts +, Jeffrey Way, ha escrito previamente un excelente tutorial paso a paso sobre cómo integrar Cuf? N en su página web.
Cufín es una opción popular para muchos diseñadores web debido a sus muchos beneficios y relativamente pocos aspectos negativos. Su no dependencia de otros lenguajes de script o complementos significa que es accesible para una audiencia muy amplia y también es compatible con versiones recientes de todos los principales navegadores, incluido IE 9. También puede aplicar directamente el estilo CSS a Cuf? N reemplazado texto, incluidas las nuevas características de CSS 3, como los gradientes. En términos de velocidad, es mucho más rápido que sIFR y menos intensivo, pero aún no debe usarse para grandes cuerpos de texto.
Hay algunos aspectos negativos para Cuf? N sin embargo. Todavía depende de Javascript para funcionar, lo que algunos usuarios de la web pueden haber apagado. Decepcionantemente, el texto reemplazado por Cuf? N tampoco se puede seleccionar y, por lo tanto, copiar y pegar.
Pros:
Contras:
"@ font-face es esencialmente la solución definitiva para las fuentes en la web".
Es probable que @ font-face haya recibido la mayor atención de cualquiera de los métodos de reemplazo de fuentes, pero hay una muy buena razón para ello. @ font-face es esencialmente la solución definitiva para las fuentes en la web y una en la que todos los demás esperaban replicar antes de que se realizara por completo. @ font-face se incluyó en realidad en la especificación CSS2, pero hasta ahora se ha adoptado en general..
@ font-face no utiliza ninguna tecnología web que no sea CSS para implementar fuentes personalizadas en una página web, lo que significa que ya no depende de Flash, PHP o incluso de Javascript. El tipo real se representa cuando se usa @ font-face, en lugar de objetos vectoriales o imágenes, y por lo tanto el texto se puede seleccionar, escalar y estilizar usando CSS.
Desafortunadamente, como es el caso con muchos otros problemas relacionados con la web, son principalmente los navegadores (junto con los problemas de licencia que discutiremos más adelante) los que han obstaculizado el progreso de @ font-face. Cada uno de los navegadores dominantes admite diferentes formatos de fuente. Internet Explorer usa .EOT (Tipo abierto incorporado), mientras que las versiones recientes de Firefox, Chrome, Safari y Opera son compatibles con .ttf (Formato de tipo verdadero). El formato de tipo abierto también es compatible con una combinación de navegadores y se necesita SVG (gráficos vectoriales escalables) para iPhone y iPad. Puede ser muy confuso y, a veces, puede hacer que muchas personas no intenten usarlo. Afortunadamente, sin embargo, hay luz en el horizonte. El Formato de fuente abierta en la Web, o .WOFF, está configurado para convertirse en el formato estándar para las fuentes web y actualmente está siendo estandarizado por el W3C. Firefox ha admitido el formato desde la versión 3.6, Chrome desde 5.0 y recientemente se anunció que Internet Explorer 9 también es compatible con el formato. Esperemos que Opera y Safari se unan a la fiesta pronto..
El único otro problema menor con @ font-face es que debido a que se presenta como un tipo real, los navegadores individuales y los sistemas operativos lo mostrarán de forma ligeramente diferente. Algunos servicios de fuentes web, que analizaremos más adelante, apuntan a corregir estas variaciones leves mediante el uso de sugerencias de fuentes que suavizan el contorno del tipo en los navegadores creando un tipo más estético..
Si desea obtener más información sobre cómo implementar @ font-face en su sitio web, Jeffrey Way ha proporcionado una vez más un útil tutorial sobre cómo hacerlo..
Pros:
Contras:
El siguiente puñado de soluciones se basa en @ font-face para entregar los bienes, cada uno de ellos es más o menos un "servicio", es decir, todos usan la misma tecnología básica, pero ofrecen diferentes bibliotecas de fuentes, opciones de licencias y planes de pago; Sí, la mayoría de estos requieren que pagues para usarlos, pero es probable que este sea el camino del futuro para todas las fuentes en la web..
Font Squirrel es quizás el recurso de reemplazo de fuentes más popular en este momento. Font Squirrel le alivia cualquier preocupación que pueda tener sobre las licencias de fuentes, ya que todas las fuentes proporcionadas están disponibles gratuitamente para fines comerciales. El sitio tiene cientos de fuentes para elegir, desde sans-serif hasta fuentes novedosas..
Como se mencionó anteriormente, para garantizar que @ font-face funcione en todos los navegadores, necesitará varios formatos diferentes de la fuente y para esto, Font Squirrel tiene una solución. El sitio ofrece kits de fuente de fuente que le brindan todos los formatos que necesita y también incluye el HTML y CSS necesarios. Si no puede encontrar el kit @ font-face para la fuente que desea usar, también le proporcionarán un generador que convertirá su archivo de fuente en los múltiples formatos que necesitará de forma gratuita. Cuando use el generador, debe asegurarse de tener la licencia correcta que le permita usar la fuente en su sitio web.
Pros:
Contras:
La API de fuentes de Google se usa junto con su propio directorio de fuentes en el que todas las fuentes son de código abierto y están disponibles para que todas las usen. El directorio se está expandiendo y creciendo todo el tiempo, actualmente alberga más de 200 ejemplos..
Realmente no podría ser más fácil incorporar fuentes del directorio en su sitio web. Simplemente debe seleccionar la fuente que desea utilizar, seleccionar las variantes de la fuente que necesita y Google le proporcionará la línea de código Javascript que necesita. Ajusta tu CSS para enumerar la fuente utilizada y estás listo para comenzar. Es realmente así de simple!
Pros:
Contras:
Typekit fue uno de los primeros servicios de fuentes web de suscripción y sigue siendo muy popular. Typekit y otros servicios similares abordan el problema de las licencias de fuentes al dar a los usuarios acceso a una amplia gama de fuentes personalizadas a cambio de una tarifa de suscripción anual. Este método permite a las fundiciones de fuentes recibir algo a cambio de su arduo trabajo y también garantiza la piratería de las fuentes, ya que todas las fuentes se alojan de forma centralizada en los servidores protegidos de Typekit. Los usuarios del servicio no alojan las fuentes en su propio espacio web, sino que simplemente se enlazan con ellas.
Typekit se ha asociado con algunas de las fundiciones de fuentes más grandes del mundo para ofrecer una amplia y variada gama de fuentes para su uso. Typekit le ofrece muchas opciones y control sobre las fuentes que utiliza. Seleccione varias variantes de fuente, pesos y glifos para usar. También puede crear pilas CSS y seleccionar fuentes de respaldo para usar cuando no se admite @ font-face. También deberá seleccionar las etiquetas HTML específicas o las clases de CSS para aplicar la fuente personalizada. Una vez que esté satisfecho con las selecciones que ha realizado, se generará un fragmento de código Javascript para que lo use en su sitio..
Otro beneficio de Typekit es que apunta a controlar las variaciones en la forma en que los diferentes navegadores manejan el texto y las fuentes usando sugerencias.
Typekit ofrece varios paquetes de precios para satisfacer diferentes necesidades. Hay disponible un paquete gratuito que le proporciona dos fuentes para usar desde su Biblioteca de prueba en un sitio web. Se permite el sitio web hasta 25,000 páginas vistas al mes y también debe mostrar el distintivo Typekit en el sitio, que enlaza con la información sobre las fuentes que está utilizando. En el otro extremo de la escala se encuentra el paquete Performance, que le brinda acceso a la gama completa de fuentes disponibles para usar en una cantidad ilimitada de sitios web sin límite en la cantidad de páginas vistas. El rendimiento proporciona todas estas características por una tarifa de suscripción anual de 99,99 €.
Pros:
Contras:
El popular recurso de fuentes fonts.com también ha lanzado un servicio de fuentes web especializado, que cuenta con más de 8000 fuentes para que las use en sus sitios web. De manera similar a Typekit, es un servicio basado en suscripción, excepto que su precio es mensual. En comparación con Typekit, resulta más caro pero hay muchas menos restricciones en las fuentes. El paquete gratuito se compara muy favorablemente, brindando acceso ilimitado a 8000 fuentes para que lo use en tantos sitios web como desee. El paquete Professional también le permite descargar hasta 50 fuentes e instalarlas en su computadora para usar en sus diseños.
Fonts.com Web Fonts cuenta con algunos tipos de letra realmente geniales como parte de su colección, como Helvetica, Univers y Franklin Gothic..
Pros:
Contras:
La renombrada compañía de diseño web Clear Left, que ha trabajado para algunas de las empresas más grandes del mundo, se asoció con OmniTI y lanzó Font Deck. Font Deck es otro servicio basado en suscripción, excepto que solo pagas una tarifa anual por cada fuente individual que uses, perfecto para aquellos que solo quieren usar una o dos fuentes para su blog personal.
Los precios de las fuentes comienzan en $ 2.50 por año por dominio y se permiten vistas de página ilimitadas. La selección completa de fuentes también está disponible para probarla gratuitamente durante un período de tiempo, aunque solo 20 direcciones IP únicas podrán verla. Este paquete gratuito tiene como objetivo compensar el hecho de que no puede descargar fuentes a su máquina local y usarlas durante la etapa de diseño. Como Font Deck solo es relativamente nuevo en la escena, actualmente la selección de fuentes para elegir no es muy grande.
Pros:
Contras:
Font Spring adopta un enfoque ligeramente diferente al de los servicios basados en suscripción y vuelve a la forma tradicional de comprar fuentes. Las fuentes se compran individualmente y requieren que las descargue y aloje las fuentes en su propio servidor web. Font Spring sugiere que el 99.9% de las fuentes disponibles se pueden usar con @ font-face.
Cada fuente individual puede variar en precio y debe pagar un cargo adicional por la licencia para usar la fuente con @ font-face. La licencia @ font-face incluye la versión OpenType de escritorio de la fuente y los diversos formatos que necesitará para usarla en la web.
Hay muchos beneficios al usar este método. Si realmente tiene el corazón en una sola fuente en particular, puede ser la alternativa más económica a los servicios de suscripción. Puede usar la fuente en tantos dominios como desee, siempre que tenga control directo sobre ellos y no haya límite en la cantidad de visitas a la página..
Como advertencia adicional, tiene prohibido convertir o incrustar la fuente con otras tecnologías como sIFR o Cuf? N.
Pros:
Contras:
Estos son solo algunos de los servicios de fuentes disponibles, hay muchos más, como Typotheque y Webtype. Cada uno tiene sus propios aspectos positivos y negativos y su elección debe basarse en sus propias necesidades personales. Algunos pueden disfrutar de la facilidad de uso de un servicio de suscripción, mientras que a otros no les gusta la idea de ceder el control de su sitio a un tercero. Si este es el caso, es mejor que descargues y alojes tus propias fuentes web con la ayuda de sitios web como Font Squirrel.
Los dos siguientes (sIFR y FLIR) generalmente se consideran "de la vieja escuela" porque tienen su parte justa de problemas, pero vale la pena discutirlos y conocerlos..
sIFR ha estado alrededor por algún tiempo ahora. Cuando salió por primera vez, proporcionó un método eficaz para incorporar fuentes no estándar cuando realmente no había otra opción que las imágenes. sIFR o el reemplazo de Inman Flash escalable utiliza una combinación de Flash y Javascript para modificar el texto de las páginas web en un elemento Flash. sIFR tiene muchas ventajas, ya que el texto permanece accesible para los lectores de pantalla y aún se puede seleccionar..
El término 'escalable' en el nombre, sin embargo, tiene el potencial de causar confusión. sIFR es escalable en el sentido de que el elemento Flash se adapta al tamaño del texto original del navegador: esto le permite mostrar todo el texto en el tamaño más grande posible dentro de cualquier dimensión dada. Sin embargo, cualquier texto que se haya reemplazado con un elemento flash no se puede ajustar cuando un usuario cambia el tamaño del texto en una página; Lo que obviamente causa un problema de accesibilidad. sIFR también requiere que tanto Flash como Javascript estén habilitados en la computadora de un usuario para poder funcionar.
Uno de los creadores de sIFR, Mike Davidson también reconoce las limitaciones de la tecnología.. Mike ha declarado abiertamente que sIFR no debe utilizarse para grandes cuerpos de texto, ya que tiene un efecto notable en el rendimiento del sitio web. Mike también reconoce que su tecnología no es la solución final para la tipografía en la web y se refiere simplemente a un "recurso provisional".
Pros:
Contras:
FLIR o Facelift Image Replacement es similar a sIFR, excepto que usa Javascript y PHP para generar imágenes en lugar de Flash para reemplazar texto. Este método tiene el beneficio obvio de que no tiene que dedicar tiempo a crear imágenes individuales para cada fragmento de texto para el que desea utilizar una fuente personalizada. Si decide utilizar una fuente o color diferente para su texto, también es mucho más fácil actualizar el texto en su sitio web..
Desafortunadamente, además de la facilidad de uso y el aspecto de ahorro de tiempo de FLIR, no ofrece muchas mejoras con respecto al método tradicional de guardar texto como imágenes. El resultado final aún permanece como texto representado como una imagen en la que el texto no es seleccionable ni escalable.
Pros:
Contras:
El problema con las licencias de fuentes es continuo y ha contribuido a la lenta evolución y adopción de métodos de reemplazo de fuentes. Al igual que con las imágenes, necesita el permiso del autor, en forma de EULA (Acuerdo de licencia de usuario final), para utilizar una fuente en su sitio web. Algunas licencias permiten el uso gratuito de la fuente, incluso con fines comerciales, mientras que otras solo permiten el uso personal en una máquina local.
Cuando utiliza uno de los métodos de reemplazo de fuentes mencionados anteriormente, está incorporando efectivamente una fuente en su sitio web o enlazando con uno que se ha cargado en su servidor web y esto no está permitido por muchas, incluso licencias de fuentes gratuitas. La razón por la que muchos creadores y fundiciones de fuentes no lo permiten es porque permite a los usuarios del sitio acceder directamente al archivo de fuentes y les preocupa que su fuente pueda descargarse y distribuirse ilegalmente. Este problema ha impedido a muchos creadores de fuentes hacer que sus fuentes estén disponibles para su uso con métodos como @ font-face.
Por lo tanto, es de vital importancia que cuando utilice uno de los métodos mencionados anteriormente, asegúrese de que la licencia de la fuente lo permita..
Afortunadamente, este problema no ha obstaculizado el desarrollo de métodos de reemplazo de fuentes por completo y hay muchos recursos disponibles para permitirle usar fuentes personalizadas en su sitio web..
"La perfección no vale la pena esperar, si lo haces, te arriesgas a perderte nuevas y emocionantes oportunidades"
Hemos discutido mucho más arriba, y está claro que hay muchas opciones disponibles para aquellos que desean usar fuentes personalizadas en los diseños de sus sitios. La buena noticia es que todos estos métodos están disponibles para usar en este momento. Es verdad; Ninguno de los métodos es perfecto, cada uno tiene sus propios puntos buenos y puntos malos. @ font-face obviamente es lo más prometedor, pero probablemente pasarán algunos años antes de que sea absolutamente a prueba de balas. La verdad es que aunque la situación rara vez es perfecta en el mundo del diseño web, siempre habrá compromisos y soluciones necesarias para implementar nuevas tecnologías. No vale la pena esperar a la perfección. Si lo hace, corre el riesgo de perderse oportunidades nuevas e interesantes..
Este es realmente un momento emocionante para el diseño web, y parece haber un creciente aprecio y comprensión de la tipografía en la web. Los métodos de reemplazo de fuentes ofrecen una gran oportunidad para crear nuevos diseños innovadores y creo que la clave es no abusar de esta tecnología. Siempre provea reservas para cuando las cosas vayan mal y use cada método con sensatez (no cambie todo el texto de su sitio para esto). Tómese el tiempo para apreciar y aprender sobre el excelente tipo y la web será un lugar mejor para ello..
¿Tienes tus propios pensamientos sobre esto? ¿Tienes una pregunta? Si olvidamos alguno de sus métodos favoritos, publíquelos a continuación en la sección de comentarios y nos aseguraremos de incluirlo en esta publicación.!
Accentsconagua