5 maneiras simples de melhorar a tipografia da Web
O tipo é um dos elementos mais usados da web. Pense nisso. A menos que você seja o YouTube ou o Flickr, é provável que os visitantes do seu site estejam vindo para o seu conteúdo de texto - não a embalagem sofisticada que o rodeia. Então, por que os web designers ainda tratam o texto como um elemento secundário?
Boa tipografia traz ordem para a página e aumenta a legibilidade . Permite que as pessoas processem informações mais rapidamente.
Um site mais legível e legível significa visitantes felizes. Visitantes felizes retornam frequentemente, compram produtos, deixam comentários e compartilham o site com amigos. Veja por que vale a pena pensar sobre isso?
Eu poderia falar para sempre sobre até onde chegou a tipografia na web, e até onde ela ainda precisa ir. Eu tenho frequentemente saltado entre web e design de impressão. Quando você vai do InDesign para o TextMate, as limitações do tipo da web são claras .
Mas muito já foi dito sobre o que o tipo de web não pode fazer. Isso não vai ser outro discurso. Em vez disso, vamos nos concentrar em 5 consertos fáceis para as monstruosidades tipográficas que abundam na Web.
1. Use uma folha de estilo de redefinição
Estúpido, mas é verdade: dois navegadores não usam os mesmos padrões de apresentação. Diferenças no preenchimento, margens, títulos e recuos são desenfreadas. Se você quiser que o layout da sua página seja mais consistente em todos os navegadores, vale a pena começar com uma folha de estilo de redefinição de CSS.
Dois eu recomendo:
Folha de estilo de redefinição de CSS do Yahoo
Folha de Estilo de Redefinição de CSS de Eric Meyer
2. Assista sua medida
Medida refere-se ao comprimento de uma única linha do tipo. Uma linha mais longa = uma medida mais longa. Estudos mostraram que, para ótima legibilidade, a execução de colunas de texto, como a cópia do corpo principal, deve ter entre 45 e 75 caracteres (30 a 50 ems), incluindo espaços . Essa é uma das razões pelas quais os designs de fluidos (aqueles em que as colunas se expandem e se contraem para se ajustarem à largura do navegador) são mais difíceis para os olhos.
Além disso, o líder deve aumentar com o comprimento da sua Medida . A entrelinha é a quantidade de espaço em branco entre linhas de texto e é controlada pela propriedade CSS line-height. Se você precisar usar uma Medida extra longa, certifique-se de que sua liderança esteja aberta.
Da mesma forma, se você tiver uma coluna pequena, como uma barra lateral com uma medida curta, a sua entrelinha deve estar mais firme. Eu acho que o valor padrão que a maioria dos navegadores atribui é um pouco apertado demais. Uma altura de linha de aproximadamente 1,4em funciona bem para a maioria dos conteúdos corporais.
3. Tendem ao espaço entre
Não é apenas sobre o seu texto - é sobre o espaço que o rodeia. Muito pouco espaço dificulta a leitura do texto, mas também o faz muito. A chave é encontrar um equilíbrio simples que guie o olho de um elemento para o outro.
Um dos erros comuns que os novos designers cometem é preencher cada centímetro de espaço. O espaço em branco refere-se ao espaço vazio ou "negativo" em torno do seu conteúdo e é crucial. Dê uma olhada em uma revista bem projetada, como Dwell ou Good, e você verá que, apesar de custar dinheiro para o editor imprimir cada página, elas deixam uma quantidade abundante de espaço em branco ao redor do texto. A página estará em equilíbrio e seu olho se moverá de espaço em espaço efetivamente.
Além de ajustar a altura da linha (como mencionado no item 1), tente aumentar o preenchimento e as margens . A menos que você esteja tentando usar um truque visual maluco, sempre deve haver uma boa quantidade de espaço em branco ao redor do seu texto. Não deixe que se bata contra outros elementos, especialmente imagens. Deixe seus pedaços de conteúdo (títulos, parágrafos, barras laterais, etc.) respirar.
Mark Boulton escreveu um artigo muito informativo sobre Espaço branco para A List Apart, confira.
4. Não vá louco da fonte
Uma boa regra de ouro para qualquer designer é: não usar mais de duas fontes enfrenta em seu design. Duas faces de fonte podem parecer muito elegantes. Uma lista separada usa variações de Geórgia e Verdana para criar uma aparência elegante e polida. Mas continuar adicionando faces de fonte à sua interface cria uma confusão desnecessária. Da mesma forma, evite usar muitos tamanhos de fonte, cores ou tratamentos em uma página ou em um parágrafo ou eles competirão uns com os outros em vez de adicionar ênfase conforme pretendido.
Apesar pilhas de fontes e tecnologias como sIFR e Typeface.js permite que você especifique praticamente qualquer fonte que quiser como padrão, resista à tentação de ficar louco com a cópia do corpo. Fontes decorativas são mais bem mantidos nos títulos porque afetam a legibilidade. Pense nisso - quando foi a última vez que você pegou um romance em brochura inteiramente em Comic Sans?
Ao criar pilhas de fontes, preste atenção ao tamanho de seus pares. Algumas fontes semelhantes parecem renderizadas em tamanhos muito diferentes. Verdana e Arial são um ótimo exemplo disso. Typetester é uma ótima ferramenta para comparar fontes centrais da Web e criar uma pilha bem-sucedida. Outra ferramenta útil chamada Construtor de Pilha de Fontes mostra a porcentagem de usuários que verá cada variação.
Independentemente de quais fontes você decidir usar, verifique se elas não são minúsculas. Eu sei que é difícil… texto minúsculo parece legal. Mas pense nos pobres, apertando os olhos dos usuários! Mantenha o corpo de texto acima de 10 ou 12 pixels. Se você insistir em pequenininho, pelo menos, use tamanho relativo para todos aqueles usuários do IE 6.0 que de outra forma não poderiam torná-lo maior. Ler Artigo do Wilson Miner em tamanhos de fonte para uma grande tomada no debate.
5) Não negligencie os detalhes
O cliente forneceu o conteúdo. Adicioná-lo ao site é apenas uma questão de copiar e colar, certo? Errado, errado, errado. Esta é uma armadilha web designers caem com muita freqüência.
Mesmo aqueles de nós que diligentemente adicionam tags de cabeçalho, formatam cada parágrafo e organizam listas com marcadores com cuidado, esquecendo alguns detalhes tipográficos importantes. Muitos (inclusive eu) ficaram de fora do treinamento de tipografia formal, então você não pode nos culpar por completo. Mas o diabo está nos detalhes. É hora de abraçar esses princípios básicos:
Use citações inteligentes
Qual é a diferença entre aspas inteligentes e citações idiotas? Aspas inteligentes (também conhecidas como livro ou encaracoladas ) são curvas e têm um estilo de abertura e fechamento. As citações mudas ( retas ) geralmente são para cima e para baixo. Um apóstrofo é tipograficamente apenas uma citação simples, portanto o mesmo problema se aplica. Uma citação muda (também chamada de primo ) só deve ser usada entre as medidas. Por exemplo, 6'4 ″ usa aspas duplas e simples.
Infelizmente nossos teclados padrão para cotações privilegiadas. O Microsoft Word e outros editores de texto apenas os corrigem à medida que escrevemos. Adicionar citações inteligentes a páginas HTML exige mais trabalho do desenvolvedor da Web, pois é necessário usar a marcação para gerar símbolos de abertura e fechamento de cotação. Eu vejo o mesmo problema com os em e traços, reticências, marcas registradas e símbolos de direitos autorais. Os codificadores tomam o caminho mais fácil substituindo-os por hífens, múltiplos períodos, uma grande TM e a infame (C). Usar os símbolos certos faz diferença visualmente. Faça certo e faça os editores sorrirem por toda parte.
Como fazer citações inteligentes:
#8216; = abrir citação simples
’ = fechando aspas simples
“ = abrir aspas duplas
” = fechar aspas duplas
Eu sei - ninguém quer passar o dia todo caçando as cotações. Felizmente, ferramentas como Espertinho e Textism pode fazer muito do legwork para você, formatando automaticamente o texto que inclui citações inteligentes e afins.
Ler “O problema com EM e EN” from A List Apart para mais detalhes sobre o assunto e a codificação de caracteres UTF-8 para os caracteres especiais mais comuns.
Uma ressalva - muitos editores de texto do CMS (como o que este site usa) não permitem que você implemente citações inteligentes sem plugins extras. Triste mas verdadeiro.
Pare de colocar dois espaços após um período. Por favor! Não é necessário e é realmente bastante irritante.
Em seus links, use borda inferior: 1px sólido em vez de texto-decoração: sublinhado . Os sublinhados podem percorrer os caracteres descendentes (g, j, p, q, y), tornando-os difíceis de ler, especialmente quando se usa tamanhos de fonte menores.
E embora não tenha nada a ver com tipografia, executar uma verificação ortográfica rápida nunca matou ninguém . Mesmo que tudo o que você fez foi copiar e colar, um erro de ortografia que passa por um site ao vivo reflete mal a todos os envolvidos.
Preste atenção nessas 5 correções e os designs do seu site certamente melhorarão. Lembre-se que estes são apenas um ponto de partida. A boa tipografia é uma habilidade aprendida, assim como qualquer outra coisa, e requer estudo e prática . Sempre fique de olho nos sites que estão acertando e anote o que eles estão fazendo. Precisa de inspiração? Confira os sites abaixo para exemplos de ótimas tipografias na web e exemplos de postagens que você considera inspiradoras.
Tipo inspirado:
Escrito exclusivamente para WDD por Mindy Wagner.
O que você acha dessas maneiras simples de melhorar sua tipografia? Você os implementa em seus sites? Nós gostaríamos de ouvir de você!