O documento discute conceitos de tipografia digital como espaçamento entre linhas (leading), espaçamento entre caracteres (kerning e tracking) e como essas propriedades afetam a legibilidade e percepção do texto. Também apresenta critérios para escolha de fontes como família de glifos, legibilidade, estética e compatibilidade com outras fontes.

1. TIPOGRAFIA
DIGITAL
AULA T15 LABM1
Mário Vairinhos
Ana Carla Amaro
Leonardo Pereira
Fontes:
- Design for the Web, Parte 4
- http://tipografos.net/
- https://www.websitebuilderexpert.com/pick-best-font-style-for-website/

2. ESPAÇAMENTO E PARÁGRAFO
- Espaçamento entre linhas (Leading)
- Espaçamento entre caráteres (Kerning)
- Espaçamento entre proporcional entre caráteres (Tracking)
- Espaçamento entre palavras (Word Spacing)

4. LEADING
ESPAÇAMENTO ENTRE LINHAS
A proveniência do termo remonta ao tempo em que os
tipos eram constituídos por metal (chumbo, lead na
língua inglesa). O tipógrafo modulava o espaço entre as
linhas introduzindo tiras estreitas de metal (chumbo)
entre cada uma das linhas.
Consiste na distância entre as linhas de base
(baselines) entre duas linhas de texto e pode ser
expresso em px, pt, cm ou ainda em percentagem da
dimensão da fonte, o corpo (distância entre a linha de
base e a linha das ascendentes).
Fonte:
https://www.fonts.com/content/learning/fontology/level-
2/text-typography/line-spacing-for-text
https://en.wikipedia.org/wiki/Leading
http://lowendmac.com/2004/text-and-typography-
leading-kerning-tracking-and-justification/

5. LEADING
ESPAÇAMENTO ENTRE LINHAS
O espaçamento entre linhas produz não apenas um
forte impacto visual como também na dimensão do
próprio texto. Este impacto é maior do que a própria
dimensão da letra (corpo). Por essa razão, quando se
pretendete ajustar a dimensão do texto numa caixa ou
numa página, o leading produz a maior variação.
As fontes necessitam de diferentes espaçamentos entre
linhas de modo a se obter o mesmo efeito visual.
Geralmente, fontes com altura-X elevada relativamente
à linha das ascendentes necessitam de mais
espaçamento entre linhas para ter a mesma
legibilidade. Este efeito é mais evidente quando o texto
é apresentado a corpo pequeno. No exemplo ao lado, a
fonte do parágrafo superior tem uma altura-Z mais
elevada que a do inferior.

6. LEADING
ESPAÇAMENTO ENTRE LINHAS
O espaçamento entre linhas afecta sobretudo a coesão
do texto como um todo e o seu subsquente
agrupamento perceptivo. Quanto maior é o leadin,g
maior o ênfase visual que, individualmente, cada uma
das linhas adquire, e, inversamente, menor é o
agrupamento visual do texto (conjunto de linhas).
A partir de um certo valor de leading o texto perde a sua
coesão e deixa de ser percepcionado como um
elemento visual.

7. LEADING
QUAL O VALOR ADEQUADO?
120% ?
Não existe um valor certo, absoluto, que optimize a
legibilidade do texto. De facto, a legibilidade e o valor
do leading adequado para um fonte depende um
variado número de factores, desgnadamente:
o corpo, a altura-x, o estilo da fonte, o contraste do
traço, a largura e até mesmo os atributos aplicados ao
texto, tal como a tonalidade cromática, a saturação e o
contraste de luminosidade.
Contudo, em termos médios é convencionalmente
aceite um valor para o leading de 120% relativamente
à dimensão do corpo. Assim, se uma fonte for aplicada
com 10pt de corpo o espaçamento entre linhas deverá
ser de 12pts (ou 120% de 10pt).
O Adobe Photoshop, o Adobe Illustrator e o Adobe
Indesign têm predefinidos para a opção automática do
leading o valor de 120%.
Este número (mágico) deverá ser encarado como um
ponto de partida para a escolha do leading e não
como uma imposição de natureza absoluta.

11. KERNING
ESPAÇAMENTO ENTRE PAR DE LETRAS
Kerning é o processo de adicionar ou subtrair espaço
entre um par de letras em particular.
Nem todas as letras do alfabeto ficam bem com o
mesmo espaçamento. Por exemplo, a distiância entre a
letra a e a letra W ou V deve ser encurtada quando
comparada com outras combinações, por exemplo a
letra a e i.
Fonte:
https://helpx.adobe.com/illustrator/using/line-character-
spacing.html

12. TRACKING
ESPAÇAMENTO PROPORCIONAL ENTRE
LETRAS
Kerning é o processo de adicionar ou subtrair espaço
entre às letras de um bloco de texto (e não a pares de
letras em particular)
O Tracking afecta visualmente a densidade do texto e
consequentemente a legibilidade do texto.
Quando o corpo de texto é de reduzida dimensão torna-
se necessário adequar com um valor de tracking mais
elevado como forma de assegurar a legibilidade do
texto. Ao adicional espaço negativo em redor das letras
estas torna-se mais facilmente reconhecidas e
percepionadas pelo utilizador.
Quanto menor for o tracking maior a coesão visual da
palavra, inversamente, quanto maior o tracking menor a
força do agrupamento visual da palavra.
Fonte:
https://helpx.adobe.com/illustrator/using/line-character-spacing.html
https://en.wikipedia.org/wiki/Letter-spacing
http://lowendmac.com/2004/text-and-typography-leading-kerning-tracking-
and-justification/

13. IMPACTO VISUAL DAS
PROPRIEDADES DA FONTE
- Serifas (serifs)
- Contraste e espaço negativo
- Proporção da altura-X (x-Heigtht
- Estresse (stress)
- Peso (weigth)
- Largura (width)

14. Contraste
O contraste ou proporção do filete consiste na
espessura relativa do traço da letra. Quanto maior o
contraste maior é a variação entre o espessura do
traço mais fino e a espessura do traço mais grosso.

15. espaço negativo
Letras com menor contraste possuem, geralmente,
mais espaço branco (negativo) entre elas.
Deste modo, podemos tornar mais leve o bloco de
texto que forma o parágrafo escolhendo uma fonte
com menor contraste, sem que o Leading (espaço
entre as linhas) seja alterado.

16. O que é o contraste tipográfico?
https://www.quora.com/What-is-contrast-in-typography
Martin Silvertant, B.A. graphic design / type designer, typographer

17. In typography, contrast refers to weight contrast, which is to say that
contrast denotes the difference between thick and thin strokes.
Let me illustrate what contrast is using the Quora logo. As you can
see, the logo features quite a low weight contrast. This is necessary as
the logo has been optimized for smaller sizes, and a high contrast
would mean the logo becomes more feeble at small sizes.

18. Once you increase the weight contrast (by decreasing the thickness of
the thin strokes, in this case), the logo becomes sharper and more
classical, and more appropriate for display size.

19. Increase the weight contrast even further, and the typeface becomes
transitional (just like Baskerville, on which the Quora logo was based).
Transitional typefaces are a step in between medium-contrast
garalde/aldine typefaces such as Garamond, and didone/modern
typefaces such as Didot.

20. Increase the weight contrast even further, and you get something
resembling didone typefaces—not necessarily in style, but certainly in
terms of contrast. Note also that since I have increased the contrast by
decreasing the thickness of the thin strokes, there is actually a
considerable reduction in overall weight as well.

21. And below you can see the Quora logo with the same thickness of thin
strokes as the logo above, but with a thicker main stroke—thus
increasing the contrast while at the same time increasing the weight.
So you see, it’s predominantly the thick strokes that denote the weight
of the typeface, but to a lesser extent the thin strokes contribute to the
weight as well; while the difference between thick and thin strokes
defines the contrast. The greater the weight, the greater the contrast
can be in principle, while the lower the weight of a typeface, the lower
its contrast will be by necessity..

22. CRITÉRIOS PARA
ESCOLHA DE UMA FONTE
A fonte pertence a uma família que proporciona todos os pesos e cortes necessários?
Aspectos técnicos: será que o set de glifos incluiu todos os diacriticos e sinais de pontuação necessários?
Aspectos funcionais: legibilidade, que é a usabilidade das letras (design das letras, formas características,
espaçamentos)
Estética, relação entre os diferentes caráteres e cortes.
Relacão com outras fontes utilizadas no mesmo documento.
Aspectos de concordância (romano e itálico de uma mesma fonte)
Fonte:
http://tipografos.net/glossario/escolha-de-fontes.html
http://letritas.info/15-tips-al-elegir-un-buen-tipo-de-texto/

23. https://vimeo.com/167303970