10 regras de tipografia da Web que todo designer deve saber
Quando alguém visita um site que você criou, as chances são de que eles não se importam muito com as cores, imagens ou sons, eles estão olhando imediatamente para o texto.
Não importa quantos sinos e assobios você tenha construído em um site, todos confiam no texto para realizar o que quer que estejam visitando o site .
Só isso deve fazer tipografia, a arte de organizar o tipo, uma prioridade para qualquer web designer.
Neste artigo, vamos dar uma olhada em 10 regras fáceis para ter em mente ao projetar seu próximo projeto da web.
1. Leia o texto você mesmo
Com um design como JonesingFor Um designer sem grande compreensão do texto teria lutado para montar a tipografia que faz este site realmente funcionar. Ao abordar sua própria tipografia, você provavelmente não precisa se preocupar em escrever o texto de um site - mas precisa lê-lo!
Alguns web designers pensam que apenas copiar e colar um arquivo de texto constitui o total de suas tarefas textuais. Mas a leitura do texto fornece pelo menos uma idéia básica de como o texto pode ser integrado em um site, evitando a desconexão entre a escrita e o design de um site.
Você pode retroceder sua tipografia em outro nível, se conseguir ler o texto quando estiver no seu design. Tome nota especial do espaço ao redor das letras . Você tem algum espaço incomum que pareça estranho? Um pouco de tipografia cuidadosa pode eliminar esses problemas. Você também pode ter uma ideia de linhas que podem ser longas demais para serem lidas facilmente, quebras de linha desajeitadas e problemas semelhantes.
2. Dump Lorem ipsum o mais rápido possível
Você acha que poderia ter projetado Site de Jesus Rodriguez Velasco sem o texto real? O site é fortemente dependente da palavra escrita - e palavras muito específicas também. Até mesmo o texto do corpo recebeu atenção especial com uma tampa e alguns outros ajustes que não seriam possíveis com o Lorem ipsum.
A menos que o texto do seu site seja na verdade Lorem ipsum, o texto fictício não terá semelhança com a coisa real . Isso significa que qualquer ajuste que você possa fazer no texto - ou o design que o rodeia - terá que esperar até você obter a coisa real. Solicitar (e obter) texto do seu cliente o mais cedo possível no processo lhe dará a capacidade de corresponder ao seu design geral e à sua tipografia.
3. Mostre uma hierarquia clara
Quando você chega Rik Cat Industries , você sabe imediatamente onde você deve começar a ler. Embora existam alguns links no topo da página, o bem-vindo de Rik chama sua atenção primeiro. É muito maior, usando tipografia para estabelecer uma hierarquia clara .
Todo site precisa de uma hierarquia bem desenvolvida: indicadores de onde começar a ler e como proceder. Sua tipografia pode fornecer essa hierarquia - assim como a de Rik - contanto que você conheça sua ordem hierárquica antes do tempo. Ao pensar em tamanho e tipos de letra, você pode destacar uma parte do texto como um título de uma maneira que diferentes posicionamentos no design não podem fornecer.
A hierarquia do seu design vai além da tipografia que você emprega, é claro, mas como os usuários quase sempre começam com o texto, faz sentido que os designers façam o mesmo.
4. Preste atenção na tipografia macro e micro
Baseando-se inteiramente na tipografia para sua primeira página, o Crowley Webb and Associate’s website foi projetado com dois fatores em mente: macro e micro tipografia .
Tipografia macro é a estrutura geral do seu tipo, como ela aparece no contexto do seu design e sua estética quando você considera seu texto como um bloco por conta própria.
A micrografia tipográfica está mais preocupada com os detalhes do espaçamento, os problemas que determinam se as palavras são fáceis de ler. Micro-tipografia é uma necessidade absoluta quando se trata de montar um bloco de texto: se não for legível, não há sentido em prosseguir. A Crowley Webb and Associates abordou essa questão por meio de uma redação cuidadosa e do espaçamento entre as palavras que o site destacaria.
Mas a macro-tipografia oferece a você a oportunidade de tornar seu texto mais do que bem espaçado: é a chance de fazer com que pareça atraente e faça parte de todo o seu design . A escolha de tipos e cores neste site cria um todo viável. Ignorar qualquer faceta da tipografia é prejudicial.
5. Tome cuidado com as cores do tipo
Seria tão fácil perder o texto no fundo de ArtofElan , especialmente o vermelho brilhante na combinação vermelho escuro usado pelo designer. Quando um web designer trabalha com o tipo colorido, o cuidado é absolutamente necessário, não há garantia de que uma combinação vermelha em vermelho, ou mesmo uma combinação amarela em vermelho, será visível . Afinal, todos visitaram um site em que o texto parecia estar apenas a uma sombra da cor do plano de fundo e causou um cansaço visual ao tentar lê-lo.
A solução mais fácil para essa situação é certificar-se de que a cor do seu tipo é drasticamente diferente daquela do seu plano de fundo . Preto e branco funcionam tão bem porque são tão drasticamente diferentes quanto possível, mas há alguns combos de cores que funcionam bem: algo como azul escuro em rosa claro fará o trabalho. Texto invertido é bastante complicado… enquanto você pode trabalhar com texto rosa claro em um fundo azul escuro, é mais provável que você receba uma reclamação sobre ele.
6. Levar a sério o seu CSS
Se o seu CSS é sólido, você pode mover-se entre as páginas do seu site sem problemas, assim como as diferentes versões do Hutchouse.com Conte com diferentes folhas de estilo para criar alguns efeitos impressionantes. Mesmo se você não levar as coisas até Hutchhouse, o CSS pode ajudar a eliminar problemas de tipografia amadora, como a troca de fontes e tamanhos entre as páginas.
O CSS pode fornecer consistência fácil entre sua tipografia em todo o site . Se você é consistente em como você usa o tipo, no entanto, quebrar essa consistência até mesmo uma pequena quantidade pode fazer o que você deseja realçar realmente se destacar, assim como estabelecer e quebrar uma grade pode fazer um design eficaz. Na tipografia da web, manter suas fontes consistentes pode ser uma simples questão de CSS.
7. Vala o texto centrado
Escolher uma alternativa ao texto centralizado pode facilitar a leitura de um design de site , assim como DesignCanChange.org . Optar pelo texto centralizado, especialmente em uma página como essa, criaria uma página problemática: a centralização das bordas irregulares em cada lado dificulta muito a leitura e há muitas oportunidades para que texto perfeitamente centralizado acabe distorcendo o restante seus projetos em diferentes telas.
Em alguns círculos, o tipo centralizado é apenas um passo acima do uso do Comic Sans no design de um site. Você pode considerá-lo como um título, mas, em geral, alinhar seu texto à esquerda deixará seus leitores mais à vontade, a menos que eles leiam da direita para a esquerda .
8. Lide com citações inteligentes e outros símbolos
De Luigi Ottani O site mostra que a atenção cuidadosa às aspas e outros símbolos irá levá-lo: uma completa falta de problemas quando o site exibe esses símbolos. Muitos sites são pontilhados com símbolos que um navegador não pode exibir. É um legado do fato de que a maior parte do texto com o qual um web designer trabalha provavelmente foi escrito no Microsoft Word ou em outro software de processamento de texto que faz todo tipo de pequenas mudanças no texto sem que o escritor preste muita atenção.
Uma das piores alterações é cotações inteligentes: as aspas curvas do Word substituem automaticamente as aspas normais . Outra área problemática ocorre quando se trabalha com texto escrito em outro idioma: acentos e umlats podem causar tantos problemas quanto a utilidade do Word. Se você simplesmente copiar e colar texto com essas alterações em seu design, provavelmente precisará voltar e corrigi-las depois, pelo menos para alguns navegadores da web.
Em vez disso, consiga-os no início do processo de design para que você possa se concentrar em tornar o texto mais adequado ao seu design . Se você quiser que os símbolos sofisticados e as citações inteligentes apareçam no design final, divida suas entidades HTML.
9. Planeje seu texto para ficar maior
Quando você aumenta o tamanho do texto Veerle Pieters ' website, não é tão bonito quanto se você usar o tamanho da fonte que ela escolheu. No entanto, você ainda pode ler tudo, localizar links e assim por diante, algo que é verdade em poucos sites.
Isso porque, em parte, muitos designers certificam-se de layout de texto em fonte de 10 pontos ou ainda menor. A maioria das pessoas se sente à vontade para ler essas fontes, mas os Baby Boomers formam uma grande parte da população que navega na web, e muitos desses surfistas da web que estão envelhecendo terão seus navegadores configurados para exibir o maior tamanho possível . Seu texto, assim como seu design, precisa ser capaz de se adaptar a esse fato.
Também vale a pena levar em conta o fato de que o tamanho do navegador pode variar drasticamente , movendo o texto para locais inesperados se você não for cuidadoso. Se aumentar o tamanho de um ponto cria problemas, o grupo demográfico mais velho passa para o próximo site com pressa. Ter que rolar para sempre para o lado terá um resultado semelhante.
10. Mostre uma preferência por sans serif
Se você olhar para o A List Apart’s website, praticamente todo grande bloco de texto é definido em um tipo de letra sem serifa, tornando muito mais fácil de ler. Cabeçalhos e outros blocos menores de texto são dispostos em fontes com serifa, criando um equilíbrio entre os dois.
Quando se trata de colocar texto em uma tela, as fontes sem serifa são quase sempre a melhor aposta , especialmente se você escolher uma fonte como Verdana, que foi projetada para exibição em uma tela de computador. As fontes serifadas têm uma chance maior de exibir mal, ficarem borradas ou até mesmo pixeladas.
Não é possível evitar inteiramente as serifas, é claro. Mas para grandes blocos de texto, especialmente, usar uma fonte sem serifas pode oferecer um nível extra de garantia de que os visitantes poderão ler facilmente o texto de um site. Quando você está escolhendo fontes para um projeto, primeiro examine suas opções sans serif .
Um comentário final
A tipografia é facilmente ignorada, e mesmo quando um designer leva isso em consideração, é fácil descartar uma atividade com muito tempo e com pouco retorno. Mas gastar apenas alguns minutos com o texto que será a peça central do seu design pode transformá-lo de algo que qualquer web designer poderia colocar em uma página em um elemento que suporte o restante do design.
Escrito exclusivamente para WDD até quinta-feira Bram.
Você segue estas regras e outras? Por favor, compartilhe suas opiniões abaixo ...