La Tipografía en el diseño de páginas web – Usos y qué debes tener en cuenta

Dado que el 95% de la información en la web es lenguaje escrito, un buen diseñador web necesita tener un conocimiento de la tipografía: la antigua disciplina de dar forma al texto para el consumo humano.

En este post, discutiremos los elementos esenciales de la tipografía del diseño web.

Tipografía de Diseño Web: La terminología de la tipografía

Este gran gráfico y post de Designer Insights on the Anatomy of Typography ofrece una gran lista visual y completa de la terminología de la tipografía.

Como diseñador web, usted querrá familiarizarse con estos términos tipográficos:

Tipo de letra vs. Fuente – ¿Hay alguna diferencia?

Los dos primeros términos del cuadro anterior se utilizan a menudo indistintamente en el diseño moderno. En los días de las imprentas, las fuentes y los tipos de letra eran dos cosas diferentes: el tipo de letra era el diseño específico de las letras, mientras que la fuente se refería al tamaño o estilo particular de ese tipo de letra.

• Un tipo de letra es un diseño tipográfico como Arial, Helvetica, y Times New Roman
• Una fuente es una variación específica de un tipo de letra como Arial negrita en 12 puntos.
• Puede pensar en un tipo de letra como una carpeta llena de fuentes que descarga de un sitio de fuentes, y las fuentes como los archivos individuales dentro de esa carpeta
• Hoy en día, los términos son generalmente intercambiables y sólo los verdaderos nerds de la tipografía se preocupan por la distinción.

2. Tipografía Web en estado salvaje

Si no estudiaste diseño gráfico tradicional, es una buena idea familiarizarte con la implementación de la tipografía del mundo real.

La tipografía impresa todavía puede inspirar la tipografía web, así que estudie carteles, revistas, portadas de libros, vallas publicitarias y anuncios. Saque libros de su biblioteca local sobre diseño de tipografía.

En cuanto a la tipografía en el diseño web, hay toneladas de ejemplos de diseño de buena y muy mala tipografía.

Ejemplos de buena tipografía:

• Los mejores ejemplos de tipografía en diseño web
• Los 50 mejores ejemplos de sitios web que utilizan tipografía
• 17 sitios web con diseño basado en la tipografía
• 20 sitios web con tipografía brillante

Ejemplos de mala tipografía (Prepare sus ojos)

pennyjuice.comLingsCars
.comhttp://art.yale.edu/monkzone.com/

3. Elegir las fuentes adecuadas para su proyecto de diseño web

Cuando se trata de elegir fuentes para un nuevo proyecto de diseño web, es útil familiarizarse con los tipos básicos de fuentes.

Serif

• Ejemplos: Times New Roman, Garamond, Bodoni
• Una personalidad más formal y tradicional.
• Las letras con gracias son más fáciles de leer en letra impresa o a mayor tamaño en pantalla.
• Los serifs pueden ser difíciles de leer en la pantalla con tamaños de letra más pequeños

Sans Serif

• Ejemplos: Helvetica, Verdana, Tahoma, Open Sans
• Una personalidad más moderna y amable.
• Las fuentes Sans Serif son más fáciles de leer en pantalla en tamaños más pequeños.
• Se pronuncian «sahns» como bonos, no como bandas.

Pantalla

• Ejemplos: Langosta, Bauhaus, Ransom
• Diseños no tradicionales que se utilizan para el impacto
• Bueno para títulos y encabezados en ciertos casos
• Nunca debe ser usado como texto principal

Escritura a mano

• Ejemplos: Guión de pincel, Comic Sans, Guión en francés
• Simular cartas manuscritas
• Al igual que las fuentes de visualización, es bueno para títulos y encabezados, pero no para textos de cuerpo pequeño
• Evite el uso de fuentes de escritura a mano en MAYÚSCULAS

Monoespacio

• Ejemplos: Courier, Código fuente, Pro
• Todas las letras tienen el mismo ancho
• Presentar un tono serio que puede ser efectivo en ciertos casos

Altura X: Una característica importante de la fuente

• La altura X es la altura de la «x» en comparación con la altura de la tapa de una fuente
• En general, una altura x más grande resulta en una fuente más legible, especialmente en tamaños de fuente más pequeños; sin embargo, esto no siempre es así.

El poder de las fuentes de Google para el diseño web Typograhy

• Google Fonts es un potente recurso gratuito para los diseñadores
• Utilice la función de clasificación para descubrir qué fuentes son populares y de moda. Estas fuentes se están utilizando por una razón.
• SUGERENCIA: Descargue las fuentes de Google localmente y empiece a utilizarlas en documentos impresos para acostumbrarse a su aspecto y funcionamiento en conjunto
• OTRO CONSEJO: Cuantos más estilos ofrezca su fuente, más opciones tendrá para la tipografía creativa.
• PERO OTRO CONSEJO: Tenga en cuenta el tamaño de la descarga cuando integre fuentes en su CSS. Utilice sólo las fuentes que necesite. ¡No te vuelvas loco!

Sintonización de fuentes

Hay una regla general para el emparejamiento de fuentes:

• Elija una fuente para los encabezados y títulos para establecer la personalidad.
• Elija una segunda fuente para el texto del cuerpo que creará estabilidad.
• Combine fuentes de la misma familia.

• SUGERENCIA: para aquellos que tienen problemas con el diseño, las fuentes de la misma familia están diseñadas para funcionar perfectamente juntas. Estos emparejamientos se pueden utilizar sin problemas…
  • Roboto y Roboto Slab
  • Sans Abiertos y Sans Abiertos Condensados
  • Droid Serif y Droid Sans
  • Source Serif Pro y Source Sans Pro

Algunos ejemplos de combinaciones de fuentes + recursos

• fontpair.co/
• 5 mejores combinaciones de fuentes de Google para el desarrollo web
• SUGERENCIA: Hay muchos, muchos, muchos recursos como estos que sugieren excelentes emparejamientos de fuentes. Google es tu amigo!

4. El CSS de la tipografía

En diseño web, de acuerdo con esta gran guía, Learn to Code HTML & CSS:HTML
, o HyperText Markup Language, da estructura y significado al contenido definiendo ese contenido como, por ejemplo, encabezados, párrafos o imágenes. CSS, u Hojas de Estilo en Cascada, es un lenguaje de presentación creado para dar estilo al aspecto del contenido, utilizando, por ejemplo, fuentes o colores.
Como diseñador web, usted querrá familiarizarse con cómo utilizar CSS para aplicar estilos tipográficos. Aquí hay algunos consejos de CSS:

Familia de fuentes

• Ejemplo: p {font-family:}»Times New Roman}», Georgia,Serif;}
• Hay dos tipos de nombres de familia de fuentes:
  • family-name – El nombre de una familia de fuentes, como «times», «courier», «arial», etc.
  • generic-family – El nombre de una familia genérica, como «serif», «sans-serif», «cursive», «monospace».
• Comience con la fuente específica y siempre termine con una familia genérica en caso de que la fuente específica no esté disponible.
  • Separe cada valor con una coma.
  • Más información sobre el CSS Font-family Property
  • SUGERENCIA: Es una buena práctica incluir la fuente que prefiera, seguida de una familia común y, a continuación, volver a serif o sans serif.

Tamaño de fuente

Ejemplos
:h1 {tamaño del font-size: x-grande;}h1 {
tamaño del font-size:

250%;}h1 {

tamaño del font-size

: 2.5em;}h1 {

tamaño del font-size

: 2.5rem;}h1
{tamaño del font-size: 32px;}

Valores:

• Tallas: xx-pequeña, x-pequeña, pequeña, mediana, grande, x-grande, xx-grande
• Porcentaje: Establece el tamaño de fuente en un porcentaje del elemento padre
• Longitud: Ajuste el tamaño de la fuente a un tamaño fijo en cm, px, em, rem
• Heredar: Utiliza el tamaño de fuente del elemento padre
• Más información: Propiedad CSS font-size

Píxeles vs Ems vs Rems

• Píxeles, Ems y Rems son unidades de medida para definir el tamaño de un elemento
  en una página web.
• Los píxeles son una medida absoluta de la longitud.
• Los Ems son relativos al tamaño de fuente del elemento padre.
  • El tamaño de fuente por defecto es 16px
  • Un div tiene un tamaño de 1.5em, las fuentes aparecerán en 24px.
  • Un h1 en el div tiene un tamaño de 2em, aparece a 48px.
• Los Rems son relativos al tamaño de fuente del elemento html
  • El tamaño de fuente por defecto es 16px
  • Un div tiene un tamaño de 1.5em, las fuentes aparecerán en 24px.
  • Un h1 en el div tiene un tamaño de 2rem, aparece a 32px porque el h1 es relativo al tamaño de fuente por defecto e ignora los tamaños aplicados a los elementos del contenedor.
• SUGERENCIA: En estos días de problemas de diseño y accesibilidad, es mejor diseñar con ems y rems y no con píxeles.
• OTRA SUGERENCIA: dependiendo de la altura x del tipo de letra elegido, es posible que desee ajustar el tamaño de la fuente en el cuerpo o en el selector html.
  • Lato, por ejemplo, es una fuente excelente, pero puede ser difícil de leer en el estándar 16px = 1em para el texto del cuerpo.

Peso de la fuente

Ejemplos
:p {peso del elemento:normal;}h1
{peso del elemento:negrita;}h1
{peso del elemento:900;}Valores
:

• Normal: el peso estándar de la fuente (por defecto)
• Negrita: caracteres gruesos
• Negrita: caracteres más gruesos
• Más ligero: caracteres más ligeros
• Valor numérico:
  • Ajusta el peso de la fuente con precisión de 100-900
  • Muchas fuentes de Google ofrecen pesos precisos que se pueden utilizar
    • 300 de peso es»Light»
    • 400 peso es «Normal»
    • 600-700 el peso es «negrita»
    • 900 peso es «negro»
• Heredar: usa el peso de la fuente del elemento anterior
• Más información: Propiedad CSS font-weight
• SUGERENCIA: Utilice valores numéricos para el peso de la fuente siempre que sea posible en lugar de»negrita» Esto le dará más control sobre el peso de la fuente.

Estilo de fuente

Ejemplos
:p.normal {estilo de fuente:normal}p
.itálico {estilo de fuente:itálico}p
.oblicuo {estilo de fuente:oblicuo}

• Valores:
  • Normal: Utiliza la versión estándar de la fuente (por defecto)
  • Cursiva: Usa la versión en cursiva de la fuente
  • Oblicuo: Utiliza la versión oblicua de la fuente
  • Heredar: Usa el estilo de fuente del elemento padre
• Más información: Propiedad CSS font-style
• SUGERENCIA: Oblique es una versión angular de la fuente normal. Suele ser bastante feo. La cursiva es una
  fuente
  completamente diferente
  .
• OTRO CONSEJO: En muchos casos, las fuentes de Google mostrarán automáticamente la versión en cursiva cuando se configuran como oblicuas. Pero algunos no lo harán.

Línea-Altura

• Similar al liderazgo en composición tipográfica
• SUGERENCIA: el plomo se pronuncia plomo como la cama.
  • Ejemplos
    :p {altura de línea: 1.5em;}p
    {altura de línea: 150%;}p
    {altura de línea: 2;}p
  • Valores:
    • Normal: (por defecto) Altura de línea normal basada en el tamaño de la fuente
    • Número: Un número que se multiplicará por la altura normal
    • Longitud: Una altura fija en px, pt, cm, em, etc.
    • Porcentaje: Altura de línea como porcentaje del tamaño de fuente.
    • Heredar: Utiliza la altura de línea de la etapa de corriente.
• Más información: Propiedad CSS line-height
• SUGERENCIA: dependiendo de la fuente, el aumento de la altura de la línea a alrededor de 1,75 puede mejorar drásticamente la legibilidad del texto del cuerpo.

Espaciado de letras

• Similar al kerning y el seguimiento en la composición tipográfica
• Ejemplos
  :h1 {espacio entre letras: 1px;}h2
  {espacio entre letras: -1px;}
• Valores
  • Normal: (Predeterminado) No hay espacio extra entre los caracteres.
  • Longitud: Realiza un ajuste en el espacio entre caracteres (se permiten valores negativos)
• Heredar: Utiliza el valor de espaciado de letras del elemento padre.
• Propiedad CSS letter-spacing
• SUGERENCIA: Aumentar o disminuir el espaciado en tan sólo 1px puede producir una tipografía notablemente distinta.
• OTRA SUGERENCIA: Un mayor espaciado de letras de 2-3px puede hacer que los botones y encabezados realmente destaquen.

Transformación de texto

• Ejemplos
  :h1 {text-transform:mayúsculas;}h2
  {text-transform:mayúsculas;}p
  {text-transform:minúsculas;}
• Valores:
  • Ninguno: El texto se muestra como es normalmente
  • Capitalizar: Hace que la primera letra de cada palabra esté en mayúsculas
  • En mayúsculas: Hace que todos los caracteres estén en mayúsculas
  • En minúsculas: Hace que todos los caracteres sean en minúsculas
  • Heredar: Utiliza el valor text-transform del elemento padre
  • Propiedad de transformación de texto CSS
  • SUGERENCIA: Intente combinar las fuentes en mayúsculas con un mayor espaciado de letras en los botones y encabezados para obtener una distinción tipográfica interesante

5. Los errores más comunes en la tipografía Web

1. Usar la fuente equivocada

• Las fuentes son como las personas – tienen diferentes personalidades que a veces pueden chocar
• Muchas fuentes están sobreutilizadas y deben evitarse, como las Comic Sans y Papyrus
• Muchas fuentes están sobreutilizadas y siguen siendo útiles por una razón: Helvetica, Tahoma y Verdana

2. Usar un tamaño incorrecto

• Las fuentes diminutas en una página web dificultan la lectura para los ojos de las personas mayores.
• Una persona de 40 años trabaja el doble de duro de leer que una de 20 años. Un hombre de 60 años tiene que trabajar cuatro veces más duro.
• SUGERENCIA: Cuanto más difícil sea leer el texto, menos se leerá y menos se entenderá lo que se lee en realidad.

3. Usar el espaciado incorrecto

• Cuando se trata de tipografía, el espacio en blanco es su amigo.
• Los principiantes le temen al espacio en blanco. Quieren llenar cada hueco con algo.
• Aprender a aprovechar el espacio en blanco de manera efectiva es una herramienta de diseño poderosa.