rem, px e em

As três unidades de medida que você vai usar. px é fixo, rem escala com a preferência do usuário.

Também aparece como "unidade", "pixel", "font-size", "unidades relativas".

No mundo do Design

O Figma chama isso de Tamanho de fonte

px é o pixel. Fixo, previsível, é o que o Figma mostra
rem é relativo ao tamanho de fonte base do navegador, que por padrão é 16px. Então 1rem = 16px, 1.5rem = 24px
em é relativo ao tamanho de fonte do próprio elemento, o que o torna traiçoeiro quando aninha

.titulo {
  font-size: 2rem;      /* 32px por padrão */
  margin-bottom: 1rem;  /* 16px por padrão */
}

Por que rem em vez de px

Quem aumenta a fonte padrão do navegador (e muita gente aumenta, principalmente acima dos 40) muda o valor do rem junto. O texto cresce, o layout acompanha. Com px cravado, nada acontece e a pessoa fica com a interface minúscula que você escolheu.

Regra prática: rem pra tudo que é texto e espaçamento. px pra borda, sombra e detalhe que não deve escalar.

A conta de cabeça

Divida por 16. 24px vira 1.5rem, 12px vira 0.75rem, 40px vira 2.5rem. Se a sua escala de espaçamento no Figma é múltipla de 8, os valores em rem caem redondos e a conversa com o dev fica curta.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.