Como tornar seu tipo mais atraente na Web
Não é incomum para um designer no mundo de hoje prestar pouca atenção em como o tipo é definido, especialmente com as configurações padrão sempre convenientes de tags de cabeçalho e fontes seguras da Web encontradas universalmente na web.
Se nós, como designers interativos, pudermos dedicar um pouco mais de tempo à tipografia, então os resultados mostrariam um design único e bem pensado como uma forma de se opor a uma criação do tipo “run of the mill”.
Há uma boa chance de que a maioria dos designers e designs que você admira mostre bons exemplos de tipografia.
Mostrarei alguns passos que tomo no tipo de conjunto de ajustes para ser mais atraente do que os cenários padrão de tags de 24px H1 junto com 13px definidos no Times New Roman.
Não se contente com configurações padrão, todo mundo está fazendo isso.
Aqui temos a aparência sempre tão comum de um título junto com um pedaço de cópia do corpo a seguir. Isso não te puxa para dentro ou se distingue de todas as outras amostras como esta, certo? Então, para tornar a amostra de texto mais visualmente atraente, primeiro, faremos algumas alterações com nossa seleção de fonte.
Escolha uma fonte que tenha mais peso visual com seu título
Embora a seleção de fonte não seja exatamente “tipografia”, ela é, na verdade, um componente por excelência para ajudar o tipo em uma página a se distinguir de outros elementos. Com o surgimento do @ font-face, grandes quantidades de opções estão disponíveis para designers em qualquer lugar.
Aqui eu usei uma fonte Extra Condensed Gothic Style que pode ser facilmente encontrada em um site de fonte livre como FontSquirrel.com. Se pararmos e pensarmos sobre isso, o nome “Condensado” deve significar alguma coisa, porque na verdade é mais denso do que é um membro da família estilo livro normal, que é exatamente o que queremos de um título :, algo que atrai o usuário e verdadeiramente se diferencia da cópia do corpo. Certamente consegue chamar sua atenção melhor do que o original, mas há algumas coisas que poderíamos fazer para melhorar ainda mais o texto.
Torne mais atraente com duas linhas de CSS
A mudança imediata está nas cartas; todos estão capitalizados agora, mas agora também têm um kerning negativo entre cada uma das letras (uma técnica herdada do design do jornal).
Ambas as características podem ser facilmente obtidas através de CSS, { text-transform: uppercase; e espaçamento entre letras: -Xpx; }. Ao fazer essas duas linhas valerem de alterações de codificação, isso resulta em uma grande melhoria no peso visual, especialmente em relação ao original.
Faça os últimos pequenos ajustes
Na próxima etapa, a fonte usada no parágrafo do corpo de fato mudou para um limpador sem serifa, que melhor complementa o texto do título. Estamos nos aproximando de um design muito mais visualmente atraente, mas há algumas mudanças que podemos fazer para limpá-lo ainda mais.
Como os indicadores verdes mostram, há margens desiguais e o que os tipógrafos gostam de chamar de “órfão”. Que é uma única palavra que cai na última linha do parágrafo. Ele cria um peso muito desigual visualmente em comparação com o restante do texto, e esse problema pode ser resolvido facilmente, reformulando ligeiramente o texto.
Quando se trata de margens, não há regra de que todas devem ser iguais. No entanto, se você está iniciando uma carreira jovem de web design, é uma boa prática ter margens iguais em toda a sua extensão até que você experimente e aprenda técnicas que lhe permitam ir além das diretrizes de composição e ainda atingir sua meta visualmente.
Depois de criar uma tela visual mais equilibrada, removendo o órfão e ajustando as margens, você pode ver o resultado final, uma amostra do tipo bem definida que é confortável onde se estabelece.
Quais são suas melhores dicas para tipografia na web? Deixe-nos saber nos comentários!