Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Un Análisis de la Tipografía en la Web

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La tipografía es uno de los aspectos más importantes, si no el más importante, del diseño web. Algunos argumentarán que representa el 95% del diseño web, ¿entonces por qué negamos con tanta frecuencia su importancia? Con frecuencia tus elecciones tipográficas serán determinantes a la hora de que los lectores que aterricen en tu sitio web decidan permanecer o abandonarlo. Después de todo, en principio llegaron hasta allí para leer. Piénsalo un segundo: si el contenido es ciertamente el rey, por lógica, la tipografía debería ser tratada como la reina.

De hecho, casi todos los nombres de fuentes lo sugieren así; Futura, Optima, Times New Roman (Ok, probablemente ésta sea un chico), Verdana, Lucida, Georgia, Helvetica… No hay duda al respecto, la Tipografía es la reina. Por tanto, antes de salir debe ser vestida de acuerdo a su rango; debería aliñarse con algo de kerning y tracking, quizá una variante diferente de la fuente, y ya la tendríamos con el aspecto de una dama.

¿No tienes claro de qué estoy hablando? Bueno, sigue leyendo.


Conocer Tus (sans) Serifs

Antes de continuar con el artículo, en especialmente si no tienes mucho contacto con la tipografía, te sugiero que cubras tus carencias en lo que respecta a conocimientos tipográficos mediante la Typedia, prestando especial atención a las Clasificaciones de Tipográficas y a la anatomía del carácter tipográfico. Todo esto te será muy útil cuando crees tus colecciones y emparejamientos de fuentes.

Cuando termines de leer los dos artículos de la Typedia, vuelve aquí para que intensificar tus recién adquiridos conocimientos tipográficos y prepárate para los próximos artículos de esta serie.

Conocimientos #1: Puliendo la Relación Entre Tipografías

Las tipografías tienen relaciones dinámicas y pueden funcionar bien o mal al ser emparejadas, todo depende de con quien se combinen y sus diferencias. De hecho, técnicamente, existen tres formas de relación entre tipografías:

  1. Concordancia

    Una relación de concordancia es aquella en la que no existen estridencias, en la que las características de dos tipografías son bastante similares. Puede tratarse incluso de la misma familia tipográfica, usando diferentes variantes de estilo y/o tamaño.

  2. Contraste

    Cuando las tipografías son muy diferentes entre sí, se produce un contraste. Normalmente buscar el contraste es algo positivo, un ejemplo de esto sería el uso de una tipografía serif junto a una sans-serif.

  3. Conflicto

    Dos (o más) tipografías que tengan diferentes características pero que siguen siendo todavía demasiado similares como para crear disonancias en una página, crearan un emparejamiento conflictivo. En general debes evitar este tipo de relaciones.

Contrasting, conflicting and concording relationship between fonts.

Puliendo los Conocimientos #2: Variaciones Tipográficas

Las tipografías pueden tener distintos tipos de variaciones. Ya sea en su peso, su altura, su grosor, o cualquier otro aspecto, cada tipografía tiene sus propias características que la hacen única. Deberías aprender a localizar estos matices y hacer un correcto uso de su influencia. No creas que no tiene importancia, algunas pequeñas modificaciones en una misma tipografía pueden llegar cambiar mucho su aspecto.

Esto tiene un gran impacto en el diseño web, en donde el arte de crear y aplicar combinaciones de fuentes es muy importante. No tienes que seleccionar tipografías con apariencia exactamente similar como alternativa para cuando no esté disponible al que especificaste en un principio. No obstante, cabe indicar que una fuente tradicional como la Garamond debería estar respaldada por una tipografía también de estilo tradicional, con las lógicas características similares (Caslon, Baskerville o Times por ejemplo).

Adobe Garamond Pro, Garamond Premier Pro and Georgia side-by-side

Observa como, aunque todas son fuentes serif (Georgia, Garamond y Adobe Garamond Pro) y con un mismo tamaño de 200 puntos tienen un aspecto muy distinto.

Puliendo los Conocimientos #3: No Todas las Tipografías son Adecuadas Para Cualquier Situación

Una fuente moderna, como la Bodoni Condensed o la Bodoni Bold son una excelente elección para los titulares, mientras que serían tipografías inadecuadas para las largas líneas del cuerpo de un texto debido a que distraerían al lector del contenido. Una tipografía tradicional como la Garamond (yo ♥ la Garamond) sería una opción mucho mejor en esta situación.

Aquellos que no son diseñadores, frecuentemente toman malas decisiones al elegir tipografías para cada situación, y — aunque me voy a saltar el discurso sobre la Comic Sans — deberías saber que no siempre es aconsejable usar, por ejemplo, la Georgia para el texto principal de una página. No siempre es malo usar la tipografía Arial; pero ten en cuenta el mensaje que estás intentando transmitir a través de tu tipografía.


Fuentes Seguras Para la Web: A List Apart

Este artículo no es en principio un escaparate, pero siempre resulta interesante observar lo que han hecho otros diseñadores con talento al crear sus sitios web (los de sus clientes), es una maravilla verlos. Vamos a ver qué se puede conseguir con una consideración tipográfica cuidadosa a la hora de decorar la fuente, seleccionar grupos adecuados de fuentes y tomar sabias decisiones tipográficas.

(P.D. Si deseas ver más ejemplos sobre un buen uso de la tipografía en la web, consulta los archivos de Typesites. Allí no hay demasiado contenido, pero citan algunos sitios realmente buenos.)

Fuentes Seguras Para la Web: A List Apart

A List Apart, careful consideration to Webfonts
A List Apart muestra como con el uso de fuentes web seguras se pueden conseguir buenos resultados estéticos si se hecho una buena reflexión previa.

¿Es Verdana la tipografía más aburrida que podemos usar? La respuesta será negativa si se lo preguntamos a Janson Santa María. Él usó sabiamente las fortalezas de la Verdana (altura x) para lograr que el cuerpo del texto de tamaño más bien pequeño tuviese el aspecto digno y elegante que requería A List Apart. El pequeño tamaño de fuente también la hace agradable para las lecturas prolongadas.

La fuente Georgia es empleada mayoritariamente para enfatizar determinados elementos de la página, y también como tipografía de pantalla. Entre otras notables decisiones relativas al diseño, las letras mayúsculas tienen un tamaño pequeño y un espaciado entre caracteres positivo (tracking) para mejorar su legibilidad y aspecto.

Crear Pilas de Fuentes: Jon Tan

JonTangerine.com, typographic excellence
La atención que Jon Tan presta a los detalles trae consigo la perfección en lo relativo a la Tipografía.

Jon Tan, al igual que Khoi Vin y Daniel Mall, también sigue el culto al diseño minimalista en blanco y negro con cuidadosos toques de naranja. Aunque las elecciones de color restan emoción o vibración, podríamos decir que Jon lo compensa a través de un cuidado extra al elegir sus tipografías. ¡El archivo CSS de Jontangerine.com contiene más de 250 declaraciones diferentes para la micro-tipografía!

Los textos del cuerpo principal usan la Georgia, mientras que los centrados titulares usan un conjunto de tipografías que toman como base la Times, la Baskerville y la Palatino:

En otras áreas, el “color” de la tipografía se obtiene por medio del uso de diferentes variantes de la familia, gradaciones del negro y una excelente aplicación de estilo en las fuentes. ¡Definitivamente una de las mejores webs centradas en la tipografía que existen por ahí!

Incrustar fuentes mediante @font-face: Information Highwayman

Information Highwayman
Information Highwayman incrusta la fuente gratuita Justus.

Probablemente habrás escuchado hablar mucho de la incrustación mediante la directiva CSS @font-face en los últimos meses. Aunque Internet Explorer disponía de una técnica similar desde su cuarta actualización (nos avergüenza admitirlo), solo en 2009, cuando el resto de grandes navegadores ya implementaban @font-face, empezamos a hablar de forma intensiva sobre el uso de fuentes que no estaban creadas ex profeso para la web.

Existen, como seguramente sabrás, algunas desventajas considerables en esta técnica (principalmente relacionadas con temas de copyright), pero si encuentras una fuente que se ajusta a tus necesidades, tendrás la oportunidad de mejorar la experiencia que tienen tus lectores en tu web. D. Bnonn Tennant (Information Highwayman) decidió usar Justus para el cuerpo del texto, lo que contrasta bastante bien con el elemento sans-serif del fondo (el “compelling magnum”) y ayuda a lograr el efecto “desgastado” del sitio.   

Typekit: Elliot Jay Stocks

FF Tisa Web Pro on ElliotJayStocks.com
La homogénea FF combina perfectamente con la web de Elliot.

A Elliot le gusta usar el tipo de letra Slab-Serif, cuyo ejemplo se muestra perfectamente tanto en su magazine 8 faces que versa sobre Tipografía (altamente recomendable), con FF Unit Slab, y su propio sitio Web, en donde FF Tisa Web Pro está incrustada usando el servicio para incrustar fuentes de Typekits.

No se ha aplicado tanto estilo tipográfico en el sitio como, por ejemplo si ha hecho Jon Tan; no obstante, ha hecho un gran trabajo en cuanto a la alineación y el color, lo cual nunca debe ser obviado y son ingredientes importantes en una buena aplicación de la tipografía.

Sustitución de Imagen y sIFR: Squared Eye

Aunque se están convirtiendo rápidamente en técnicas “viejas”, Flash y el reemplazo de texto (ambos, tanto Cufón y las imágenes manualmente insertadas) en lugar del texto ordinario son importantes para la compatibilidad en todos los navegadores en sitios en los que sus usuarios no utilizan predominantemente navegadores modernos, asi como en casos en los que una fuente en particular no está disponible debido a cualquier motivo (por ejemplo, por razones de derechos de autor).

Squared Eye enfatiza los diferentes niveles de los titulares con sIFR, y también con imágenes insertadas de forma manual. Él usa una bella tipografía Archer slab-serif en armonía con un conjunto de fuentes basadas en la Lúcida para obtener un aspecto moderno y elegante al mismo tiempo.


Aplicar Adecuadamente Nuestros Conocimientos

Aunque voy a ofrecer algunos conjuntos de fuentes que puedes usar en tus diseños, considera lo siguiente como un “entrenamiento” para crear tus propias combinaciones. Existen ya muchas otros sitios webs por ahí que ofrecen muchas soluciones preparadas que sirven tanto para titulares como para el cuerpo del texto.

Como cuenta el dicho, “Dale al hobre un pez y lo alimentarás un día. Enséñale a pescar y le alimentarás de por vida”.

Estableciendo las Bases: Tus Lectores

Antes de empezar a crear tu selección de fuentes, deberías familiarizarte con tu audiencia principal y determinar que software y Sistema Operativo usan. De esta forma, podrás predecir qué fuentes tengan posiblemente instaladas, y qué flexibilidad tipográfica te proporciona esto.

Por ejemplo: Matthew Smith (Squared Eye) probablemente (acertadamente) predijo que la mayoría de su audiencia no tendría instalada una fuente como Archer en sus ordenadores, y por tanto decidió incrustarla usando el reemplazo de fuentes de Flash (en comparación con Archer,  ~97% de los usuarios tienen Flash instalado).

Diseña siempre con fuentes Web seguras primero, después haz mejoras de forma gradual con combinaciones de fuentes)

Para saber más sobre las fuentes que vienen con distinto software, visita 24 Ways de Font Matrix, Fluid Web Type y Apaddedcell. También encontrarás bastante información sobre fuentes en la documentación de Microsoft que acompaña a sus productos, así como una visión de su Departamento Tipográfico, una lectura muy útil.

Presta Atención a los Pequeños Detalles

Cuando se trata de crear combinaciones de fuentes, necesitarás tener en cuenta algunas variables, a la hora de determinar aquello que las diferencia entre si (¿recuerdas la anterior comparativa entre la Georgia y la Garamond?). Esto trae, de nuevo, el asunto de tu experiencia y familiaridad con las distintas categorías de fuentes. Tendrás que aprender a observar no solo la forma en la que se presentan las serifas (¿están inclinadas, o son rectas? ¿O no existen?), pero también las diferencias más pequeñas entre dos tipografías similares.

Considera como se relacionan unas con otras, sus alturas y su legibilidad en tamaños pequeños, así como su forma y dirección. Aunque esto suene, quizá, intimidante ahora, recuerda que con la practica se llega a la perfección.

Ejemplo: Ibis Display y Archer, aunque las dos pertenecen a la categoría de las slab-serif, probablemente no combinarían bien debido a la significativa diferencia en el diseño de sus serifas y en la gran variación de las modulaciones grueso/fino de la fuente ibis en comparación con la Archer que no tiene modulación en su trazo.

Crear una Pila de Fuentes Como Ejemplo

Ya he mencionado mi predilección por la Garamond. Así que voy a basar una combinación a partir de la Times New Roman, que es la fuente web segura más cercana a la fuente tradicional que acabo de mencionar.

Me gustaría mencionar que la Garamond, debido a su poca altura x, probablementeno sea una buena opción en el diseño orientado a la óptima legibilidad en pantallas (después de todo, no se creó en origen para la presentación en ellas), pero funciona bien si se usa con cuerpos de fuente grandes (en mi opinión, la Garamond se puede usar perfectamente a un tamaño de 16 -17 pixels/1em).

Escala óptica, como se llama, tamaños de texto más pequeños suelen tienen x-heights más grandes, más amplio madre anchos y menos contraste tipográfico madre y tamaños de pantalla más grandes tienen menor x-heights con más variación en tallo ancho.
- MSDN Blogs

Font degrading in our font-stack
Cómo nuestra familia se degradará en el caso de Garamond no está disponible (Garamond color azul en los ejemplos).

Según 24 Ways' Font Matrix, la Garamond se suministra con Office Word 2007 para Windows y Word 2004 para Mac, es decir, está disponible para un gran porcentaje de los visitantes. Para aquellos que no la tengan instalada, proporciono una alternativa con las tipografías Adobe Caslon, Garamond y Minion Pro que se envían con Creative Suite (aviso, sin embargo, que todas estas fuentes también están disponibles para su descarga individual; Estoy mencionando los programas que las incorporan con porque supongo que muchos de vosotros habéis comprado el software de Adobe).

También he decidido usar la Crimson del repositorio de Fuentes de Google para proporcionar un respaldo decente anterior a la Times. La pila de fuentes final tiene el siguiente aspecto:

Esta pila de fuentes debe utilizarse exclusivamente con cuerpo grandes de fuente, sobre todo porque Windows destaca por crear fuentes con un diseño pobre.

Font rendering in Safari vs. Chrome

Chrome con la configuración por predeterminada (izquierda) y Safari con el suavizado de fuente ajustado a Medio (derecha). Puede parecer algo excesivamente sutil al principio, pero tiene un gran impacto en la legibilidad cuando los tamaños de las fuentes son más pequeños.

Si tu objetivo era lograr una legibilidad óptima en pantalla, la excelente altura x de la Georgia y la Verdana (ambas fuentes son de la década de los noventa, realizadas específicamente para la pantalla) proporcionarán resultados más agradables para las pilas de fuentes.

Por ejemplo, podríamos tomar ventaja de la similitud entre la Lucida con serifas (Fax y Bright, que también vienen con MS Word) y la Droid con serifas del repositorio Google Fonts para hacer una pila de fuentes altamente legibles con una gran altura x:

Una vez más Google Fonts entra en acción con preferencia a una solución genérica, sobre todo porque la Droid serif tiene una apariencia mucho más cercana a Lucida que la Georgia y la Times, respectivamente.

Una pila muy similar basado en la Verdana también contendría casi las tres mismas fuentes, la Lucida sans-serifs (la Grande - que viene con los Mac, la Sans, y la Sans Unicode):

Observa cómo las fuentes de sustitución tienen características similares, en especial la letra g es prácticamente igual en todas las tipografías, y la o se asemeja más a un círculo que a una elipse. Como con la mayoría de las sans serifs, solo tienen un grosor, y no tienen ninguna modulación grueso/fino en su trazo (la Optima, por ejemplo, tiene modulaciones, lo que complica su emparejamiento con las otras fuentes).

Lucida-based Sans-serif font stack

Poniéndonos Exigentes

Aunque crear pilas de fuente sensibles es importante para proporcionar excelente tipografía, vas a tener que trabajar un "diez por ciento extra" y proporcionar contraste tipográfico mediante diferentes variantes del tipo de letra, pesos, dirección y prestando atención a todos los métodos micro tipográficos.

Jon Tan, attention to micro typography

Jon Tan aborda la micro tipografía con mucho mimo.

Jon Tan, por ejemplo, utiliza algunos selectores CSS3 para crear un gran impacto visual.

Usa titulares centrados y en cursiva dentro del blog con una pila de fuente basada en la Times. Esto, junto con el texto justificado y el diseño minimalista, crea una experiencia muy agradable durante la lectura. Recuerda: los pequeños detalles son importantes.

Absolutely astonishing headings on jontangerine.com

Creando mezclas con tipografías en negrita, títulos en mayúsculas y un interletraje positivo en los titulares más pequeños proporciona en muchas ocasiones una considerable mejor experiencia y contraste, también una distinción más clara respecto al texto del cuerpo principal de la página de lo que lograríamos usando simplemente un tipo de letra distinto. Samantha Warren ha explicado claramente la jerarquía tipográfica, te sugiero que leas su artículo para comprender mejor este tema.

Lucida and Garamond, contrasting and conflicting
Contraste mejora la distinción y comprensión del texto. Puedes incluso identificar el titular de segundo nivel, ¿cierto?.

La tipografía Garamond a un tamaño de 17 píxeles para el cuerpo y una Lucida Sans para los subtitulares de nivel 4 (h4) tienen un aspecto bastante diferente en las dos situaciones de la imagen superior, conseguido tan solo con unos pequeños cambios a través de CSS:

Los símbolos en cursiva son otra de esas técnicas que demuestran "la importancia de las pequeñas cosas" (nota, sin embargo, que no todas las fuentes tienen símbolos "especiales"):

Si deseas automatizar el uso de símbolos decorativos (podrías incluirlos creando una clase, y ayudándote de métodos tipográficos avanzados), te sugiero que revises el plugin WP-Typography para Wordpress.


Mejoras Adicionales con JavaScript

Podríamos mejorar aún más la experiencia de usuario mejorando nuestro sitio web con algo de JavaScript para comprobar si este tiene instalado en su sistema operativo una fuente concreta. Después, basta con escoger sencillamente una fuente de respaldo adecuada, si la fuente deseada no está disponible (por ejemplo, aumentar el tamaño para que otra fuente sea más legible, usar el reemplazo de imagen, cargar fuentes adicionales, etcetera.).

Recuerda que todavía debes tener en cuenta el hecho de que un pequeño porcentaje de los usuarios navega por la web con JavaScript desactivado.

Quizá podrías agregar una clase de noscript en el body por si JavaScript está desactivado y preparar alguna tipografía alternativa.

Dicho esto, existen varias técnicas, en esencia muy similares, para descubrir si una fuente concreta está instalada en el sistema del usuario. Yo voy a usar una versión ligeramente modificada del código de Lucas Smith:

Al pegar el código en tu archivo JavaScript, puedes comprobar con sentencias condicionales si una fuente concreta está instalada en el ordenador de los usuarios:

Posiblemente uno de los usos más interesantes de esta técnica consiste en crear un enlace de carga de un archivo de fuente (@font-face, Google Fonts...), para las situaciones en las que el usuario no disponga de nuestras fuentes preferidas en su sistema operativo. De esta manera, mejorarás el rendimiento y no obligarás a que el usuario realice una descargar extra de ~ 30kb injustificada:

Recursos y Lecturas Adicionales

  • Flipping typical carga fuentes locales y las muestra en el texto que desees. Puede ser un poco intensiva para el ordenador.
  • Better CSS Font stacks, de Unit Interactive. Un antiguo pero excelente recurso que proporciona pilas de fuentes de muestra adecuadas tanto para titulares como para cuerpos de texto.
  • Web font specimen es una gran herramienta para probar diferentes fuentes de forma local. También deberías leer el artículo de ayuda de A list apart.
  • 50 útiles herramientas para la tipografía y otros recursos de Smashing Magazine.
  • The non-designer's design book (El libro de para los no diseñadores), que explica los fundamentos tipográficos y los principios de diseño para principiantes del mundo visual, una lectura sencilla y rápida. Podrías encontrar de mucha utilidad la claridad con la que se describen en el libro todas las fuentes, explica cómo distinguirlas rápidamente por tipo y categoría.
  • ¿Ya conoces los fundamentos? Prueba The Elements of Typographic Style (Los elementos del estilo tipográfico), una lectura imprescindible y excelente para cualquier diseñador, recomendado por algunos de los mejores diseñadores.

♣ ♠ ♣ ♠ ♣ ♣ ♠ ♣

Espero que ahora tengas una mejor comprensión de la tipografía en la web. Definitivamente se podría hablar mucho más sobre esta materia, y me encantaría escuchar tus opiniones al respecto. ¡Cuéntamelo a través de un comentario!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.