41 lines
4.4 KiB
Markdown
41 lines
4.4 KiB
Markdown
|
---
|
||
|
|
title: Legibility and Readability
|
||
|
|
localeTitle: Legibilidade e legibilidade
|
||
|
|
---
|
||
|
|
## Legibilidade e legibilidade
|
||
|
|
|
||
|
|
### Legibilidade
|
||
|
|
|
||
|
|
**Legibilidade** significa poder diferenciar caracteres diferentes em um texto. Texto legível implica que pode ser facilmente interpretado. Veja as características únicas de um tipo de letra ao considerar a legibilidade. Algumas das considerações são as seguintes:
|
||
|
|
|
||
|
|
* Você deve usar cada tipo de acordo com seu _contexto e uso pretendido_ . Analise a história e os melhores cenários de uso. Por exemplo: Garamond é melhor usado para grandes corpos de texto em impressão, enquanto que na Geórgia para tela.
|
||
|
|
* Tenha em mente se o tipo de letra é para _exibir texto ou corpo do texto_ .
|
||
|
|
* A altura-x de um tipo de letra é o tamanho do 'x' minúsculo em um tipo de letra. Um tipo de letra com _média a alta altura x_ resulta em um texto legível em tamanhos pequenos.
|
||
|
|
* Convencionalmente, os **tipos de** letra **serif** são mais legíveis para o texto do corpo do que os seus correspondentes sem serifa.
|
||
|
|
|
||
|
|
### Legibilidade
|
||
|
|
|
||
|
|
**Legibilidade** significa organizar grupos de palavras ou blocos de texto de tal maneira que torne o texto mais acessível. A ideia é reduzir o esforço necessário para ler um corpo de texto.
|
||
|
|
|
||
|
|
Stephen Coles observa que a legibilidade, não só implora a pergunta "Você pode lê-lo?" mas se **"quer lê-lo?"** .
|
||
|
|
|
||
|
|
Jason Santa Maria aponta em seu livro _On Web Typography_ que a leitura não é uma atividade linear. Nós lemos em um movimento para a frente e para trás chamado **sacadas** , que é nossos olhos pulando de um ponto para outro. Além disso, o texto com palavras familiares facilita a leitura. Alguns pontos básicos a serem lembrados ao considerar a legibilidade são os seguintes:
|
||
|
|
|
||
|
|
* **Contraste** refere-se à mudança na espessura do traço em diferentes partes da carta. Quanto maior o contraste, maior a mudança no curso. Use tipos de letra de médio a baixo contraste para corpos longos de texto.
|
||
|
|
|
||
|
|
* **Altura da linha** refere-se à distância entre duas linhas de texto. Você não quer tornar o bloco de texto nem muito apertado nem muito solto. Você pode controlar a altura da linha no CSS pela propriedade 'line-height'. Para a maioria dos textos, você pode configurá-lo entre 1,2 e 1,5 (sem nenhuma unidade).
|
||
|
|
|
||
|
|
* **Comprimento da linha** (medida) refere-se ao número médio de caracteres em uma linha de texto. Um comprimento de linha grande dificulta a legibilidade ao dificultar a varredura do texto pelos olhos. Normalmente, cerca de 45 a 75 caracteres por linha é ideal para um corpo de texto. Se você planeja aumentar o comprimento da linha além disso, também tome cuidado para aumentar a altura da linha para que haja espaço suficiente entre duas linhas de texto. Em CSS, você pode definir a largura do container, e usando a unidade em, você pode chegar perto de um número definido de caracteres, dependendo da relação entre largura e altura da fonte. Exemplo: largura: 35em;
|
||
|
|
|
||
|
|
* **Rastreamento** refere-se ao ajuste do espaço entre os caracteres em um texto. Adicionar rastreamento significa adicionar espaço em branco entre os caracteres e vice-versa. Em tamanhos de fonte pequenos, ou seja, menos de 10pts, o acréscimo de acompanhamento ajuda a melhorar a legibilidade. Da mesma forma, para cabeçalhos grandes, use rastreamento negativo para aproximar as letras. Você pode controlar o rastreamento em CSS por meio da propriedade "espaçamento entre letras". Por exemplo: espaçamento entre letras: 0.05em;
|
||
|
|
|
||
|
|
* **Tamanho da fonte** refere-se ao tamanho da fonte usada em um texto. Para exibição em dispositivos móveis, use tamanhos de pelo menos 12 px. Você pode controlar o tamanho da fonte em CSS através da propriedade 'tamanho da fonte'. Exemplo: tamanho da fonte: 48px;
|
||
|
|
|
||
|
|
|
||
|
|
Como você pode ver, é preciso levar em conta muitos fatores para garantir legibilidade e legibilidade ideais. Lembre-se, não há regras rígidas e rápidas para qualquer um dos fatores descritos acima. São meras orientações que podem ajudá-lo a treinar melhor seu olho tipográfico.
|
||
|
|
|
||
|
|
### Links Adicionais:
|
||
|
|
|
||
|
|
* [Tipografia Prática](https://practicaltypography.com) para o básico da Tipografia.
|
||
|
|
* [Tutsplus Web Design](https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211) - Um artigo sobre legibilidade e legibilidade
|
||
|
|
* [On Web Typography](https://abookapart.com/products/on-web-typography) - Um livro sobre tipografia na web.
|