Criar títulos com texto sobreposto grande e pequeno

Cabeçalhos introduzem conteúdo.

Podemos aplicar muitos efeitos e truques a títulos baseados em gráficos para estimular os leitores a continuar lendo, definir o tom ou fazer um título se destacar entre muitos.

Mas às vezes as técnicas mais óbvias, como modificar o peso visual e o layout, funcionam muito melhor.

Os títulos sobrepostos usam uma pequena quantidade de texto grande e uma grande quantidade de texto pequeno para se comunicar mais do que um título simples poderia fazer por conta própria. Soa contraditório? Só se você ignorar os pontos finos.

Continue lendo para aprender como criar cabeçalhos memoráveis ​​com texto sobreposto.

O que as formas estranhas acima têm a ver com os nomes "WDD" e " {$lang_domain} "? Eles são artefatos infelizes de ter colocado um texto sobre o outro sem nenhuma consideração por colocação ou detalhes. Aqui está a imagem ofensiva:

De relance, o gráfico acima é uma apresentação direta de um nome de blog e sua abreviação. O tipo de letra é o oficial usado pelo blog; a laranja brilhante vem diretamente do tema do site; e ambas as linhas de texto estão centradas quase perfeitamente.

É até soletrado e capitalizado de acordo com o estilo do blog. Mas é uma tentativa amadora de imitar a técnica de sobreposição, colocando uma longa linha de texto sobre uma curta. (As fraquezas deste exemplo são exageradas, embora não sejam incomuns).

O sombreamento acima revela as novas formas criadas pelas duas partes do texto. Como as duas linhas se relacionam com cada uma e a ordem em que elas são lidas depende de como elas são dispostas. Há mais sobreposição de texto do que definir um em cima do outro.

É claro que a sobreposição nem sempre é a melhor maneira de organizar um título curto e um longo subtítulo.

Os exemplos abaixo mostram alguns tratamentos possíveis quando um design exige algo mais criativo do que o normal h1 e h2 elementos.

Texto sobreposto tem uma elegância que não pode ser facilmente duplicada com HTML (ainda). Duas linhas de texto juntas geralmente somam mais do que a soma de cada uma individualmente.

Fundamentos do texto sobreposto

O texto sobreposto contrasta duas linhas de tipo entre si. O grande texto fica atrás do texto pequeno, que geralmente contém mais palavras. As partes complicadas estão garantindo que ambas as linhas sejam igualmente legíveis, fazendo com que ambos trabalhem juntos, em vez de um contra o outro, e mantendo todo o pacote no tópico.

Diferentes técnicas alteram o efeito do texto sobreposto.

Aqui estão os quatro principais fatores que afetam o texto sobreposto:

• O posicionamento tem a ver com o posicionamento do texto pequeno em relação ao texto grande. Isso afeta diretamente como o texto é lido. Se o texto pequeno for para o canto superior esquerdo, provavelmente será lido primeiro (ou seja, antes do texto grande). Se o texto pequeno estiver na parte inferior direita, provavelmente será lido em segundo.
• O peso relativo refere-se à quantidade de atenção que uma parte do texto desenha em relação à outra. Dado seu tamanho, o grande texto tende a dominar. No entanto, se o texto grande estiver desbotado em segundo plano, o texto pequeno será saltado.
• Voz (principalmente tipo e cor) refere-se às escolhas estéticas que definem o humor da tipografia.
• A interação é o mais complicado. Tem a ver com a forma como as letras dos textos trabalham umas com as outras. A interação depende do posicionamento, tipo de letra e dos próprios personagens. O objetivo é amarrar visualmente linhas de texto aparentemente opostas.

Posicionamento afeta como as linhas como um todo são lidas

A ordem em que você deseja que os visitantes leiam o texto é o fator mais importante para determinar como organizar as linhas do tipo. Sendo o inglês uma linguagem da esquerda para a direita, o texto pequeno à esquerda será significativamente diferente do texto pequeno à direita.

Com o pequeno texto no canto superior esquerdo, o gráfico acima diz assim: “Evite-os como a praga. Clichés. ”Ainda assim,“ clichés ”é escrito tão grande que as pessoas podem lê-lo primeiro. O equilíbrio entre tamanho e posicionamento coloca as duas linhas em pé de igualdade.

A versão acima é menos ambígua. Desviando o pequeno texto para o canto inferior direito dá clara precedência ao texto grande. Agora, lê-se como: “Clichés: evite-os como a peste”.

Os títulos acima são intercambiáveis ​​porque cada linha é mais ou menos independente. Quando as linhas dependem umas das outras, o posicionamento é mais crítico. Aqui está um exemplo de um trabalho ruim:

Colocar o texto pequeno no canto inferior direito deixa os leitores suspensos. “Praga: Evite clichês como o…”? Embora a maioria das pessoas descubra, o momento de hesitação é a diferença entre uma apresentação medíocre e uma boa apresentação.

O arranjo logo acima é melhor porque o texto pequeno é a primeira parte da sentença. Se quisermos colocar o texto pequeno à direita, o texto grande terá que formar a primeira parte da frase. Mas novamente, há um engate.

Dependendo da sentença, usar apenas a primeira palavra para o texto grande não é suficiente, porque as linhas de texto precisam trabalhar individualmente e juntas. O texto acima divide a frase indevidamente. O verbo que comanda “evite” não tem significado suficiente por si só para justificar a independência. E “clichês como a peste” soam como se estivéssemos comparando frases excessivamente usadas a doenças, em vez de prescrever evitar as duas. O significado do gráfico inteiro muda.

Mesmo se tivermos que reduzir o texto grande para caber, usar duas palavras (uma frase completa) para o texto grande faz as duas linhas lerem melhor.

Com o texto sobreposto, obter o fraseado correto através do layout é tão importante quanto a cor e a escolha da fonte.

Domínio do Equilíbrio Trabalhando Com, Não Contra, o Fundo

Embora o objetivo do texto grande seja dominar, ele também pode facilmente sufocar textos pequenos. Mas isso nem sempre é ruim. Um bom equilíbrio não é impedir que o texto grande domine o texto pequeno, mas sim mostrar sua importância relativa.

O tamanho do grande texto naturalmente torna a declaração principal. Isso é ótimo se o pequeno texto é meramente para apoiar o grande texto. Por exemplo:

"WWW" salta primeiro. “Bem-vindo à era digital” elabora a ideia, apoiando os três Ws. Mas e se o pequeno texto supostamente transmitisse a mensagem principal?

Acima, o texto principal é "Bem-vindo à era digital". E o que isso significa? Desvanecido atrás, "WWW" fornece uma sugestão.

Quanto mais o texto grande se mescla ao segundo plano, menos importância ele assume. Quando o texto grande é pouco visível, o pequeno texto torna-se o elemento principal.

A interação está nos detalhes

A forma de um tipo de letra é a chave para o seu aspecto distinto. Quando duas linhas de texto se sobrepõem, elas criam bolsões, formas estranhas e outras distrações sutis.

Acima, o texto laranja grande e branco pequeno adicionam desordem desnecessária aos contadores (ou seja, os buracos dentro das letras). Sozinho, cada bit extra não atrapalha muito a legibilidade. Mas isso é parte do problema: porque eles não são ruins o suficiente para tornar o texto ilegível, eles poderiam facilmente ser descartados como sem importância.

Para máxima legibilidade, temos que preservar as letras do texto pequeno.

Como mostrado acima, pequenos ajustes eliminaram a interferência:

• Reposicionada entre os terminais tipo clamp do grande "C", a palavra "texto" é agora muito mais clara.
• Observe como as hastes verticais de “r” e “n” em “explicativo” atendem às bordas do grande “C”.
• Os contadores em “p” e “o” em “suporte” agora contêm apenas preto.
• Cortamos a letra grande "A" para tornar o "s" minúsculo em "suporte" mais claro.

O objetivo é preservar as formas das letras pequenas, mesmo que os leitores não percebam.

Tipo de letra faz a diferença

Nem todas as fontes são adequadas para tamanhos grandes e pequenos. Em um tamanho pequeno o suficiente, os detalhes de um tipo de letra podem desaparecer. E detalhes ampliados em tamanho grande podem, às vezes, criar problemas incomuns.

As quatro combinações de fontes acima falhar por diferentes razões:

1. Esse tipo de letra de script foi projetado para imitar a escrita manual. Suas bordas irregulares contêm centenas de pontos vetoriais, a maioria dos quais são perdidos em um tamanho pequeno.
2. Mas torne o script muito grande e as letras pareçam menos com a escrita à mão e mais como caminhos recortados do Illustrator.
3. As bordas caligráficas de Zapfino se saem melhor que as do Texas Hero, mas o enorme ascendente no "b" desequilibra a composição.
4. O Lucida Blackletter é muito complicado para ser prático como pano de fundo, pelo menos sem um arranjo muito cuidadoso do texto pequeno. Além disso, seu caráter único desaparece em um tamanho pequeno. Esses swoops e serifs, ou são apenas imprecisos?

Para o texto grande, muito grosso ou muito fino é apenas direito

Quando houver texto sobreposto, pense no tipo grande como texto e plano de fundo . Quanto mais complicadas as letras, mais texturizadas elas se tornam. Ou seja, eles são mais propensos a obscurecer as letras no pequeno texto.

Para evitar problemas, fique gordo ou magro. Formas extra grossas e extra leves funcionam melhor do que um peso regular do mesmo rosto. Ambos interferem menos porque o texto pequeno tem menos chance de atingir uma borda.

Por exemplo, o texto grande nas variações Luz e Preto acima atingiu menos letras minúsculas. É claro que todo rosto - e cada conjunto de palavras - é diferente. Mas, em geral, pesos médios causam mais problemas do que pesos finos e grossos.

Exemplos Práticos

Como isso pode funcionar com texto mais provável? Aqui estão alguns exemplos de texto sobreposto.

Por que funciona: desbotado em segundo plano, o grande texto dá clara prioridade ao pequeno texto. As formas geométricas do Museo têm poucas distrações.

Problemas potenciais: essa sobreposição não funcionaria se o texto pequeno fosse mais curto. Para transportar a mensagem, o pequeno texto deve sobrepor todas as seis letras do texto grande.

Por que funciona: o texto pequeno cruza apenas três linhas grossas e duas linhas finas de cor. Muito contraste, mesmo para uma paleta de cores quentes.

Problemas potenciais: as bordas enérgicas do texto grande parecem funcionar contra as linhas elegantes do pequeno texto.

Por que funciona: as duas linhas de texto têm formas geométricas nítidas e estão alinhadas com precisão.

Problemas potenciais: o pequeno texto parece um pouco perdido? Os tipos de letra realmente refletem o espírito de “ steampunk ?

Por que funciona: rastreamento generoso nas letras grandes e linhas limpas em ambos os textos esclarecem cada personagem.

Problemas potenciais: a textura de fundo torna o tipo muito difícil de ler?

Por que funciona: o texto grande e grosso é legível por si só, enquanto o pequeno texto íntimo convida a leitura. Vários preenchimentos extras mantêm a profundidade de cor das letras maiúsculas "S".

Problemas potenciais: SxSW é normalmente processado em uma fonte de bitmap; estes são fora da marca. Além disso, use scripts em texto pequeno com moderação.

Mas isso ajuda?

Vamos aplicar essas lições à nossa composição original.

Por que funciona?

• O texto grande se mistura com o fundo escuro, mas seu tamanho garante que seja visível.
• A cor brilhante faz com que o pequeno texto se destaque. O alinhamento à direita equilibra isso.
• O espaçamento cuidadoso das letras minúsculas e a simplicidade das letras grandes minimizam o conflito.
• Os dois tipos compartilham elementos comuns. Por exemplo, os dois “W” se alinham, apesar de estarem em diferentes faces.

Escrito exclusivamente para o Webdesigner Depot de Ben Gremillion . Ben é um web designer que resolve problemas de comunicação com melhor design.

Quais são alguns dos possíveis problemas do último exemplo? Por favor, compartilhe seus pensamentos nos comentários abaixo.

• ← 10 fontes icônicas e por que você nunca deve usá-los
• 12 regras essenciais a seguir ao projetar um logotipo →