La tipografía es un campo que se ocupa de la palabra escrita y cómo se presentan las letras y los caracteres.
Las mismas letras se pueden diseñar de diferentes maneras para transmitir diferentes emociones. Y hay todo tipo de compensaciones entre el estilo y la legibilidad.
En este artículo, veremos algunos de los detalles más pequeños, pero aún importantes, relacionados con la tipografía, como el tamaño en puntos, las letras mayúsculas y minúsculas, los guiones em contra en, el kerning y más.
Tamaño de punta
El tamaño en puntos es una forma de introducir la estandarización de la tipografía. El tamaño del punto es la unidad de medida más pequeña.
En la tipografía metálica, el tamaño en puntos se refiere a la altura del cuerpo metálico sobre el que se emite el carácter de una tipografía. En los tipos de letra digitales, el cuerpo de metal se reemplaza por una caja invisible conocida como cuadrado em . Cada carácter cabe dentro de ese cuadro em cuadrado o em cuadro. El tamaño em de una fuente es igual a su tamaño en puntos.
html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }El tamaño en puntos también se utiliza para medir el interlineado (altura de línea), la longitud de la línea y otros elementos, además del tamaño de fuente.
En los tipos de letra digitales, un punto equivale a 1/72 de pulgada . Doce puntos hacen una pica. Seis picas hacen una pulgada. Una forma común de representar picas y puntos es la siguiente:
- 1 pica = 1p
- 1 punto = 1 ptos o p1
- 6 picas y 3 puntos = 6p3
- Open Sans de 7 puntos con 9 puntos de liderazgo = 7/9 Open Sans
El tamaño de punto óptimo para imprimir suele estar entre 10-12 puntos, mientras que para la web, el tamaño de punto óptimo está entre 15-25 puntos.
En CSS, debe establecer el tamaño de fuente en ems o rems en lugar de píxeles, ya que los primeros son escalables por naturaleza. Recientemente, se ha hablado mucho sobre la tipografía fluida utilizando las unidades vw y vh recién introducidas.
Obtenga más información al respecto aquí: Tipografía fluida
Recuerde, las diferentes fuentes colocadas en el mismo tamaño de punto no parecerán tener el mismo tamaño debido a sus características individuales, a saber, altura x, modulación de trazo o contraste y ancho de carácter.
Mayúsculas y minúsculas
Las mayúsculas (UC) también se conocen como mayúsculas y capital. Es una tipografía de caracteres más grandes. Minúsculas (LC) es un tipo de letra de caracteres pequeños. Mientras no se presione la tecla de mayúsculas y el bloqueo de mayúsculas no esté activo, todo lo que se escriba está en minúsculas. Mayúscula y minúscula es a menudo sinónimo de mayúscula y minúscula.
Muchos idiomas tienen dos representaciones escritas diferentes de sus letras, mayúsculas y minúsculas , también conocidas como formas mayúsculas y minúsculas.
Las letras mayúsculas y minúsculas a menudo se mezclan en el mismo texto. El uso de casos se decide por la gramática, pero también existe una variedad de estilos de casos. Ciertos estilos de casos son comunes en la programación de computadoras, conocidos como convenciones de nomenclatura, como CamelCase y snake_case.
Mayúsculas:
ABCDEFGHIJKLMNOPQRSTU VWXYZ
Minúscula:
ABCDEFGHIJKLMNOPQRSTU VWXYZ
La capitalización es importante por las siguientes razones:
- Contraseñas: las contraseñas distinguen entre mayúsculas y minúsculas, por lo que las mayúsculas añaden un nivel adicional de seguridad.
- Medidas: cuando se trata de medidas informáticas y otras medidas, las mayúsculas son importantes para identificar el tipo exacto de medida. Por ejemplo, “Mb” (abreviatura de Megabit) y “MB” (abreviatura de Megabyte) son dos tipos diferentes de medidas con valores diferentes.
- Comandos
- Nombres de archivos, directorios y rutas.
Ems y Ens
Ems y Ens son una forma del signo de puntuación llamado "guión". Aunque son similares en apariencia a un guión, tienen diferentes propósitos.
Guión largo
Utilice un guión Em para indicar una ruptura en la oración. Sustitúyelo por una coma o para indicar una pausa en una oración. También se utilizan para atribuir una cita a un orador. Un guión Em es un em de ancho: el ancho del tamaño de un punto de una tipografía. No ponga ningún espacio antes y después de un guión.
Por ejemplo: el ruido de la casa del vecino, me está matando.
- Comando para un guión Em en una Mac: Mayús-Opción-Guión
- Comando para un guión Em en Microsoft Word: Alt + Ctrl + (menos)
- Em dash en HTML:
—o—
En Dash
Use un guión En como reemplazo de la palabra 'a' o para denotar un rango de números. Un guión En es la mitad del ancho de un guión Em. No ponga ningún espacio antes y después de un guión.
Por ejemplo: la Primera Guerra Mundial duró de 1914 a 1918.
- Comando para un guión En en una Mac: Opción-Guión
- Comando para un guión En en Microsoft Word: Ctrl + (menos)
- En guión en HTML:
–o–
Kerning y seguimiento
Kerning se refiere al espaciado entre dos caracteres individuales dentro de una palabra.
El seguimiento se refiere al espacio entre palabras.
Algunos tipos de letra no están diseñados para ser interletrados o rastreados de forma demasiado flexible y viceversa. Si un kerns o pistas demasiado apretado o demasiado flojo, corren el riesgo de sacrificar la legibilidad y la legibilidad.
A la hora de decidir qué tan ajustado o flexible es el kern o el seguimiento de su texto, es aconsejable considerar primero la escala a la que interactuará con el texto. Si se va a imprimir, ¿a qué distancia del texto impreso estará el espectador? ¿Pasarán por ahí? ¿Se leerá en una pantalla retroiluminada?
También se deben considerar los aspectos positivos y negativos al realizar el seguimiento y el interletraje. Un seguimiento demasiado estrecho o demasiado flojo puede resultar en relaciones incómodas entre la figura y el suelo que distraerán al usuario.
Legibilidad y legibilidad
Legibilidad
La legibilidad significa poder diferenciar diferentes caracteres en un texto. El texto legible implica que se puede interpretar fácilmente. Observe las características únicas de un tipo de letra al considerar la legibilidad. Algunas de las consideraciones son las siguientes:
- Debe utilizar cada tipo de letra de acuerdo con su contexto y uso previsto . Mire su historial y sus mejores escenarios de casos de uso. Por ejemplo: Garamond se usa mejor para grandes cuerpos de texto en impresión, mientras que Georgia para pantalla.
- Tenga en cuenta si el tipo de letra es para mostrar texto o texto del cuerpo .
- La altura x de un tipo de letra es el tamaño de la 'x' minúscula en un tipo de letra. Un tipo de letra con una altura x media a alta da como resultado un texto legible incluso en tamaños pequeños.
- Convencionalmente, los tipos de letra serif son más legibles para el texto del cuerpo que sus contrapartes sans-serif.
Legibilidad
La legibilidad significa organizar un grupo de palabras o un bloque de texto de tal manera que el texto sea más accesible. La idea es reducir la cantidad de esfuerzo requerido para leer un cuerpo de texto.
Stephen Coles comenta que la legibilidad no solo plantea la pregunta de "¿Puedes leerlo?" pero si "quieres leerlo?" .
Jason Santa Maria señala en su libro On Web Typography que la lectura no es una actividad lineal. Leemos en un movimiento hacia adelante y hacia atrás llamado sacadas , que consiste en que nuestros ojos saltan de un punto a otro. Además, el texto con palabras familiares nos facilita la lectura. Algunos puntos básicos para recordar al considerar la legibilidad son los siguientes:
- El contraste se refiere al cambio en el grosor del trazo en diferentes partes de la letra. Cuanto mayor sea el contraste, mayor será el cambio de trazo. Utilice tipos de letra de contraste medio a bajo para textos largos.
- Altura de línea se refiere a la distancia entre dos líneas de texto. No desea que el bloque de texto sea ni demasiado apretado ni demasiado suelto. Puede controlar la altura de la línea en CSS mediante la propiedad 'line-height'. Para la mayoría de los textos, puede configurarlo entre 1,2 y 1,5 (sin unidades).
- La longitud de línea (medida) se refiere al número promedio de caracteres en una línea de texto. Una línea de gran longitud dificulta la legibilidad al dificultar que nuestros ojos escaneen el texto. Por lo general, unos 45-75 caracteres por línea son óptimos para un cuerpo de texto. Si planea aumentar la longitud de la línea más allá de eso, también tenga cuidado de aumentar la altura de la línea para que haya suficiente espacio entre dos líneas de texto. En CSS, puede establecer el ancho del contenedor y, al usar la unidad em, puede acercarse a un número establecido de caracteres, dependiendo de la relación ancho-alto de la fuente. Ejemplo: ancho: 35em;
- El seguimiento se refiere a ajustar el espacio entre caracteres en un texto. Agregar seguimiento significa agregar espacios en blanco entre los caracteres y viceversa. En tamaños de fuente pequeños, es decir, menos de 10 puntos, agregar seguimiento ayuda a mejorar la legibilidad. Del mismo modo, para títulos grandes, utilice el seguimiento negativo para acercar las letras. Puede controlar el seguimiento en CSS a través de la propiedad de 'espacio entre letras'. Por ejemplo: espaciado entre letras: 0.05em;
- El tamaño de fuente se refiere al tamaño de la fuente utilizada en un texto. Para la visualización en dispositivos móviles, utilice tamaños de al menos 12 píxeles. Puede controlar el tamaño de fuente en CSS a través de la propiedad 'font-size'. Ejemplo: tamaño de fuente: 48px;
Como puede ver, debe tener en cuenta muchos factores para garantizar una legibilidad y legibilidad óptimas. Recuerde, no existen reglas estrictas y rápidas para ninguno de los factores descritos anteriormente. Son meras pautas que pueden ayudarlo a entrenar mejor su ojo tipográfico.
Color y valor tonal
En la teoría del color, se produce un valor tonal agregando blanco, gris o negro a un color seleccionado. Esto no cambia el tono, pero sí altera el colorido, también conocido como saturación. Al discutir el valor tonal, hay tres términos principales que deben discutirse: Tinte, Tono y Sombra.
El tinte es la adición de blanco a un color. El tinte se puede utilizar para resaltar un área y también para comenzar a crear la ilusión de profundidad en un objeto.
El tono es la adición de gris a un color. El color tonal crea un color más apagado y menos saturado.
La sombra es la adición de negro a un color. La sombra se puede utilizar para oscurecer y el área para crear la ilusión de profundidad en un objeto.
Al alterar el valor tonal de un color, puede crear la ilusión de profundidad en las imágenes, así como alterar el nivel de saturación para aplicar mejor el color para una emoción o estado de ánimo deseados.
Más sobre tipografía:
- Tipografía: anatomía de las letras
- Cuadrícula de 8 puntos: tipografía en la web
- Por qué la tipografía puede hacer o deshacer su diseño