Pular para o conteúdo

A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

Maiyu Academy

Módulo 2: Caixa, tipo e espaço

Tipografia: a abertura e o selo do portfólio

O texto que se lê no celular, com dado contado

A fila de fontes

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Não é uma fonte: é uma fila. O navegador tenta a primeira; se o aparelho não a tiver, passa para a seguinte. A última deve ser sempre genérica - sans-serif, serif ou monospace -, que todo sistema tem.

system-ui usa a fonte do próprio sistema: San Francisco no iPhone, Roboto no Android, Segoe no Windows. Não baixa nada, aparece instantaneamente, e é justamente a fonte que aquela pessoa já está acostumada a ler.

A segunda família: a monoespaçada

Um portfólio tem duas vozes tipográficas, e a segunda é a mono:

:root {
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

Ela serve ao selo ("DISPONÍVEL PARA PROJETOS"), ao ano de cada projeto, ao rótulo de cada seção e aos números da ficha técnica. É o que faz um portfólio de pessoa que programa parecer feito por quem programa - sem escrever isso em nenhum lugar.

Os campos de formulário não herdam

input,
select,
textarea,
button {
  font: inherit;
}

Uma linha, e ela conserta o formulário de contato inteiro. Sem ela, os campos aparecem na fonte padrão do navegador - miúda, cinza e diferente do resto da página -, e num portfólio de fundo escuro isso é a mancha mais visível da tela.

Tamanho

body {
  font-size: 1rem; /* 16px, e acompanha a preferência da pessoa */
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
small {
  font-size: 0.875rem;
}

16px é o piso para texto corrido. Não é opinião: é o padrão do navegador, e abaixo dele o celular chega a dar zoom sozinho quando a pessoa toca num campo de formulário; o que desloca a página inteira.

O nome da abertura, que cresce com a tela

O <h1> da página inicial é o elemento mais visível do portfólio inteiro. Ele não pode ter tamanho fixo: 6rem esmaga a tela do celular, e 2rem some no monitor.

.abertura h1 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}

clamp() recebe três valores: piso, preferido e teto. Aqui o nome mede 8% da largura da tela, mas nunca menos de 2,5rem nem mais de 6rem. Nenhuma media query envolvida.

Título grande pede letras mais juntas (letter-spacing negativo) e linhas mais próximas (line-height abaixo de 1). É a regra que faz um nome de duas linhas parecer um bloco em vez de duas frases soltas.

Altura de linha

body {
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

Sem unidade de propósito: 1.6 quer dizer "1,6 vez o tamanho da fonte daquele elemento". Com line-height: 24px, um título de 32px ficaria com as linhas sobrepostas.

Texto corrido pede entre 1.5 e 1.7. Título, sendo curto e grande, pede menos.

Largura da linha

.prosa {
  max-width: var(--medida); /* 65ch */
}

A tipografia recomenda entre 45 e 75 caracteres por linha. Acima disso, o olho erra o retorno e a pessoa relê a mesma linha: cansa, e ela para de ler.

ch é a largura do caractere "0" da fonte em uso, o que torna a conta direta.

O selo, letra por letra

Aquele rótulo pequeno em maiúsculas que abre cada seção - "SOBRE", "PROJETOS SELECIONADOS", "DISPONÍVEL PARA PROJETOS" - é tipografia pura:

.selo {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--suave);
}

Quatro decisões, e cada uma tem motivo: mono para separar da voz do texto, pequena para não competir com o título, maiúscula para virar rótulo, e espaçada porque letras maiúsculas coladas ficam ilegíveis em tamanho pequeno.

No HTML, escreva em minúsculas:

<p class="selo">Disponível para projetos</p>

text-wrap, duas linhas que valem por muito

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

balance distribui as palavras de um título entre as linhas em vez de deixar uma palavra sozinha na última. pretty evita a linha órfã no fim de um parágrafo. Nos dois casos, o navegador que não conhece a propriedade ignora e tudo continua funcionando.

Um conjunto completo

:root {
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.25rem;
  --titulo-3: 1.5rem;
  --titulo-2: clamp(1.75rem, 4vw, 2.5rem);
  --titulo-1: clamp(2.5rem, 8vw, 6rem);
}

body {
  font-family: var(--fonte);
  font-size: var(--texto-md);
  line-height: 1.6;
  color: var(--tinta);
}

h1 {
  font-size: var(--titulo-1);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}

h2 {
  font-size: var(--titulo-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  margin-block: 0 var(--espaco-3);
}

/* Bloco de código: fonte mono e rolagem própria */
pre {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  overflow-x: auto;
  padding: var(--espaco-3);
  background: var(--superficie);
  border-radius: var(--raio);
}

O overflow-x: auto no <pre> é importante: uma linha de código longa demais rola dentro do bloco em vez de esticar a página inteira para os lados. Se o seu portfólio mostra trechos de código, é a linha que evita a rolagem horizontal no celular.

No portfólio

A abertura passa a funcionar:

  • as duas famílias declaradas no :root, e font: inherit nos campos;
  • a escala de tamanhos com clamp() no <h1> e no <h2>;
  • line-height 1.6 no corpo e 0.95 no nome;
  • .prosa com max-width: var(--medida) na biografia e nas descrições;
  • a classe .selo na frase de situação e no rótulo de cada seção;
  • text-wrap: balance nos títulos e pretty nos parágrafos.

Depois faça o teste dos dez segundos: abra a página inicial no celular e conte quanto tempo alguém leva para saber quem você é e o que você faz. Se o nome não for a primeira coisa que a pessoa lê, a hierarquia de tamanho está errada.

Exercícios

  1. Declare as duas famílias em variáveis e aplique font: inherit nos campos do formulário.
  2. Escreva o <h1> da abertura com clamp() e redimensione a janela devagar, do celular ao monitor.
  3. Ajuste o line-height do corpo para 1.6 e o do nome para 0.95. Leia antes e depois.
  4. Escreva a classe .selo e aplique-a nos rótulos de seção. Depois tire o letter-spacing e compare.
  5. Limite a biografia a 65ch e abra numa tela larga. Conte as letras de uma linha antes e depois.
  6. Estilize <pre> com fonte mono e overflow-x: auto, e teste com uma linha bem longa no celular.

Referências

Testa o que você leu

6 perguntas sobre esta aula. Errar aqui não custa nada - a explicação vem junto da correção.

Pergunta 1 de 6
Por que `font-family` recebe uma lista, e não um nome só?