# Combinar tipos de letra: regras simples que funcionam [Canonical HTML page](https://gradiently.design/pt-pt/guide/font-pairing) Dois tipos de letra que ficam bem sozinhos podem entrar em conflito quando partilham uma página. Algumas regras e meia dúzia de pares provados acabam com as adivinhas. ## The short version - Combinar tipos de letra funciona melhor quando cada um tem um papel claro, normalmente um para títulos e outro para o texto corrido. - Um bom par contrasta claramente de uma maneira, como serifa contra sem serifa ou pesado contra leve, e partilha proporções e ambiente. - Usar uma só família tipográfica em vários pesos, ou uma superfamília com versões com e sem serifa a condizer, é a forma mais segura de combinar tipos de letra. - Dois tipos de letra parecidos mas não iguais, como duas sem serifa neutras, costumam parecer um erro e não uma combinação. - Dois tipos de letra chegam para quase qualquer marca, publicação ou site; um terceiro deve ter uma função restrita, como código ou etiquetas. Saber **combinar tipos de letra** resume-se a três regras: dá a cada tipo de letra um papel distinto, faz os dois contrastarem claramente de uma maneira e deixa-os concordar em tudo o resto, como as proporções e o ambiente. Um título com serifa sobre texto corrido sem serifa é o exemplo clássico. Na dúvida, usa uma só família em dois pesos; não pode chocar consigo própria. ## Começa pelos papéis, não pelos tipos de letra Antes de escolher qualquer tipo de letra, decide que funções o texto tem de cumprir. A maioria dos designs tem duas: títulos que dão o tom e texto corrido que tem de ser confortável de ler. Alguns acrescentam uma terceira função, pequena, como etiquetas ou código. Escolhe primeiro o tipo do texto corrido, porque carrega a maioria das palavras, e depois encontra um tipo de título que o complemente. | Papel | A sua função | O que mais importa | | --- | --- | --- | | Título | Dar o tom, ser visto primeiro | Carácter, peso, aspeto em tamanho grande | | Texto corrido | Ler-se com conforto em textos longos | Legibilidade, textura uniforme, bons regular e itálico | | Etiquetas e texto pequeno | Ler-se depressa em tamanhos pequenos | Formas claras, espaçamento aberto, pesos robustos | | Código ou algarismos | Alinhar e não deixar ambiguidade | Monoespaçado ou algarismos tabulares | Papéis tipográficos. Dois tipos de letra podem cobrir os quatro; o tipo do texto corrido costuma tratar também das etiquetas. Uma publicação editorial com um título grande, uma pequena etiqueta e uma frase de apoio num estilo mais discreto Papéis à vista: um título grande com carácter, uma pequena etiqueta por cima e uma frase de apoio discreta por baixo. O contraste está no tamanho e no papel antes de estar no tipo de letra. ## Contrasta de uma maneira, concorda no resto Uma combinação precisa de uma diferença visível, senão o segundo tipo de letra parece um acidente. Mas se os dois diferirem em tudo ao mesmo tempo, parecem vindos de projetos diferentes. Escolhe um eixo de contraste e mantém o resto próximo. - **Classificação:** uma serifa com uma sem serifa. O contraste mais fiável. [Serifa ou sem serifa](https://gradiently.design/pt-pt/guide/serif-vs-sans-serif) explica o que cada uma traz. - **Peso:** um corte de destaque pesado com um corte de texto regular, mesmo da mesma família. - **Largura:** um tipo de título condensado com texto corrido de largura normal. - **Concorda nas proporções:** alturas-x semelhantes, a altura das letras minúsculas, fazem os dois assentar bem juntos na mesma linha. - **Concorda no ambiente:** uma serifa quente e suave combina com uma sem serifa humanista e quente; uma sem serifa geométrica e afiada combina com uma serifa nítida e de alto contraste. ## Uma família ou duas A combinação mais simples é não combinar: uma só família em dois ou três pesos. É coerente por natureza e difícil de errar. As superfamílias vão mais longe, com uma serifa e uma sem serifa desenhadas em conjunto para partilharem proporções, por isso tens o contraste de duas classificações com a harmonia de um só desenho. ### Uma família - Contraste só pelo peso e pelo tamanho - Harmonia garantida - Voz mais discreta e uniforme - Exemplo: títulos em Archivo Black, texto em Archivo ### Duas famílias - Contraste pela classificação ou pelo carácter - Exige proporções e ambiente a condizer - Mais expressivo, mais personalidade - Exemplo: títulos em Fraunces, texto em Inter ## Combinações de tipos de letra provadas no Google Fonts Estes pares usam tipos de letra gratuitos no [Google Fonts](https://fonts.google.com/) e muito usados, o que os torna fáceis de testar. Trata-os como pontos de partida: compõe as tuas próprias palavras com eles e avalia o resultado. | Título | Texto corrido | Contraste | Sensação | | --- | --- | --- | --- | | Playfair Display | Source Sans 3 | Serifa de alto contraste com uma sem serifa limpa | Editorial, clássico | | Fraunces | Inter | Serifa suave e com carácter com uma sem serifa neutra | Quente, contemporâneo | | DM Serif Display | DM Sans | Serifa de destaque com a sua sem serifa companheira | Simpático, cuidado | | Instrument Serif | Inter | Serifa condensada com uma sem serifa neutra | Moda, editorial | | IBM Plex Serif | IBM Plex Sans | A serifa e a sem serifa de uma superfamília | Preciso, técnico | | Space Grotesk | Inter | Grotesca peculiar com uma simples | Tecnologia, produto | | Archivo Black | Archivo | Peso dentro de uma só família | Arrojado, direto | Sete combinações do Google Fonts. Cada uma contrasta claramente de uma maneira e concorda nas proporções. ```html ``` Carregar e aplicar uma combinação: Fraunces para os títulos, Inter para o texto corrido, cada um com uma alternativa sensata. Só são pedidos os pesos que usas. ## Combinações a evitar ### Evita - Duas sem serifa neutras que diferem só ligeiramente - Dois tipos de destaque a competir pela atenção - Um terceiro e um quarto tipo de letra para variar - Tipos com alturas-x muito diferentes na mesma linha ### Em vez disso - Uma sem serifa em dois pesos, ou uma serifa com ela - Um tipo de destaque, um tipo de texto discreto - Dois tipos de letra, com pesos e tamanhos para variar - Tipos com proporções semelhantes Os tipos de destaque são os mais tentadores de usar em excesso. São feitos para tamanhos grandes e linhas curtas; texto corrido composto num deles cansa a vista depressa. Os [tipos de letra de destaque](https://gradiently.design/pt-pt/guide/display-fonts) mostram onde brilham. ## Como testar uma combinação de tipos de letra em dez minutos 1. **Usa palavras reais** Compõe um título a sério e um parágrafo verdadeiro do teu trabalho, não texto de enchimento. 2. **Usa tamanhos reais** O título em grande, o texto corrido em tamanho de leitura, no formato que vais usar de facto. 3. **Observa a textura** Afasta-te. O texto corrido deve parecer um cinzento uniforme; o título deve destacar-se claramente dele. 4. **Experimenta no telemóvel** Muitas combinações que parecem elegantes num monitor desfazem-se no tamanho do telemóvel. Os [tipos de letra para redes sociais](https://gradiently.design/pt-pt/guide/fonts-for-social-media) mostram o que aguenta. 5. **Verifica os detalhes** Algarismos, pontuação, itálicos e todas as línguas em que publicas. Quando tiveres escolhido, regista a combinação com pesos e tamanhos para que todos a usem da mesma forma; os [tipos de letra da marca](https://gradiently.design/pt-pt/guide/brand-fonts) tratam de licenças e línguas, e as [bases da tipografia](https://gradiently.design/pt-pt/guide/typography-basics) tratam da escala. Na Gradiently, os tipos de letra vivem no teu kit de marca e aplicam-se a cada novo design. ## FAQ ### O que é combinar tipos de letra? É escolher dois tipos de letra, normalmente um para títulos e outro para o texto corrido, que contrastam claramente de uma maneira e concordam nas proporções e no ambiente. ### Quantos tipos de letra devo usar? Dois chegam para quase tudo. Um terceiro deve ter uma função restrita, como código ou etiquetas pequenas. ### Posso usar só um tipo de letra? Sim. Uma família em dois ou três pesos é a combinação mais segura que existe, e muitas marcas fortes usam exatamente isso. ### Qual é uma boa combinação do Google Fonts? Pontos de partida fiáveis incluem Fraunces com Inter, Playfair Display com Source Sans 3 e IBM Plex Serif com IBM Plex Sans. ### Porque é que os meus dois tipos de letra ficam mal juntos? Normalmente são demasiado parecidos, e a diferença parece um erro, ou diferem em tudo ao mesmo tempo. Mantém um contraste claro e iguala as proporções.