Resumos · Oficina de Multimédia BPT · Secundário

Texto e tipografia

A tipografia é a matéria plástica com que se dá voz ao texto num produto multimédia. Estuda-se aqui a anatomia do tipo e a classificação das famílias, as medidas e o espacejamento (corpo, entrelinha, kerning, tracking e medida da linha), a construção da hierarquia com escala modular e grelha, e as condições de legibilidade e de contraste no ecrã, com o objetivo prático de escolher as fontes mais adequadas a cada produto e de as integrar de forma harmoniosa com os restantes elementos gráficos. Corresponde ao domínio « Texto » de Oficina de Multimédia B, disciplina de opção do 12.º ano sem Exame Final Nacional, avaliada internamente pelas produções, pelo portefólio e pelo projeto.

4 secções~31 min de leitura5 competênciasNível Base 1 · Padrão 2 · Aprofundamento 1

T·0333 / 8

Perfil de exame

Identificar as partes anatómicas do tipo e classificar uma fonte na sua famíliaSelecionar e combinar fontes adequadas ao produto multimédia e ao seu públicoAplicar corretamente corpo, entrelinha, kerning, tracking e medida da linhaConstruir hierarquia tipográfica e composição equilibrada com grelha e escala modularAvaliar e garantir a legibilidade e o contraste do texto no ecrã

Operadores:compreendeidentificaclassificaaplicacalculacompõeavaliajustifica

nível básico

Reconhecer as partes do tipo e as grandes famílias tipográficas, e aplicar corpo, entrelinha e medida da linha dentro dos intervalos recomendados.

nível avançado

Construir uma escala modular e uma grelha próprias e fundamentar a composição pela hierarquia, pela combinação de fontes e pelo contraste de luminância exigido no ecrã.

Profundidade

Texto

Conteúdo · 4 secções

Texto e tipografia

Anatomia do tipo e classificação das famílias#

BaseAE-oficina-de-multimedia-b-12-texto-e-tipografia

Uma letra desenha-se sobre um sistema de linhas horizontais invisíveis que a tipografia herdou da escrita (Fig. 1). A linha de base é a linha sobre a qual assenta a generalidade dos caracteres e é a referência de todas as outras. A altura-x é a altura das minúsculas sem ascendente nem descendente, medida da linha de base ao topo do « x »; a altura de maiúsculas mede-se da linha de base ao topo do « H ». Os ascendentes são as hastes que sobem acima da altura-x, como no « b » ou no « l », e em muitas fontes ultrapassam mesmo a altura de maiúsculas; os descendentes descem abaixo da linha de base, como no « p » ou no « g ». Quem compõe um texto está sempre a alinhar estas linhas, mesmo sem dar por isso.

Anatomia do tipo

Fig. 1Fig. 1 — Anatomia do tipo: a palavra « Hbpx » sobre as linhas de ascendentes, de altura de maiúsculas, de altura-x, de base e de descendentes, com uma serifa destacada e a contraforma assinalada.

Dentro do desenho da letra, cada parte tem nome próprio. A haste é o traço principal, geralmente vertical; o braço é o traço que parte da haste e termina livre, como nos do « E » ou do « K »; a barriga é o traço curvo e fechado do « b », do « p » ou do « d ». O branco que esse traço encerra é a contraforma — chamada olho quando é o interior completamente fechado de um « o » ou de um « e » — e é tão decisivo para o reconhecimento da letra como o traço preto que a desenha. A serifa é o pequeno remate transversal com que a haste termina; nas fontes sem serifa, o modo como o traço acaba, cortado a direito, na oblíqua ou afinando, chama-se igualmente remate e é uma das assinaturas da fonte. Falta ainda o eixo, a inclinação da linha que une as zonas mais finas da barriga, e a espessura do traço, que decide o quanto a mancha de texto escurece a página.

O contraste é a diferença entre os traços grossos e os finos dentro da mesma letra e é a propriedade que mais depressa se perde no ecrã. Uma fonte de contraste extremo é magnífica num título de revista e desfaz-se em corpo de texto num ecrã, porque os traços finos caem abaixo do que a grelha de pixels consegue representar. Uma linear geométrica, quase sem contraste, mantém-se firme em corpo pequeno mas cansa em textos longos, por as letras se tornarem demasiado parecidas entre si. A regra de atelier é simples: quanto menor o corpo e menor a densidade do suporte, menor deve ser o contraste da fonte escolhida.

O corpo não diz quão grande a letra parece. O corpo é a medida nominal do tipo, herdada do bloco de metal que continha o desenho, e inclui folga acima e abaixo; o que o olho vê como tamanho é sobretudo a altura-x. Por isso duas fontes compostas rigorosamente no mesmo corpo podem parecer de tamanhos muito diferentes: a razão entre a altura-x e o corpo varia, consoante o desenho, entre cerca de 0,45 e 0,55. A consequência para o projeto é direta: nunca se escolhe um corpo pelo número, escolhe-se olhando para a composição, e ao trocar de fonte a meio de um trabalho é quase sempre preciso reafinar o corpo, a entrelinha e a medida da linha.

As famílias tipográficas classificam-se pelo desenho. Entre as serifadas distinguem-se as romanas antigas, ou garaldes, de contraste moderado, eixo inclinado e serifas em cunha, que nasceram do gesto da pena; as de transição, de contraste maior e eixo quase vertical; as modernas, ou didonas, de contraste extremo, eixo vertical e serifas finas como fios; e as egípcias, ou slab, de serifas retangulares e espessas, praticamente sem contraste. Cada uma traz consigo uma época e um tom: uma romana antiga soa a livro e a tradição, uma didona a moda e a luxo, uma egípcia a robustez e a cartaz. Escolher a família é, por isso, já uma decisão de conteúdo e não apenas de forma.

Entre as não serifadas, chamadas lineares ou grotescas, separam-se as grotescas do século XIX e as neogrotescas do século XX, neutras e de terminações horizontais; as geométricas, construídas a partir do círculo e do quadrado; e as humanistas, cujas proporções seguem as das romanas e que, por terem contraformas mais abertas, costumam ser as mais legíveis em corpo pequeno. Restam três grupos com usos muito próprios: as manuscritas, que imitam a escrita à mão ou a caligrafia; as decorativas, ou de fantasia, desenhadas para chamar a atenção e não para serem lidas em massa; e as monoespaçadas, em que todos os caracteres ocupam a mesma largura, o que as tornou a convenção do código e dos dados alinhados. A Fig. 2 reúne os cinco grupos com os traços que os distinguem e o uso que lhes cabe em multimédia.

Famílias tipográficas

Fig. 2Fig. 2 — As cinco famílias tipográficas, os seus traços distintivos e o uso recomendado em multimédia.

Uma família tipográfica não é uma fonte, é um sistema. Dentro dela variam o peso (fino, normal, seminegrito, negrito, preto), a largura (condensada, normal, expandida) e o estilo (redondo e itálico). O itálico verdadeiro é um desenho distinto, de estrutura caligráfica, com letras que mudam de forma e não apenas de inclinação; o oblíquo é o redondo inclinado por cálculo e, quando o programa o gera artificialmente, deforma as curvas e engorda as diagonais. Escolher uma família ampla é muitas vezes resolver de uma só vez toda a hierarquia de um projeto: os contrastes de peso e de largura chegam para distinguir títulos, entradas e texto corrido sem introduzir uma segunda fonte.

h_{\text{x}} = c \times k_{\text{x}}

Altura-x em função do corpo

h_x é a altura-x, c o corpo e k_x a razão de altura-x própria do desenho da fonte, tipicamente entre cerca de 0,45 e 0,55. É esta razão, e não o corpo, que decide o tamanho aparente do texto.

Exemplo resolvido

Duas fontes no mesmo corpo, dois tamanhos aparentes

Duas fontes são compostas rigorosamente no mesmo corpo de 16 pt. A fonte A tem uma razão de altura-x de 0,45 e a fonte B de 0,55. Calcula a altura-x de cada uma, compara os tamanhos aparentes e determina em que corpo teria a fonte A de ser composta para igualar a altura-x da fonte B.

Altura-x da fonte A
Aplicando h_x = c × k_x: 16 × 0,45 = 7,2 pt.
$h_{\text{x,A}} = 16 \times 0{,}45 = 7{,}2\ \text{pt}$
Altura-x da fonte B
16 × 0,55 = 8,8 pt, no mesmo corpo nominal.
Diferença aparente
8,8 ÷ 7,2 = 1,222…, ou seja, a fonte B parece cerca de 22 % maior do que a fonte A, apesar de o corpo declarado ser exatamente o mesmo.
Corpo equivalente
Para que a fonte A atinja 8,8 pt de altura-x: c = 8,8 ÷ 0,45 = 19,56 pt, ou seja, cerca de 19,6 pt.
$c_{\text{A}} = \frac{8{,}8}{0{,}45} \approx 19{,}6\ \text{pt}$

Resultado: A fonte A precisa de cerca de 19,6 pt para igualar o tamanho aparente da fonte B a 16 pt — quase 4 pt de diferença. É por isto que, ao trocar de fonte num projeto, se reafinam sempre o corpo e a entrelinha em vez de manter o número anterior.

Erros frequentes

Confundir fonte com família tipográfica: a família é o sistema completo (pesos, larguras, redondo e itálico) e a fonte é uma das suas variantes.
Julgar o tamanho aparente pelo número do corpo — duas fontes no mesmo corpo parecem diferentes porque têm alturas-x diferentes.
Aplicar negrito ou itálico falsos, gerados pelo programa, quando a família já traz os desenhos verdadeiros: as curvas deformam-se e nota-se em corpo grande.

Revisão ativa

Escolhe três fontes instaladas no teu computador, uma de cada grupo: serifada, não serifada e monoespaçada. Compõe a palavra « Hbpx » em cada uma, no mesmo corpo de 48 pt, e desenha por cima as linhas de base, de altura-x, de altura de maiúsculas, de ascendentes e de descendentes. Indica depois, para cada fonte, a subfamília a que pertence, uma característica do desenho que a denuncia e um produto multimédia em que a usarias.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Oficina de Multimédia B — 12.º ano (DGE) (Direção-Geral da Educação (DGE)) · Oficina de Multimédia B — documento curricular da disciplina (Direção-Geral da Educação (DGE))

Medidas e espacejamento: corpo, entrelinha, kerning e tracking#

PadrãoAE-oficina-de-multimedia-b-12-texto-e-tipografia

O corpo mede-se em pontos. O ponto tipográfico em uso na composição digital é o ponto PostScript, que vale exatamente 1/72 de polegada, ou seja cerca de 0,353 mm. No ecrã, a referência do CSS fixa a polegada em 96 pixels, pelo que 1 pt equivale a 96 ÷ 72 = 1,333… px: é por isso que um corpo de 12 pt corresponde aos 16 px que os navegadores adotam por omissão. Na prática, um projeto para ecrã trabalha-se em pixels ou em unidades relativas e um projeto para impressão em pontos, mas a lógica é a mesma — o que muda é a unidade de referência do suporte.

A entrelinha é a distância entre as linhas de base de duas linhas consecutivas, e não o espaço branco que fica entre elas (Fig. 3); o nome vem das lâminas de chumbo que se intercalavam entre as linhas na composição manual. A regra prática corrente situa-a entre cerca de 120 % e 145 % do corpo para texto corrido: abaixo disso as linhas colam-se e os descendentes de uma tocam nos ascendentes da seguinte; acima, o bloco desfaz-se em linhas soltas que deixam de se ler como um parágrafo. Títulos em corpo grande pedem entrelinhas proporcionalmente menores, próximas de 100 % a 110 %, porque a distância absoluta já é grande. E há uma dependência que se esquece com frequência: quanto mais longa a linha, mais entrelinha é preciso dar, porque o olho tem de percorrer mais espaço até encontrar o início da linha seguinte.

Kerning, tracking e entrelinha

Fig. 3Fig. 3 — Três ajustes sobre o mesmo material: o kerning atua num par (« AV »), o tracking em todo o conjunto e a entrelinha na distância entre linhas de base.

O kerning é o ajuste do espaço entre um par específico de caracteres. Existe porque cada caractere ocupa uma caixa retangular e certas combinações de formas deixam buracos: « AV », « To », « Ta », « LT » ou « Wa » abrem um branco que o olho lê como uma quebra de palavra. As fontes bem desenhadas trazem tabelas de kerning próprias, o chamado kerning métrico, e os programas de edição oferecem ainda um kerning ótico, que calcula os ajustes a partir da forma dos glifos. Onde isto se vê é nos títulos e nos logótipos, compostos em corpo grande: aí um par mal ajustado é imediatamente visível e denuncia o trabalho. Em texto corrido, em corpo pequeno, o kerning métrico da fonte quase sempre chega.

O tracking é o espacejamento uniforme aplicado a todo um conjunto de caracteres e não se confunde com o kerning, que atua num par isolado. Um tracking positivo abre o conjunto e um tracking negativo fecha-o. É útil em duas situações opostas: abrir ligeiramente palavras em caixa alta e texto muito pequeno, que naturalmente parecem apertados, e fechar títulos em corpo muito grande, onde os espaços entre letras parecem excessivos. O erro clássico é usar tracking negativo para fazer caber um texto num espaço curto — o texto passa a caber e deixa de se ler, o que troca um problema de composição por um problema de comunicação.

A medida da linha é o comprimento da linha de texto e mede-se melhor em caracteres do que em centímetros. A recomendação corrente, retomada por Robert Bringhurst, situa-a entre 45 e 75 caracteres por linha para texto corrido numa coluna única, com cerca de 66 como valor de referência. A razão é o movimento do olho: a leitura faz-se por saltos e, no fim de cada linha, o olho executa um salto de retorno até ao início da linha seguinte. Se a linha for muito longa, esse retorno falha e relê-se ou salta-se uma linha inteira; se for muito curta, as quebras sucedem-se e o ritmo da leitura parte-se. Em ecrãs largos isto obriga a limitar a largura do bloco mesmo havendo espaço de sobra: o branco lateral não é desperdício, é a condição da leitura.

e = c \times p

Entrelinha como percentagem do corpo

e é a entrelinha, c o corpo e p a percentagem escolhida, expressa em fração. Para um corpo de 16 pt a 140 %, e = 16 × 1,40 = 22,4 pt; o intervalo recomendado para texto corrido vai de cerca de 1,20 a 1,45.

\text{px} = \text{pt} \times \frac{96}{72}

Conversão entre ponto tipográfico e pixel

Na referência do CSS, uma polegada tem 96 pixels e um ponto vale 1/72 de polegada, pelo que 1 pt = 1,333… px. Daí 12 pt = 16 px, o corpo por omissão dos navegadores.

Exemplo resolvido

Entrelinha de um bloco de texto, em pontos e em pixels

Um bloco de texto corrido está composto em corpo de 16 pt e pretende-se uma entrelinha de 140 %. Calcula a entrelinha em pontos e converte o corpo e a entrelinha para pixels, na referência do CSS de 96 pixels por polegada.

Entrelinha em pontos
e = c × p = 16 × 1,40 = 22,4 pt.
$e = 16 \times 1{,}40 = 22{,}4\ \text{pt}$
Fator de conversão
1 pt = 96 ÷ 72 = 1,333… px.
Corpo em pixels
16 × 1,333… = 21,33 px.
Entrelinha em pixels
22,4 × 1,333… = 29,87 px.
Verificação
29,87 ÷ 21,33 = 1,40. A razão de 140 % mantém-se, como tem de ser: a conversão é uma simples mudança de unidade e não altera proporções.

Resultado: Entrelinha de 22,4 pt, equivalente a cerca de 29,87 px para um corpo de 21,33 px. Numa folha de estilos escrever-se-ia apenas a razão 1,4, que é independente da unidade e sobrevive a qualquer mudança de corpo.

Exemplo resolvido

Largura de uma coluna a partir da medida da linha

Pretende-se uma coluna de texto com cerca de 65 caracteres por linha, em corpo de 16 pt. Estima a largura da coluna em pontos, em pixels e em centímetros, usando a aproximação corrente de que a largura média do caractere ronda metade do corpo.

A aproximação, e os seus limites
Trata-se de uma aproximação grosseira: a largura média do caractere depende da fonte — uma condensada é bem mais estreita e uma monoespaçada tem largura fixa —, pelo que o valor serve para partir e não para fechar. Toma-se largura média ≈ 0,5 × corpo = 0,5 × 16 = 8 pt.
Largura em pontos
65 caracteres × 8 pt = 520 pt.
$L \approx 65 \times 0{,}5 \times 16 = 520\ \text{pt}$
Em pixels
520 × 96 ÷ 72 = 693,3 px.
Em centímetros
520 ÷ 72 = 7,22 polegadas; 7,22 × 2,54 = 18,3 cm.
Confirmação no ecrã
Compõe-se o bloco a essa largura e conta-se uma linha real. Se der 58 ou 71 caracteres, ajusta-se a largura até a contagem cair no intervalo de 45 a 75 — é a contagem que manda, não a estimativa.

Resultado: Cerca de 520 pt, ou seja 693 px, ou 18,3 cm: um valor de partida a confirmar contando os caracteres de uma linha real, precisamente porque a largura média do caractere varia com a fonte escolhida.

Erros frequentes

Trocar kerning com tracking: o kerning ajusta um par específico de caracteres, o tracking abre ou fecha todo um conjunto.
Deixar a entrelinha por omissão num bloco de linhas longas — uma linha longa precisa de mais entrelinha, não da mesma.
Apertar o tracking para fazer caber o texto no espaço disponível, sacrificando a leitura à composição.
Medir a medida da linha em centímetros e não em caracteres, esquecendo que o mesmo comprimento dá contagens muito diferentes consoante a fonte e o corpo.

Revisão ativa

Compõe o mesmo parágrafo de cerca de 120 palavras três vezes, sempre em corpo de 16 pt: (a) entrelinha a 100 % e medida de cerca de 100 caracteres; (b) entrelinha a 140 % e medida de cerca de 65 caracteres; (c) entrelinha a 180 % e medida de cerca de 30 caracteres. Lê as três versões, cronometra cada leitura e escreve três linhas sobre o que mudou — onde o olho se perdeu, onde o ritmo se partiu e qual das versões usarias num sítio da escola.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Oficina de Multimédia B — 12.º ano (DGE) (Direção-Geral da Educação (DGE))

Hierarquia, grelha e composição#

PadrãoAE-oficina-de-multimedia-b-12-texto-e-tipografia

Hierarquia é dizer ao olho por onde começar e em que ordem continuar. Constrói-se por contraste, e há seis instrumentos ao dispor: o corpo, o peso, a caixa, a cor, o espaço e a posição. A regra que separa um trabalho resolvido de um trabalho hesitante é usar poucos instrumentos, mas usá-los a fundo: um título 60 % maior do que o texto lê-se como um título, um título 15 % maior lê-se como um descuido. Três níveis — título, entrada e texto corrido — chegam para a esmagadora maioria dos produtos multimédia; a partir do quarto, a hierarquia começa a competir consigo própria e o leitor deixa de saber para onde olhar.

A escala modular responde à pergunta « que corpos uso? » com uma razão constante em vez de números avulsos. Escolhe-se um corpo base c_0 e uma razão r, e cada degrau obtém-se multiplicando o anterior por r, segundo c_n = c_0 × r^n. As razões mais usadas vêm dos intervalos musicais: 1,125 (segunda maior), 1,25 (terça maior), 1,333 (quarta justa) e 1,5 (quinta justa). Uma razão pequena dá uma escala discreta, adequada a interfaces densas; uma razão grande dá contrastes dramáticos, adequados a cartazes e a genéricos. A Fig. 4 mostra a escala de razão 1,25 a partir de um corpo base de 16 pt; na prática arredondam-se os valores para números manejáveis, sem que a proporção se perca.

Escala modular de razão 1,25 a partir de 16 pt

Fig. 4Fig. 4 — Escala modular de razão 1,25 a partir de um corpo base de 16 pt: 16 → 20 → 25 → 31,25 → 39,06 pt.

A grelha é a estrutura invisível que faz os elementos parecerem colocados de propósito e não onde calharam. Define-se por margens, o branco que rodeia e protege a mancha; por colunas, as faixas verticais onde o conteúdo assenta; por goteiras, o branco entre colunas que impede que duas colunas vizinhas se leiam como uma única linha; e, no caso do texto, por uma grelha de linha de base a que todas as linhas se alinham, incluindo as das legendas e das colunas vizinhas (Fig. 5). Uma grelha de doze colunas tornou-se a convenção da Web porque doze se divide por dois, três, quatro e seis, permitindo muitos arranjos diferentes sobre a mesma estrutura. A grelha não impede o gesto plástico: quebrá-la deliberadamente num ponto só produz efeito porque existe uma regra a ser quebrada.

Composição em grelha com três níveis de hierarquia

Fig. 5Fig. 5 — Composição em grelha: margens, três colunas e goteiras, com três níveis de hierarquia — título (a realce), entrada e texto corrido.

O alinhamento é a decisão sobre que margem fica direita. O alinhamento à esquerda, com a margem direita irregular, é o mais seguro para o ecrã: o olho encontra sempre o início da linha no mesmo sítio e os espaços entre palavras mantêm-se todos iguais. O centrado só funciona em blocos curtos e simétricos, como títulos, convites e genéricos, porque em texto corrido nenhuma das margens serve de referência ao olho. O justificado alinha as duas margens abrindo os espaços entre palavras e, sem hifenização e sem medida suficientemente larga, produz rios: canais de branco que atravessam o parágrafo na vertical e que se detetam melhor virando a página ao contrário ou desfocando os olhos. Como princípio geral, alinhar tudo a um mesmo eixo é quase sempre melhor do que alinhar cada bloco ao seu.

Combinar fontes faz-se por contraste, nunca por semelhança. Duas não serifadas neutras postas lado a lado não criam contraste nenhum, criam a suspeita de um engano no ficheiro. As combinações que funcionam opõem classes — uma serifada de texto com uma linear de títulos, uma egípcia com uma humanista — ou dispensam a segunda fonte, tirando todo o contraste dos pesos e das larguras de uma família ampla. Duas famílias chegam para qualquer produto; a terceira é quase sempre sinal de indecisão e não de riqueza.

Criar um produto gráfico integrando de forma harmoniosa os diferentes elementos significa fazer o texto e a imagem partilharem a mesma estrutura, e não apenas coexistirem na mesma folha. Na prática: o texto alinha pelas colunas que a imagem ocupa, os espaços entre blocos vêm da mesma escala que governa os corpos, e as legendas repetem o alinhamento do corpo do texto. O espaço em branco é um elemento ativo e não aquilo que sobra: é ele que agrupa, porque o que está junto se lê como pertencendo ao mesmo, e é ele que separa. Sobre imagem, o texto só se lê com contraste garantido, o que se resolve procurando uma zona calma na fotografia, aplicando um véu de cor ou assentando o texto numa faixa sólida — e nunca aumentando o peso da letra na esperança de que chegue.

c_{n} = c_{0} \times r^{\,n}

Escala tipográfica modular

c_0 é o corpo base, r a razão e n o número do degrau. Com c_0 = 16 pt e r = 1,25 obtêm-se 20 pt, 25 pt, 31,25 pt e 39,06 pt (Fig. 4); razões correntes são 1,125, 1,25, 1,333 e 1,5.

Exemplo resolvido

Gerar uma escala modular de razão 1,25

Constrói uma escala tipográfica modular com corpo base de 16 pt e razão 1,25, com quatro degraus acima da base. Apresenta os valores exatos, os valores arredondados que usarias no projeto e a atribuição de cada degrau a um nível de hierarquia.

Degrau 1
16 × 1,25 = 20 pt.
Degrau 2
20 × 1,25 = 25 pt.
Degrau 3
25 × 1,25 = 31,25 pt.
Degrau 4
31,25 × 1,25 = 39,0625 pt, que se apresenta arredondado a 39,06 pt.
$c_{4} = 16 \times 1{,}25^{4} = 39{,}0625\ \text{pt}$
Um degrau abaixo da base
A escala também desce: 16 ÷ 1,25 = 12,8 pt, corpo próprio para legendas e notas de apoio.
Atribuição aos níveis
Legendas 12,8 pt; texto corrido 16 pt; entrada 20 pt; subtítulo 25 pt; título 39 pt. Ficam por usar degraus intermédios, e é bom que fiquem: uma escala serve para escolher de um conjunto, não para usar tudo.

Resultado: A escala é 16 → 20 → 25 → 31,25 → 39,06 pt (Fig. 4). No projeto arredondam-se para 16, 20, 25, 31 e 39 pt: a proporção mantém-se percetível e os valores tornam-se manejáveis na folha de estilos.

Erros frequentes

Fazer hierarquia com diferenças mínimas de corpo: um contraste tímido não se lê como hierarquia, lê-se como descuido.
Justificar texto em colunas estreitas e sem hifenização, abrindo rios de branco que atravessam o parágrafo.
Combinar duas fontes muito parecidas — o resultado não tem contraste nem unidade, apenas ambiguidade.
Tratar o espaço em branco como uma sobra a preencher, em vez de o usar deliberadamente para agrupar e separar.

Revisão ativa

Desenha o cartaz A3 de um festival de curtas-metragens da tua escola. Define primeiro, por escrito, a escala modular (corpo base e razão) e a grelha (margens, número de colunas e goteira); só depois compõe. O cartaz tem de apresentar, em três níveis de hierarquia inequívocos, o nome do festival, as datas e o local, e a lista de oito filmes. Entrega o cartaz e um segundo ficheiro com a grelha visível por cima da composição, com as medidas assinaladas.

Evocação ativa

Recorda os pontos-chave — depois revela.

Legibilidade e leiturabilidade no ecrã#

AprofundamentoAE-oficina-de-multimedia-b-12-texto-e-tipografia

Legibilidade e leiturabilidade não são a mesma coisa, e confundi-las conduz a decisões erradas. A legibilidade é a facilidade com que se distingue um caractere de outro e depende do desenho da fonte: em muitas fontes, um « I » maiúsculo, um « l » minúsculo e o algarismo « 1 » são praticamente indistinguíveis, tal como um « O » e um zero, e um « r » seguido de « n » pode ler-se como « m ». A leiturabilidade é a facilidade de ler um texto continuado e depende sobretudo da composição: corpo, entrelinha, medida da linha, alinhamento e contraste. Uma fonte perfeitamente legível pode produzir um bloco de texto insuportável se estiver mal composta; o inverso, uma fonte ilegível bem composta, não existe.

O ecrã impõe condições que o papel não impõe. A letra deixa de ser um contorno contínuo e passa a ser reconstruída numa grelha de pixels: quanto menor a densidade do ecrã, mais grosseira é a aproximação, e são os traços finos e as serifas delicadas que desaparecem primeiro. A renderização de texto suaviza os contornos e o hinting ajusta-os à grelha, para que hastes e linhas de base caiam em pixels inteiros e não fiquem esborratadas. E o ecrã emite luz em vez de a refletir: o texto claro sobre fundo escuro tende a irradiar sobre o fundo e a parecer mais gordo, razão pela qual muitas vezes se usa um peso ligeiramente mais fino em modo escuro do que em modo claro.

Há um corpo abaixo do qual não se desce. Em texto corrido para ecrã, 16 px é o valor de referência — é também o corpo por omissão dos navegadores, equivalente a 12 pt — e descer abaixo de 14 px transforma a leitura num esforço para muitos leitores. Legendas, notas e rodapés podem descer aos 14 px, mas não é aceitável compor a 10 ou 11 px conteúdo que se espera que alguém leia. Acresce que o texto deve poder ser ampliado até 200 % sem perda de conteúdo nem de funcionalidade, o que obriga a compor em unidades relativas e a testar a página ampliada, e não apenas no tamanho de origem.

O contraste entre o texto e o fundo mede-se por um rácio de luminâncias relativas, R = (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância da cor mais clara e L2 a da mais escura, ambas entre 0 (preto) e 1 (branco). As diretrizes de acessibilidade WCAG 2.1, no nível AA, exigem pelo menos 4,5:1 para texto corrente e 3:1 para texto grande, considerando-se grande o texto a partir de 18 pt, ou de 14 pt a negrito, o que equivale a cerca de 24 px e 18,66 px. O nível AAA sobe estes valores para 7:1 e 4,5:1. O máximo possível é 21:1, o rácio do preto puro sobre branco puro (Fig. 6). O cinzento claro sobre branco, tão apreciado em maquetas, é a falha mais comum: parece delicado no monitor do autor e desaparece num telemóvel ao sol.

Contraste e acessibilidade

Fig. 6Fig. 6 — Contraste de luminância: o máximo possível (21:1), os limiares normativos do nível AA (4,5:1 e 3:1) e uma situação corrente de falha.

Nem todas as fontes servem para o ecrã. Uma fonte pensada para ecrã costuma ter altura-x generosa, contraformas abertas, contraste baixo e caracteres bem diferenciados entre si — foi por isso que as humanistas, serifadas e não serifadas, se tornaram a escolha por defeito das interfaces. Uma didona, com o seu contraste extremo, ou uma manuscrita fina, desenhadas para o papel e para corpo grande, esboroam-se quando usadas em corpo de texto num ecrã. A decisão de projeto é simples de enunciar e exigente de cumprir: a fonte escolhe-se para o suporte e para o corpo em que vai realmente ser usada, e prova-se no dispositivo real — no telemóvel, no projetor da sala —, nunca só no monitor grande do atelier.

Numa página, cada peso e cada estilo de uma família é um ficheiro que tem de ser transferido antes de o texto poder ser desenhado com ele. Carregar seis variantes de duas famílias custa tempo e, enquanto a fonte não chega, o navegador ou esconde o texto — o efeito de texto invisível, FOIT — ou desenha-o com uma fonte de recurso e troca-a depois, com um salto visível, o efeito de troca de fonte, FOUT. Reduz-se o problema escolhendo poucas variantes, usando o formato WOFF2 por ser mais comprimido, criando subconjuntos com apenas os caracteres necessários e declarando na pilha de fontes uma fonte de recurso com métricas próximas, para que o salto seja pequeno. Uma tipografia excelente que chega tarde é, para quem lê, uma tipografia má.

R = \frac{L_{1} + 0{,}05}{L_{2} + 0{,}05}

Rácio de contraste (WCAG 2.1)

L1 é a luminância relativa da cor mais clara e L2 a da mais escura, ambas entre 0 (preto) e 1 (branco). O branco sobre preto dá (1 + 0,05) ÷ (0 + 0,05) = 21, o máximo possível; o nível AA exige 4,5:1 em texto corrente e 3:1 em texto grande.

Exemplo resolvido

Que contraste exige cada bloco de texto?

Uma página tem o texto corrido a 16 px e um título a 30 px, ambos em peso normal. Determina o rácio de contraste mínimo que cada um exige no nível AA das WCAG 2.1 e calcula o rácio de preto puro sobre branco puro.

O limiar de texto grande
As WCAG 2.1 consideram grande o texto com pelo menos 18 pt, ou 14 pt a negrito. Convertendo com 1 pt = 96 ÷ 72 px: 18 × 1,333… = 24 px e 14 × 1,333… = 18,66 px.
Texto corrido
16 px é menor do que 24 px e não está a negrito, pelo que conta como texto corrente: exige pelo menos 4,5:1.
Título
30 px é maior do que 24 px, pelo que conta como texto grande: exige pelo menos 3:1.
Preto sobre branco
A luminância relativa do branco é 1 e a do preto é 0, logo R = (1 + 0,05) ÷ (0 + 0,05) = 1,05 ÷ 0,05 = 21.
$R = \frac{1 + 0{,}05}{0 + 0{,}05} = \frac{1{,}05}{0{,}05} = 21$
Leitura do resultado
21:1 está muito acima de ambos os mínimos. É essa folga que permite afastar-se do preto puro — para um cinzento escuro, mais confortável em ecrãs luminosos — sem cair abaixo do limiar.

Resultado: O texto de 16 px exige 4,5:1 e o título de 30 px exige 3:1; preto sobre branco dá 21:1, o rácio máximo possível. Um cinzento claro sobre branco, pelo contrário, cai facilmente abaixo de 4,5:1 e reprova no nível AA.

Erros frequentes

Confundir legibilidade com leiturabilidade e tentar resolver um bloco mal composto trocando de fonte, quando o que falta é entrelinha ou medida da linha.
Compor texto em cinzento claro sobre branco por parecer elegante — quase sempre fica abaixo dos 4,5:1 exigidos no nível AA.
Avaliar o produto apenas no monitor do atelier, com brilho alto e alta densidade de pixels, e nunca no telemóvel, ao sol ou no projetor.
Carregar meia dúzia de pesos de duas famílias sem necessidade, atrasando o carregamento e provocando saltos de fonte visíveis.

Revisão ativa

Faz uma auditoria tipográfica de uma folha a uma página do sítio da tua escola. Regista: o corpo do texto corrido em pixels, a entrelinha, o número de caracteres por linha, as famílias usadas e quantas variantes são carregadas. Mede com uma ferramenta de verificação de contraste o rácio do texto corrente e o de um título e indica, para cada um, se cumpre o nível AA. Termina com três correções concretas, cada uma justificada por um valor que mediste.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Oficina de Multimédia B — 12.º ano (DGE) (Direção-Geral da Educação (DGE)) · Web Content Accessibility Guidelines (WCAG) 2.1 — Contrast (Minimum), critério 1.4.3 (World Wide Web Consortium (W3C))

Referências e fontes

Fontes

Direção-Geral da Educação (DGE)

World Wide Web Consortium (W3C)

Web Content Accessibility Guidelines (WCAG) 2.1 — Contrast (Minimum), critério 1.4.3

Texto e tipografia

4 secções~31 min de leitura5 competênciasNível Base 1 · Padrão 2 · Aprofundamento 1

Texto e tipografia

Pontos-chave

Duas fontes no mesmo corpo, dois tamanhos aparentes

Pontos-chave

Entrelinha de um bloco de texto, em pontos e em pixels

Largura de uma coluna a partir da medida da linha

Pontos-chave

Gerar uma escala modular de razão 1,25

Pontos-chave

Que contraste exige cada bloco de texto?

Fontes

Texto e tipografia

Pontos-chave

Duas fontes no mesmo corpo, dois tamanhos aparentes

Pontos-chave

Entrelinha de um bloco de texto, em pontos e em pixels

Largura de uma coluna a partir da medida da linha

Pontos-chave

Gerar uma escala modular de razão 1,25

Pontos-chave

Que contraste exige cada bloco de texto?

Fontes