50 términos tipográficos que todo diseñador web debe conocer (y comprender)

El mundo de la tipografía está repleto de decenas  de términos técnicos . Si bien pueden ser un poco confusos e intimidantes la primera vez que los ve, detrás de este vocabulario técnico se encuentra el conocimiento que puede mejorar la legibilidad y la apariencia de cualquier sitio web.

Para ayudarlo a absorber parte de este conocimiento útil, esta publicación cubrirá 50 términos tipográficos esenciales que todo diseñador web debe saber.

1. Interletraje



Kerning describe el espacio entre letras individuales en una fuente.
A diferencia del seguimiento, que agrega la misma cantidad de espacio entre cada letra, el interletraje varía entre diferentes pares de letras.

El interletraje es importante para el diseño web porque puede afectar sutilmente la forma en que las personas perciben el texto. Si el interletraje está desactivado, algunas letras pueden parecer demasiado juntas o demasiado separadas.

2. Seguimiento



Cambiar el seguimiento significa cambiar uniformemente el espaciado entre letras en una fuente.

Si necesita que su texto llene más completamente un espacio determinado (como un botón), un aumento en el seguimiento puede ser la solución.

3. Liderando



El interlineado describe la cantidad de espacio vertical entre líneas de texto.

La cantidad correcta de interlineado ayuda a que el ojo del lector se mueva suavemente por la página, lo que mejora la legibilidad.

4. Glifo

Imagen de Artoptimum / shutterstock.com

Un glifo es la unidad más pequeña en una fuente que tiene algún significado. Los glifos incluyen letras, números, puntuación y otros caracteres.

Si planea diseñar un sitio web que muestre texto en otros idiomas además del inglés, debe asegurarse de que el tipo de letra que elija tenga todos los glifos que necesitará.

5. Serif

Imagen de Irmy / shutterstock.com

Una serifa es una pequeña línea que aparece al final de un trazo en un carácter. En tipografía, generalmente lo escuchará para describir una fuente serif.

Tradicionalmente, las fuentes serif se utilizan para el cuerpo del texto, especialmente en la impresión. En consecuencia, usar fuentes serif para el cuerpo del texto de su sitio web es una buena decisión si desea que su sitio evoque la página impresa.

6. Sans Serif

Imagen de aiym design / shutterstock.com

Sans-serif describe un carácter sin serifas.

Estas fuentes funcionan muy bien para encabezados, ya que su calidad directa capta la atención del lector. Contrastar una fuente sans-serif con una fuente serif es un principio clave del emparejamiento de fuentes .

7. Fuente

Imagen de Hari Syahputra / shutterstock.com

También conocida como ‘tipo de letra’, la fuente es un término amplio que abarca el estilo, el tamaño y el peso del texto. Ejemplos de fuentes conocidas incluyen la fuente sans-serif Arial y la fuente serif Times New Roman.

Su elección de fuente influye en la forma en que los lectores perciben su sitio web. Diferentes fuentes tienen diferentes personalidades, por lo que tienen un efecto sutil (pero significativo) en la forma en que los lectores experimentan su mensaje.

8. Familia de fuentes

Imagen de Sashatigar / shutterstock.com

Una familia de fuentes es un grupo de fuentes que contienen glifos con características similares. Una familia de fuentes puede ser tan amplia como serif frente a sans-serif, o dividirse en estilo antiguo frente a moderno, por ejemplo.

El uso de diferentes familias de fuentes es una manera fácil de agregar contraste entre los encabezados y el cuerpo del texto.

9. Tamaño del punto

Imagen de MaluStudio / shutterstock.com

El tamaño en puntos es el valor numérico que describe el tamaño relativo de una fuente. Por ejemplo, si una fuente es Times New Roman 12, el ’12’ describe el tamaño en puntos.

Elegir el tamaño de punto correcto es una de las cosas más simples que puede hacer para mejorar la legibilidad de una página web.

10. Peso

El peso de la fuente se refiere al grosor relativo del texto. Una fuente de peso muy ligero puede denominarse ‘ligera’ o ‘delgada’, mientras que una fuente de peso relativamente pesado puede denominarse ‘negrita’, ‘pesada’ o ‘negra’.

Las fuentes varían en la cantidad de pesos que ofrecen y elegir el peso de fuente correcto es esencial para que la copia de su sitio sea fácil de leer.

11. romano



Roman describe una fuente en su apariencia «normal», en lugar de cursiva o negrita.

Querrás usar una fuente romana para la mayoría de la copia de tu página web, ya que es más cómoda de leer que la cursiva o la negrita.

12. cursiva



La cursiva describe una fuente que tiene una apariencia inclinada y cursiva.

Debe usar cursiva con moderación cuando escriba una copia del sitio web para que el énfasis que agregan sea aún más poderoso.

13. Negrita

Bold describe una fuente que es más oscura y pesada que su versión romana.

Al igual que la cursiva, debe usar fuentes en negrita con moderación en su tipografía web.

14. Línea base

La línea de base es una línea invisible donde se sientan todos los personajes.

Baseline nos brinda un marco de referencia para analizar otras partes de la tipografía, como los descendientes y la altura de la x.

15. Línea de tapa

La línea de mayúsculas es el límite superior invisible para las letras mayúsculas en una fuente.

Al igual que la línea de base, la línea superior es importante para analizar partes de la tipografía, como los ascendentes.

16. Línea media

La línea media es el punto a mitad de camino entre la línea base y la línea superior.

La línea media también es un concepto importante para hablar de ascendentes.

17. Altura X

La altura X es la altura de la letra x  en una fuente determinada.

X-height proporciona una métrica para describir qué tan ‘alta’ o ‘corta’ es una fuente.

18. Accidente cerebrovascular



Un trazo es cualquiera de las líneas que componen una letra.

La forma en que termina un trazo determina si una fuente es serif o sans-serif.

19. Tallo

Una raíz es el trazo principal de una letra y, a menudo, es vertical.

20. Trazo cruzado

Un trazo cruzado es un lugar donde un trazo cruza la raíz de una letra, como en minúsculas f o t . Un trazo cruzado es similar a un brazo, pero diferente en que el trazo atraviesa completamente la letra mientras que un brazo no lo hace.

21. Descensor

Un descensor es cualquier golpe que va por debajo de la línea de base. Las minúsculas g, j, q, y y p son letras con descendientes.

22. Ascendente

Un ascendente es cualquier trazo que va por encima de la altura x. Por ejemplo, las minúsculas b, f, d, k, l y h son las letras con ascendentes.

23. Línea ascendente

Una línea ascendente es una parte de un glifo que se extiende por encima de la altura x de la fuente. Por ejemplo, la raíz en la letra h .

24. Ligadura

Imagen de Vaniatka / shutterstock.com

Una ligadura describe dos o más letras combinadas en un glifo. Por ejemplo, æ.

Si su sitio va a mostrar texto que requiere ligaduras, debe asegurarse de elegir un tipo de letra que las admita.

25. Articulación

El punto donde un trazo se conecta a un tallo se llama articulación.

26. Vértice

Un vértice es donde dos trazos se encuentran en la parte inferior de un glifo, como en las letras v y w .

27. Ápice

Un ápice ocurre cuando dos trazos se encuentran en la parte superior de un glifo, como en la letra A.

28. entrepierna

La entrepierna es el ángulo formado donde dos trazos se encuentran dentro de un glifo, como el ángulo interior de la letra y .

29. hombro



Un hombro es un trazo que hace una forma de ‘arco’ dentro de un glifo.
Por ejemplo, en las letras
n, m y h.

30. brazo

Un brazo es un trazo horizontal largo en un glifo, como la parte superior de las letras E, F y T y la parte inferior de L.

31. barra

Una barra es un trazo horizontal corto en un glifo, como el centro de las letras f, A, y t.

32. Tazón

Un cuenco es un trazo curvo y cerrado en un glifo. Por ejemplo, en las letras b, d y o.

33. terminal

El terminal es el final de cualquier trazo sin serifa y, a menudo, tiene una forma esférica o cónica.

Los terminales ingeniosos son una forma de agregar interés a una fuente sans-serif.

34. Contador

Contador se refiere al espacio negativo dentro de los glifos, como el medio de la letra O , por ejemplo.

Un conocimiento adecuado de los contadores le ayuda a ajustar mejor el interletraje, el interlineado y el seguimiento.

35. Apertura

La apertura es el espacio que crea un contador abierto dentro de un carácter, como entre los dos terminales en la letra C.

36. chapuzón

Un swash es un trazo añadido a un glifo para decoración y embellecimiento.

Si desea darle al texto una apariencia ornamentada y elegante, un par de caracteres bien colocados a menudo serán la solución.

37. Arco de tallo

Arco de tallo se refiere a un trazo curvo continuo con un tallo recto. Por ejemplo, la parte inferior de las letras t, f, a, u y j .

38. diacrítico

Un diacrítico es una marca añadida a una letra para especificar un acento o pronunciación específicos. Por ejemplo, la letra final en Brontë o la segunda letra en césped  .

La mayoría de las fuentes comunes incluyen glifos con signos diacríticos, pero vale la pena revisarlos para estar seguro de que estos caracteres se mostrarán correctamente en su sitio web.

39. Fuente de texto

Imagen de d1sk / shutterstock.com

La fuente de texto se refiere a una categoría de fuentes diseñadas para funcionar mejor en tamaños más pequeños. Las fuentes de esta categoría son una opción ideal para el cuerpo del texto.

40. Fuente de visualización

La fuente de visualización se refiere a un tipo de fuente hecha para ser leída en tamaños grandes. Son muy adecuados para títulos y subtítulos.

41. Color tipográfico

El término color tipográfico se refiere a la relativa claridad y oscuridad de los bloques de texto en una página cuando entrecierras los ojos.

Al diseñar un sitio web, asegúrese de que haya suficiente diferencia entre los colores tipográficos de sus encabezados y el cuerpo del texto.

42. Contraste

El contraste es la diferencia percibida en apariencia entre las fuentes. El contraste es específico del contexto, pero las formas comunes de contrastar las fuentes incluyen el tamaño, el peso, la familia y el estado de ánimo.

En lo que respecta al diseño web, el contraste adecuado entre las fuentes en la copia de su página hace que el texto sea más fácil de leer.

43. Copia del cuerpo

El cuerpo del texto es la parte principal de un texto, a diferencia de los títulos o subtítulos.

Debe tener especial cuidado al elegir una fuente atractiva y de fácil lectura para el cuerpo del texto, ya que es lo que un lector de su sitio web pasará la mayor parte del tiempo mirando.

44. Encabezado

El título se refiere al texto que define las diferentes secciones de una página web. El encabezado suele tener una fuente y un tamaño diferentes a los del cuerpo del texto para que la distinción quede clara.

Los encabezados adecuados son esenciales para dividir el texto que es más largo que un par de párrafos, o cuando desea hacer una distinción clara entre las partes de un artículo.

45. Subtítulo

Al igual que los títulos, los subtítulos también dividen secciones de una página o artículo. Como implica la parte «sub» de su nombre, son más pequeños que los encabezados y aparecen debajo de ellos.

Para artículos o páginas muy largos, los subtítulos son útiles para crear más divisiones dentro de las secciones ya separadas por títulos.

46. ​​Guión

Una línea horizontal pequeña y estrecha que hace lo siguiente:

  • Crea palabras compuestas (“en-dash”, por ejemplo).
  • Agrupa números (como en un número de teléfono).
  • Conecta dos partes de una palabra que se dividen en una línea (más común en letra impresa).

Su teclado incluye una tecla para este carácter.

47. En-Dash

Un guión es una línea horizontal que tiene aproximadamente el mismo ancho que la N mayúscula en una fuente. Un en-dash hace lo siguiente:

  • Conecta números que se refieren a un rango de tiempo (1994–2016).
  • Conecta palabras que se refieren a un rango de tiempo (febrero-junio de 2016).

WordPress representa automáticamente este carácter cuando escribe dos guiones entre dos palabras o números.

48. Em-Dash

Un guión largo es una línea horizontal que tiene aproximadamente el mismo ancho que la M mayúscula . Un em-dash hace lo siguiente:

  • Separa una idea única pero relacionada del resto de una oración (similar a las comas).
  • Separa un pensamiento insertado del resto de una oración (similar a los paréntesis).

Cuando escribe tres guiones entre palabras, WordPress los convierte automáticamente en un guión largo. Por ejemplo, «La tipografía puede ser confusa, es suficiente para disuadir a algunas personas del diseño, pero comprenderla es crucial».

49. Alineación

La alineación describe la posición del texto en relación con el margen (ya sea de una página, pantalla u otra división del texto).

En WordPress, hay tres alineaciones posibles:  Alinear a la izquierda, Alinear al centro Alinear a la derecha. La alineación a la izquierda es la predeterminada y se adapta al texto en cualquier idioma que se lea de izquierda a derecha.

50. Justificado

Imagen de Proyectos de ilustración / shutterstock.com

Justificado describe el texto que está alineado de modo que sus bordes izquierdo y derecho estén alineados con los márgenes izquierdo y derecho.

Debido a que es el estándar para la mayoría de los libros impresos, el texto justificado es una buena opción de formato para usar si está creando un sitio con una estética similar.

Conclusión

El vocabulario técnico utilizado para describir la tipografía incluye conceptos que son fundamentales para un buen diseño web.

Poseer una comprensión sólida de estos términos tipográficos clave le permite:

  1. Diseña sitios web más legibles.
  2. Influir en el estado de ánimo de los lectores.
  3. Enfatiza tu contenido más importante.

¿Cómo utilizas tus conocimientos de tipografía para mejorar tus diseños web? ¡Nos encantaría que nos lo hicieras saber en la sección de comentarios a continuación! Y no olvides suscribirte a los comentarios para no perderte la discusión.

Imagen en miniatura del artículo de Alhovik / Shutterstock.com