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

6 maneras de mejorar tu tipografía web

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

La tipografía en la web es cualquier cosa menos simple, y para muchos, es un misterio preocupante. Hoy, revisaremos seis formas en que los diseñadores y desarrolladores web pueden mejorar la tipografía de los sitios que crean.

Introducción

La tipografía es el arte de diseñar letras, palabras, párrafos y cómo interactúan entre sí. Muchos diseñadores y desarrolladores a menudo equiparan la tipografía con la elección de una fuente o tipo de letra, mientras que otros simplemente olvidan que el 95% del diseño web es tipografía y tienden a olvidarse de ella. Claramente, si la tipografía es realmente el 95% del diseño web, debería estar a la vanguardia de la mente de todos los diseñadores y desarrolladores. Estas son seis maneras de mejorar tu tipografía web.

1. Comprende los conceptos básicos de la tipografía

Los fundamentos de la tipografía son importantes para todos los diseñadores, ya sea que estén diseñando o no para la web.

Definiciones tipográficas

Typography Examined and LabeledTypography Examined and LabeledTypography Examined and Labeled

A continuación se muestran algunas definiciones tipográficas básicas que todo diseñador/desarrollador debe entender cuando se trata de tipografía. Esta lista no es en absoluto exhaustiva. Consulta la Lista de lectura recomendada al final de este artículo para obtener glosarios más completos.

  • Ascendente: Cualquier parte de una letra minúscula que se eleva por encima de la línea media.
  • Línea base: la línea sobre la que descansa el texto.
  • Altura de la tapa: la parte superior de una línea determinada sin incluir el interlineado.
  • Descendiente: Cualquier parte de una letra minúscula que cae por debajo de la línea de base.
  • Interletraje: El ancho de espacio entre dos caracteres dados utilizado para lograr la apariencia óptima. En general, el interletraje se realiza automáticamente por la aplicación dada, pero es necesario entender que Photoshop (u otro software de edición de imágenes) no proporciona necesariamente el mismo interletraje que un navegador web.
  • Interlineado: el alto del espaciado entre dos líneas cualesquiera de una sección. La cantidad óptima de iniciales es generalmente la mitad del alto del tamaño de la fuente. Por ejemplo, si usa un tamaño de fuente de 12 px, debe haber 6 px de interlineado.
  • Espaciado entre letras: el ancho de espacio predeterminado entre cualquier conjunto de caracteres determinado. A esto también se le llama "Seguimiento".
  • Ligaduras: glifos especiales que combinan dos caracteres separados en un solo glifo. Las ligaduras a menudo se crean automáticamente en programas de diseño como Photoshop o InDesign, pero generalmente no se representan como glifos individuales en los navegadores web. Si se quiere el uso de ligaduras en la web, usa entidades de caracteres HTML o Unicode para crearlas manualmente.
  • Altura de línea: la altura de una línea, incluido el interlineado agregado. La altura de línea es el método más eficaz para controlar el ritmo vertical. Por ejemplo, si se utiliza un tamaño de fuente de 12px para el texto del cuerpo estándar, debe haber aproximadamente 6px de interlineado, lo que se traduce en un alto de línea de 18px.
  • Medida: el ancho de una línea o columna de texto determinada (generalmente en caracteres). La cantidad óptima de medida para la lectura en mi experiencia es generalmente de 60 caracteres, pero esto varía de una fuente a otra en función del espaciado entre letras y palabras.
  • Representación: el proceso de interpretación del tipo por un explorador u otra aplicación. Cada explorador, aplicación y sistema operativo representa el tipo de forma diferente.
  • Peso: La negrita o ligereza de una fuente determinada. En línea con el tipo renderizado, lo mejor es ceñirse a dos pesos de fuente: normal y negrita. Con la tipografía basada en imágenes, usar otros pesos como Semibold, Light y Black, es mucho más fácil.
  • Espaciado entre palabras: el ancho de un espacio entre dos palabras dadas.
  • Altura X: la altura del texto entre la línea de base y la línea media. Esto es equivalente a la altura de una letra minúscula típica (originalmente, el glifo "x").

Escala tipográfica

Typography Scale ExampleTypography Scale ExampleTypography Scale Example

Para crear una escala tipográfica efectiva, el mejor método que encontré es usar la unidad de medida de tamaño "em", ya que configura el tamaño en relación con la base de un documento determinado. En el siguiente ejemplo, el tamaño de fuente base es de 12 píxeles, lo que configuraría el tamaño de fuente estándar para los párrafos en 15 píxeles.

Ritmo vertical

El ritmo vertical del interlineado que proporciona el espaciado óptimo para que el ojo lo siga. Para crear este ritmo lo mejor es seguir una cuadrícula de referencia. Desde mi experiencia, el ritmo vertical en línea se configura mejor en o cerca de 1.5em. NETTUTS+, por ejemplo, utiliza un ritmo vertical de 1,6em, que equivale aproximadamente a una altura de línea de 17,6px (basada en un tamaño de fuente de 11px).

Vertical Rhythm ExampleVertical Rhythm ExampleVertical Rhythm Example

A continuación se muestra un ritmo vertical estándar que uso en muchos de mis sitios web basados en el sistema de cuadrícula 960. Para lograr el ritmo vertical de manera adecuada, cada párrafo debe tener un margen o relleno por debajo equivalente a la altura de línea de la cuadrícula de referencia estándar.

2. Diseña en el navegador

Como la mayoría de los diseñadores y desarrolladores saben, los sitios web se representan de manera diferente en diferentes navegadores. Esto es especialmente cierto con las fuentes de representación. A continuación se muestra una comparación de cómo cinco navegadores populares representan el mismo texto de manera diferente:

Type Rendering ComparisonType Rendering ComparisonType Rendering Comparison
Fuente de la imagen: FontTech.Info

Al crear un diseño tipográfico o un sitio que es rico en contenido (como una revista o un sitio de blog), poder ver las diferencias entre la tipografía en cada uno de los diferentes navegadores y sistemas operativos es una gran bendición. Diseñar en el navegador no es nada nuevo (incluso en 1997 cuando creé mi primer sitio web, lo diseñé completamente en el navegador). Si bien no todos los sitios son candidatos para el diseño en un navegador, los más preocupados por la tipografía son perfectos para diseñar en un navegador.

Designing in the BrowserDesigning in the BrowserDesigning in the Browser
Fuente de la imagen: For a Beautiful Web

Andy Clarke, popular diseñador/autor, habló recientemente en An Event Apart Boston con una presentación llamada Walls Come Tumbling Down en la que abogó por diseñar en el navegador por muchas razones. La imagen de arriba, tomada de su presentación, muestra el uso de una cuadrícula estandarizada tanto para las columnas como para el ritmo vertical.

La mejor manera de diseñar en un navegador es usar una cuadrícula como esta. En el paquete fuente, incluí dos cuadrículas columnares diferentes, cada una con tres variantes de ritmo vertical. El siguiente CSS muestra el método más fácil de implementar una de estas cuadrículas de prueba reemplazando la imagen o imágenes de fondo en el cuerpo de la página HTML utilizando una clase específica de la cuadrícula que elijas. Simplemente agrega la clase especificada a la etiqueta del cuerpo o la etiqueta DIV del contenedor de contenido, y estarás listo para diseñar en tu navegador.

Cabe señalar que para un buen ritmo vertical, es necesario tener un control granular sobre la altura de la línea para alcanzar el ritmo vertical adecuado. Además, puedes usar este Bookmarklet de creación de cuadrícula para superponer cualquier sitio web con una cuadrícula personalizada. Me parece que esto es útil cuando no se puede reemplazar la imagen de fondo con una de las cuadrículas.

3. Usa una técnica de reemplazo de imágenes CSS

Reemplazar texto con imágenes ha sido una práctica estándar en el diseño web desde los años 90. Con la adopción de CSS en los principales navegadores, comenzaron a surgir técnicas de reemplazo de imágenes que no consisten simplemente en hacer una imagen y colocarla en el lugar del texto. El primero de ellos ampliamente aceptado fue el Reemplazo de imagen de Fahrner (FIR), pero a medida que la gente jugaba con el Reemplazo de imagen CSS, se dieron cuenta de que esta técnica no era accesible. La técnica de reemplazo de imágenes de Phark se concibió originalmente como un reemplazo accesible de la técnica FIR clásica. Propuesto por primera vez por Mike Rundle de 9rules en 2003, el Reemplazo de imagen de Phark se basa en el uso de las propiedades CSS de sangría de texto e imagen de fondo para ocultarle el texto al usuario, pero sigue siendo accesible para los lectores de pantalla y los motores de búsqueda.

Para usar el Reemplazo de imagen de Phark, configura el elemento contenedor (en este caso, los DIVs) con un alto y ancho definidos. Luego, configura una imagen de fondo. Por último, configura la propiedad text-indent en -9999px. La propiedad text-indent esencialmente inserta el inicio del texto a la izquierda de 9999 píxeles, pero esto no aumenta el área desplazable, lo que hace que el texto desaparezca.

Phark Image Replacement ExamplePhark Image Replacement ExamplePhark Image Replacement Example

Si bien Phark es actualmente la técnica de reemplazo de imágenes solo con CSS más común, existen muchas otras con diferentes ventajas y desventajas. Por ejemplo, Phark no le muestra nada al usuario si las imágenes están deshabilitadas pero CSS está habilitado, una desventaja relativamente pequeña. Además, el reemplazo de imágenes CSS no está realmente diseñado para tipografía a gran escala (es decir, artículos), pero es mejor para botones, encabezados y otras pequeñas cantidades de texto. Para obtener más información sobre otras técnicas de reemplazo de imágenes basadas en CSS, CSS-Tricks escribió un buen resumen de todas las técnicas de reemplazo de imágenes basadas en CSS disponibles llamado Nueve técnicas para el reemplazo de imágenes CSS.

4. Usa una técnica de reemplazo de imagen "avanzada"

El reemplazo de imagen estándar es ideal para situaciones altamente decorativas y cantidades más pequeñas de texto. ¿Qué haces cuando quieres reemplazar el texto de todo el cuerpo de un artículo? ¿Qué pasa con reemplazar los titulares y mantener el texto seleccionable? La respuesta aquí es una de las técnicas avanzadas de reemplazo de imágenes. Para todos los propósitos intensivos, hay tres reemplazos de imágenes avanzados diferentes disponibles en este momento (si conoces otros, déjalos en los comentarios): basado en Flash, basado en Javascript y basado en PHP.

Reemplazo escalable de Flash Inman (sIFR)

La primera de las técnicas avanzadas de reemplazo de imágenes que llegó a la escena fue Reemplazo escalable de Flash Inman (sIFR), originalmente diseñada por Shaun Inman como IFR y posteriormente avanzada a la designación sIFR por Mike Davidson y Mark Wubben, quienes actualmente mantienen el proyecto.

PROS:

  • Representación de fuentes más nítida debido al suavizado
  • Conserva el texto semántico y accesible original
  • Se degrada con gracia en el texto original
  • El texto se puede seleccionar (parcialmente)
  • Guión discreto

CONTRAS:

  • No es adecuado para grandes cuerpos de texto
  • La configuración puede ser complicada y engañosa
  • Requiere Flash y Javascript
  • Los tiempos de carga pueden ser lentos
  • La impresión es problemática

Si quieres aprender a implementar y ver ejemplos de sIFR, NETTUTS+ tiene un gran tutorial sobre cómo usar sIFR o visita el sitio oficial de sIFR2 o el sitio oficial de sIFR3, la versión más reciente.

cufón

La técnica de reemplazo de imagen avanzada más popular recientemente se llama cufón, supuestamente una palabra combinada de "personalizado" y "fuente" según algunos. "Pretende convertirse en una alternativa digna al sIFR, que a pesar de sus méritos sigue siendo dolorosamente complicado de configurar y usar", según la wiki de cufón.

PROS:

  • Técnica avanzada de reemplazo de imágenes más rápida
  • Conserva el contenido de texto semántico original
  • Se degrada con gracia en el texto original
  • No requiere ningún plugin (como Flash)
  • Guión discreto
  • Fácil configuración

CONTRAS:

  • El texto no se puede copiar ni pegar (el texto no se puede seleccionar)
  • La licencia de fuentes es borrosa con respecto a cufón
  • La justificación y los efectos del texto no funcionan
  • El estado :hover tiene muchas peculiaridades
  • Requiere Javascript

Si quieres aprender a implementar y ver ejemplos de cufón, NETTUTS+ tiene un gran screencast y tutorial sobre cómo usar cufón o visitar la Web Oficial de cufón.

Reemplazo de imagen de estiramiento facial (FLIR)

La técnica de reemplazo de imagen de estiramiento facial (FLIR) es diferente de las dos mencionadas anteriormente en que utiliza secuencias de comandos del lado del servidor con PHP y la biblioteca de imágenes GD. Fue desarrollada por Cory Mawhorter para proporcionar una técnica automática de reemplazo de fuentes del lado del servidor.

PROS:

  • Conserva el contenido de texto semántico original
  • No requiere ningún plugin (como Flash)
  • Los problemas de licencias de fuentes son poco probables, si acaso ocurren

CONTRAS:

  • El texto no se puede copiar ni pegar (el texto no se puede seleccionar)
  • La representación de fuentes es deficiente en comparación con otras alternativas
  • Requiere un servidor web con PHP y GD
  • Requiere más recursos del servidor
  • Puede ser difícil de configurar

Si quieres aprender a implementar y ver ejemplos de FLIR, Divito Design tiene un buen tutorial sobre cómo usar FLIR o visita el sitio oficial de FLIR.

5. Usa la regla @font-face de CSS3 para la incrustación de fuentes web

CSS3 es relativamente nuevo en el panorama de la web, y aún no ha ganado un uso generalizado. Una de las características más interesantes de CSS3 es la regla @font-face. Hay dos grandes obstáculos para usar @font-face en este momento. Primero, no muchas fundiciones de fuentes y tipos de letra admiten la incrustación de @font-face. Algunas licencias son vagas y no abordan la incrustación web, mientras que otras prohíben explícitamente la incrustación de @font-face. Para obtener una lista de tipos de letra que admiten la incrustación de @font-face, puede que webfonts.info tenga una gran lista. El segundo obstáculo es que no todos los navegadores admiten la regla de @font-face, como se muestra en la siguiente tabla de compatibilidad del navegador.

Fuente de la imagen: Wikipedia

La regla de @font-face ahora permite la incrustación de fuentes en IE6, IE7, IE8, FireFox 3.5+ (PC y Mac) y Safari (PC y Mac) con soporte en Opera 10 y próximamente Chrome. Esto significa que, de alguna forma o moda, las fuentes web estarán disponibles para aproximadamente más del 90% de los usuarios.

Primer paso: hacer las declaraciones @font-face

Idealmente, esta primera declaración @font-face sería parte de un archivo CSS servido a través de comentarios condicionales solo a IE con la versión EOT de la fuente. La segunda declaración de @font-face debe ser un archivo de fuente OTF o TTF. Además, debido a las restricciones de seguridad del navegador, la URL de origen para las declaraciones debe ser relativa (aunque algunos navegadores admiten URL absolutas).

Paso dos: Usar la fuente

Sí. Eso es todo lo que hay que hacer.

Una vez realizadas las declaraciones, la familia de fuentes que se declaró se puede utilizar como cualquier otra fuente que estaría disponible en el sistema de un usuario. Este es un territorio nuevo y emocionante para los diseñadores y desarrolladores web por lo que será importante seguirlos durante los próximos meses.

Los próximos proyectos de entrega de @font-face como Typekit y Typotheque buscan proporcionar una ayuda significativa en términos de negociación de licencias de incrustación web con las grandes fundiciones de fuentes. Además, con todas las preguntas sobre el alquiler de fuentes para incrustaciones web, puede resultar difícil obtener algunas (o todas) las fuentes que utilizarás en un diseño web para usarlas en tu software de edición de imágenes. Hay dos soluciones para esto: 1) diseñar en el navegador como se recomendó anteriormente, o 2) usar tipos de letra similares para diseñar los diseños de páginas estáticas.

6. Encuentra inspiración y nunca dejes de aprender

La tipografía en la web está en sus comienzos en comparación con la tipografía impresa, retransmitida y cinematográfica. Observa otras formas de medios para el uso inventivo de la tipografía. La próxima vez que estés en la sala de cine, revisa todos los carteles de películas y presta mucha atención a la tipografía utilizada en las vistas previas y los tráilers. Revisa la tipografía tanto en el interior como en la portada de los libros de tu librería local. Examina tu colección de DVD o tus revistas favoritas en busca de inspiración.

En línea, sigue a los principales expertos en tipografía en línea como For a Beautiful Web, I love Typography, TypeInspire o webfonts.info. A continuación, encontrarás una lista de enlaces de lectura recomendados para obtener más información sobre la tipografía web, además de NETTUTS+ y lo mencionado anteriormente.

Con suerte, estos seis consejos te ayudarán la próxima vez que estés trabajando en tipografía para la web. Es un momento emocionante para ser un tipófilo que trabaja en la web.

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.