Combinar tipos de letra – testa fontes para títulos e texto

Q: Que caracteres estão incluídos?

A pré visualização carrega o subconjunto latin, que cobre o português por completo ã, õ, ç, acentos agudos, graves e circunflexos , bem como o inglês, o francês e a maioria das línguas da Europa Ocidental, com œ, « » e o símbolo do euro. Quando o tipo de letra os tem e o teu texto precisa deles, carrega também os subconjuntos latin ext letras da Europa Central como č, ł, ő, ț , cirílico e grego. Os tipos de letra sem esse subconjunto mostram essas letras no tipo alternativo: Lato, Work Sans e Space Grotesk não têm cirílico, e só Inter, Roboto, Open Sans, Source Serif 4 e Fira Code têm grego. Nenhum dos 20 tipos de letra tem letras árabes.

Combinações de tipos de letra

Pré-visualiza combinações de tipos de letra para títulos e texto com 20 fontes de licença aberta, ajusta tamanho e entrelinha e copia o CSS font-family.

Pares sugeridos

Tipo de letra dos títulos Tipo de letra do texto

Tamanho dos títulos Tamanho do texto Altura da linha Peso dos títulos Fundo escuro

Texto do título Texto do corpo

Pré-visualização

Código CSS

Alojamento próprio com Fontsource

Instala os pacotes npm e importa só os pesos que usas. Os tipos de letra passam a ser servidos pelo teu próprio site, sem CDN de fontes.

Como usar a ferramenta de combinações de tipos de letra

Começa por um dos Pares sugeridos (Editorial, Blogue moderno, Página de destino, Notícias, Elegante, Revista de tecnologia, Livro, Clássico, Documentação, Divertido). Cada botão mostra o tipo de letra dos títulos e o do texto que aplica.
Ou escolhe tu o Tipo de letra dos títulos e o Tipo de letra do texto. As listas estão agrupadas em tipos sem serifa, com serifa, display, monoespaçados e manuscritos. Trocar tipos de letra troca os dois.
Ajusta o Tamanho dos títulos, o Tamanho do texto e a Altura da linha, e escolhe o Peso dos títulos (Negrito (700) ou Normal (400)). Marca Fundo escuro para veres o par em modo escuro.
Substitui o Texto do título e o Texto do corpo pelas tuas próprias palavras: um título e um parágrafo reais dizem-te muito mais do que um pangrama. Deixa uma linha em branco entre parágrafos.
Copia o Código CSS e segue Alojamento próprio com Fontsource para acrescentar os tipos de letra ao teu projeto.

Os tipos de letra carregam da primeira vez que os escolhes (cerca de 12 a 50 KB por peso). São servidos por este site, nunca por uma CDN de fontes.

O que faz uma boa combinação de tipos de letra

Contraste, não conflito. A receita clássica é um tipo com serifa para uma função e um sem serifa para a outra: Playfair Display sobre Lato, ou Montserrat sobre Merriweather. Dois tipos de letra parecidos mas não idênticos (duas sem serifa geométricas, por exemplo) parecem muitas vezes um engano.
Um tipo de letra calmo no texto. É no corpo do texto que as pessoas passam o tempo. Escolhe um tipo com formas de letra abertas e uma altura-x generosa (Inter, Lato, Open Sans, Source Serif 4, Merriweather) e reserva os tipos display, como Playfair Display, DM Serif Display, Oswald ou Caveat, para títulos curtos.
Proporções compatíveis. Tipos de letra com alturas-x semelhantes ficam bem juntos na mesma linha e na mesma coluna.
Dois tipos de letra chegam. Cria hierarquia com tamanho, peso e espaçamento em vez de um terceiro tipo.

Para um texto legível, 16 a 20 px com uma altura de linha entre 1,4 e 1,7 é um bom ponto de partida, com cerca de 60 a 75 caracteres por linha. Os títulos precisam normalmente de uma altura de linha mais apertada (1,1 a 1,3), que o código CSS define por ti.

O código CSS

O código declara duas propriedades personalizadas, --font-heading e --font-body, cada uma com uma pilha de alternativas: se a fonte web ainda não tiver carregado, o navegador mostra um tipo de letra de sistema semelhante (Georgia para os tipos com serifa, o tipo de letra da interface do sistema para os sem serifa). Os tamanhos são escritos em rem (16 px = 1rem), por isso respeitam o tamanho de letra que o leitor definiu no navegador.

Alojamento próprio e licenças

Os 20 tipos de letra vêm do Fontsource, que empacota fontes open source para npm. A caixa de instalação dá o comando npm install e as linhas import do subconjunto latin e apenas dos pesos que usas; o teu bundler copia depois os ficheiros woff2 para a build. Servir as fontes a partir do teu próprio domínio é mais rápido (sem ligação extra), funciona offline e evita enviar os endereços IP dos teus visitantes a um serviço de fontes de terceiros, um problema conhecido do RGPD na UE.

Segundo os metadados dos pacotes, todos os tipos de letra aqui estão sob a SIL Open Font License 1.1: podes usá-los em sites, aplicações e impressão, com ou sem fins comerciais, e incorporá-los. Não podes vender os ficheiros de fonte isoladamente. Se modificares um tipo de letra, ele tem de manter a OFL e não pode usar o nome reservado original. O ficheiro da licença está incluído em cada pacote.

Perguntas frequentes

Esta ferramenta usa o Google Fonts?

Não. Muitas destas famílias também estão disponíveis no Google Fonts, mas aqui os ficheiros vêm dos pacotes npm do Fontsource e são servidos por este site. Nenhum pedido vai para a Google nem para qualquer outra CDN de fontes.

Porque é que alguns títulos não ficam mais grossos?

O DM Serif Display só existe num peso normal. A ferramenta mostra-o então a 400, indica-o por baixo dos controlos, e o código CSS usa 400.

Posso combinar duas fontes com serifa ou duas sem serifa?

Sim, se forem claramente diferentes na função e no peso, por exemplo um título condensado em negrito com um texto leve e aberto. A ferramenta mostra uma nota quando os dois tipos de letra têm o mesmo estilo, porque o contraste entre serifa e sem serifa é mais fácil de acertar.

Que caracteres estão incluídos?

A pré-visualização carrega o subconjunto latin, que cobre o português por completo (ã, õ, ç, acentos agudos, graves e circunflexos), bem como o inglês, o francês e a maioria das línguas da Europa Ocidental, com œ, « » e o símbolo do euro. Quando o tipo de letra os tem e o teu texto precisa deles, carrega também os subconjuntos latin-ext (letras da Europa Central como č, ł, ő, ț), cirílico e grego. Os tipos de letra sem esse subconjunto mostram essas letras no tipo alternativo: Lato, Work Sans e Space Grotesk não têm cirílico, e só Inter, Roboto, Open Sans, Source Serif 4 e Fira Code têm grego. Nenhum dos 20 tipos de letra tem letras árabes.

Posso usar estes tipos de letra num projeto comercial?

Sim. A SIL Open Font License permite a utilização comercial sem pagamento nem atribuição no teu design. Só não é permitido revender os ficheiros de fonte por si só.