Use texto legível para projetar seu site

Se um site usa gráfico ou HTML texto, leitura de texto na tela do computador pode ser desconfortável no olho: você é vesgo do brilho ao tentar ler o pequeno texto. Você pode minimizar a tortura, no entanto, ao limitar a quantidade de texto que incluem em cada página web. Ao quebrar cópia em pedaços pequenos (ao contrário de longos parágrafos), e escolher as certas fontes, cores e tamanhos, você pode fazer a sua página muito mais fácil de ler em um monitor de computador.

designers de mídia impressa tem o luxo de trabalhar com todos os tipos de fontes e tamanhos de fonte. Isso é porque eles podem ser impressas com um alto resolução (Tamanho fino ponto) no papel - mesmo se o texto for muito pequeno, os leitores ainda podem facilmente ver o detalhe. As imagens exibidas em um monitor de computador, no entanto, são uma história diferente. O menor ponto de luz sobre um monitor, uma chamada pixels, é 1 # 8260-72 polegadas de largura, ou 72 pontos por polegada linear - que, sem fazer você sair de seu governante, não é pequeno quando comparado com resoluções de impressão padrão, como 150 e 300 pontos por polegada.

Dê uma olhada no tipo no primeiro exemplo. Este texto é de 10 pontos de sintaxe em negrito no computador. Ele foi ampliado para que você pode ver que apenas alguns pixels compõem cada letra. Tal um pequeno número de pixels faz o texto aparecer desajeitado e ilegível - especialmente quando ampliada como este. o tamanho do tipo de dez pontos é um tamanho de fonte comum em cartões de visita, assim como você pode ver, o que funciona para um cartão de visita não funciona bem na tela do computador. Claro, algumas fontes deste tamanho trabalho melhor do que outros na web, mas você começa a idéia geral.

image0.jpg

Além de fontes e tamanhos de fonte, outros fatores contribuem para texto legibilidade em uma página web. Você pode fazer três coisas para fazer seu texto mais legível (independentemente de qual fonte que você escolher):

  • Normalmente, o texto escuro em um fundo claro é mais legível do que o inverso. Se a sua página web tem um monte de texto que você quer que as pessoas a ler, escolher um fundo de cor clara, com texto escuro para um bom contraste. A, cor escura silenciado em vez de texto preto para cópia de corpo amolece o efeito, fazendo com que o texto não é tão gritante e gritante como texto preto em um fundo branco.

  • Tente alargar o conduzindo - o espaço entre as linhas de texto - para tornar o texto mais legível. Aumentar o líder ajuda o olho para encontrar a próxima linha de texto. Comparar o efeito visual dos três blocos de texto no segundo exemplo. O texto no bloco de esquerda é muito apertado, enquanto que o bloco central do texto é muito mais legível - especialmente sobre o fundo escuro. O líder solto no bloco da direita dá uma sensação completamente diferente, mais decorativo para o texto.

  • Tente limitar a largura de cada coluna de texto corpo para não mais do que cerca de 450 pixels. Como as páginas da web têm espaço mais horizontal do que o espaço vertical, você pode ser tentado a fazer com que cada linha de texto executado em toda a página para obter o máximo acima da linha de dobra possível. (Acima da linha de dobragem significa dentro do espaço de tela do navegador que o visitante primeiros encontros.) O problema com essa tática, no entanto, é que depois de seus olhos obter todo o caminho ao longo da página, você não pode facilmente encontrar a próxima linha. Limitar a largura de cada coluna para não mais do que cerca de 450 pixels ajuda olhos dos seus visitantes em ziguezague para baixo a página com rapidez e precisão. Normalmente, layouts web páginas são responsáveis ​​por dois a três colunas estreitas de texto em vez de um um grande, como na figura a seguir.

    image1.jpg

    Usando uma quantidade significativa de conduzir só funciona bem para blocos mais pequenos de texto - não para a totalidade páginas de texto corpo. Você pode usar um monte de líder para fazer um parágrafo lead-in ou uma citação destacam-se o corpo principal, como na figura a seguir.

    image2.jpg

menu