Tipografía

Lección 06 de 37 · 3 min

La mayor parte de una página es texto. Cuatro propiedades deciden cómo se lee: el tamaño, el peso, el interlineado y el espaciado entre letras.

Tamaño y peso

El tamaño (font-size) define qué tan grande es la letra. El peso (font-weight) define qué tan gruesos son los trazos: 400 es normal y 700 es negrita.

Mové los controles y mirá cómo cambia el párrafo. Las franjas marcan cada línea, y la cota naranja del margen mide una: su alto es el tamaño por el interlineado, el mismo valor que aparece arriba.

font-family: Geistcada línea mide 27px de alto

Capítulo 3 · Interlineado

La voz del texto

La tipografía es la voz del texto. Un buen interlineado deja respirar cada línea: con poco, el ojo se pierde al saltar de renglón; con demasiado, el párrafo se desarma.

font-size

line-height

font-weight

letter-spacing

texto.css

.texto {
  font-size: 18px;
  line-height: 1.5; /* 27px */
  font-weight: 400;
  letter-spacing: 0em;
}

texto.html

<p class="text-lg leading-normal font-normal tracking-normal">
  La tipografía es la voz del texto. Un buen interlineado deja respirar cada línea: con poco, el ojo se pierde al saltar de renglón; con demasiado, el párrafo se desarma.
</p>

En el demo el tamaño va en píxeles para que sea fácil de leer, pero en código real conviene usar rem. 1rem es el tamaño de letra de la raíz, 16px por defecto, y respeta al lector que agranda la letra en su navegador.

Fuente estáticaTrae algunos pesos sueltos. Si pedís uno que no tiene, el navegador usa el más cercano.
Fuente variableComo Geist, acepta cualquier peso dentro de su rango, incluso valores intermedios como 450.

Interlineado

El interlineado (line-height) es el alto de cada línea. Escribilo sin unidad: 1.5 significa una vez y media el tamaño de letra del elemento. Así se hereda como proporción, y cada hijo lo recalcula con su propio tamaño.

Con unidad, el cálculo se hace una sola vez en el padre y los hijos heredan el resultado fijo. Con 1.5em en un body de 16px, el interlineado queda en 24px, y un título de 32px hereda esos 24px: sus líneas se pisan. Con 1.5, el título recalcula y obtiene 48px.

texto.css

1body {
2  font-size: 1rem;    /* 16px */
3  line-height: 1.5;   /* 24px */
4}
5
6h1 {
7  font-size: 2rem;    /* 32px */
8  line-height: 1.1;   /* 35.2px */
9}

Para párrafos, un interlineado entre 1.4 y 1.6 se lee cómodo. Los títulos tienen pocas líneas y letra grande, así que van más apretados, entre 1.1 y 1.25.

Espaciado y cortes de línea

El espaciado (letter-spacing) suma o resta aire entre letras. Escribilo en em para que acompañe al tamaño: 0.05em son 0.8px en un texto de 16px y 2px en uno de 40px.

En títulos grandes, un espaciado apenas negativo, como -0.02em, junta las letras que a ese tamaño se ven sueltas.
En texto chico o en mayúsculas, un espaciado positivo, entre 0.05em y 0.1em, separa las letras y mejora la lectura.

text-wrap decide dónde se corta cada línea. balance reparte el texto en líneas de largo parecido, ideal para títulos cortos. pretty evita que la última línea de un párrafo quede con una palabra sola.

styles.css

1h1,
2h2 {
3  letter-spacing: -0.02em;
4  text-wrap: balance;
5}
6
7p {
8  text-wrap: pretty;
9}

En Tailwind

Tailwind trae una escala para cada propiedad. Los tamaños text-* ponen el font-size y además un line-height propio; si sumás una clase leading-*, esa gana. Para tamaño e interlineado juntos está el atajo con barra: text-base/7 es 1rem de letra con 1.75rem de interlineado.

CSS	Tailwind
font-size: 1.125rem	text-lg
font-size: 1.375rem	text-[1.375rem]
line-height: 1.25 / 1.5 / 2	leading-tight / normal / loose
line-height: 1.35	leading-[1.35]
font-weight: 100 … 900 · 450	font-thin … font-black · font-[450]
letter-spacing: -0.025em / 0.1em	tracking-tight / tracking-widest
text-wrap: balance / pretty	text-balance / text-pretty

articulo.html

1<h1 class="text-4xl/[1.1] font-semibold tracking-[-0.02em] text-balance">
2  Tipografía que se lee sola
3</h1>
4<p class="text-base/7 font-[450] text-pretty">
5  Un buen interlineado deja respirar cada línea.
6</p>

Typography

Lesson 06 of 37 · 4 min

Most of a page is text. Four properties decide how it reads: the size, the weight, the line height and the spacing between letters.

Size and weight

The size (font-size) sets how big the letters are. The weight (font-weight) sets how thick the strokes are: 400 is normal and 700 is bold.

Move the controls and watch the paragraph change. The bands mark each line, and the orange mark in the margin measures one: its height is the font size times the line height, the same value shown on top.

font-family: Geisteach line is 27px tall

Chapter 3 · Line height

The voice of the text

Typography is the voice of the text. Good line height lets each line breathe: too little and the eye loses its place between lines; too much and the paragraph falls apart.

font-size

line-height

font-weight

letter-spacing

text.css

.text {
  font-size: 18px;
  line-height: 1.5; /* 27px */
  font-weight: 400;
  letter-spacing: 0em;
}

text.html

<p class="text-lg leading-normal font-normal tracking-normal">
  Typography is the voice of the text. Good line height lets each line breathe: too little and the eye loses its place between lines; too much and the paragraph falls apart.
</p>

The demo uses pixels so the size is easy to read, but in real code prefer rem. 1rem is the root font size, 16px by default, and it respects readers who make the text larger in their browser.

Static fontShips a few separate weights. If you ask for one it doesn't have, the browser uses the closest one.
Variable fontLike Geist, it accepts any weight within its range, even in-between values like 450.

Line height

The line height (line-height) is the height of each line. Write it without a unit: 1.5 means one and a half times the element's font size. That way it's inherited as a ratio, and each child works it out again from its own font size.

With a unit, the math happens once on the parent and the children inherit the fixed result. With 1.5em on a 16px body, the line height comes out at 24px, and a 32px heading inherits those 24px: its lines overlap. With 1.5, the heading works it out again and gets 48px.

text.css

1body {
2  font-size: 1rem;    /* 16px */
3  line-height: 1.5;   /* 24px */
4}
5
6h1 {
7  font-size: 2rem;    /* 32px */
8  line-height: 1.1;   /* 35.2px */
9}

For paragraphs, a line height between 1.4 and 1.6 reads comfortably. Headings have few lines and large letters, so they go tighter, between 1.1 and 1.25.

Spacing and line breaks

The spacing (letter-spacing) adds or removes room between letters. Write it in em so it follows the size: 0.05em is 0.8px on 16px text and 2px on 40px text.

On large headings, a slightly negative spacing, like -0.02em, pulls together letters that look loose at that size.
On small text or capitals, a positive spacing, between 0.05em and 0.1em, sets the letters apart and makes them easier to read.

text-wrap decides where each line breaks. balance spreads the text over lines of similar length, ideal for short headings. pretty keeps the last line of a paragraph from ending with a single word.

styles.css

1h1,
2h2 {
3  letter-spacing: -0.02em;
4  text-wrap: balance;
5}
6
7p {
8  text-wrap: pretty;
9}

In Tailwind

Tailwind ships a scale for each property. The text-* sizes set the font-size plus a line-height of their own; if you add a leading-* class, that one wins. For size and line height together there's the slash shorthand: text-base/7 is 1rem text with a 1.75rem line height.

CSS	Tailwind
font-size: 1.125rem	text-lg
font-size: 1.375rem	text-[1.375rem]
line-height: 1.25 / 1.5 / 2	leading-tight / normal / loose
line-height: 1.35	leading-[1.35]
font-weight: 100 … 900 · 450	font-thin … font-black · font-[450]
letter-spacing: -0.025em / 0.1em	tracking-tight / tracking-widest
text-wrap: balance / pretty	text-balance / text-pretty

article.html

1<h1 class="text-4xl/[1.1] font-semibold tracking-[-0.02em] text-balance">
2  Typography that reads itself
3</h1>
4<p class="text-base/7 font-[450] text-pretty">
5  Good line height lets each line breathe.
6</p>