Criatividade, Design

Design para CSSers - tipografia, parte III

Tipos de metal

Você já parou para pensar um pouco a respeito dos tamanhos de letras e se perguntar o que raios afinal quer dizer “corpo 12”? Ele é a medida do quê? Se você conhece um pouco mais, sabe que isso significa que o caractere tem o tamanho de 12 pontos. Muito bem, mas o que são esses tais pontos? Uma coisa está certa, eles não são pixels. Ou são? Mas vieram antes… Então são o quê? De onde surgiram? Medem a altura ou a largura da letra?

A questão do tamanho das letras costuma causar uma grande confusão em quem não tem experiência tipográfica. Pois além de não ser claro o que mede esse sistema, ele parece bastante arbitrário. Os cinco textos abaixo, por exemplo, estão todos no mesmo corpo. Mas parece evidente que não têm o mesmo tamanho. Que raio de medida esdrúxula é essa?

Corpos de alturas diferentes

Por mais que pareça o contrário, o corpo de letra é um sistema bastante preciso. Apesar de ser muito anterior ao pixel, tem influência direta sobre ele. Na época do surgimento da editoração eletrônica, a definição de resolução de tela de 72 ppi foi inspirada na divisão tipográfica, em que uma polegada é dividida em aproximadamente 72 pontos.

Definição de tipo

(A letra c indica o tamanho do corpo do texto. Clique na imagem para saber o que são as outras letrinhas)

Então corpo 12 significa que a letra tem 12/72 de uma polegada, ou aproximadamente 4,2 milímetros. Mas que letra? A, p, x, h são letras de um mesmo alfabeto, cada uma com tamanho completamente diferente das outras. Se o alfabeto é fundido em metal, o molde precisa comportar tanto as hastes ascendentes e descendentes das letras minúsculas (tipo p e b) como os acentos das letras maiúsculas (tipo É), todos apoiados em uma mesma linha de pauta. O corpo de uma letra, portanto, precisa ser maior do que todos esses elementos.

Portanto, em corpo 12, qualquer letra precisa caber em um espaço de 4,2 milímetros. Mas que letra tem esse tamanho? Nenhuma. E que tamanho tem o “a” minúsculo? Não faço a mais pálida idéia.

?!?COMO ASSIM?!? Simples: apesar do corpo ser uma medida rígida e claramente definida, suas subdivisões são arbitrárias. Não há regra para o tamanho proporcional que uma haste deve ter com relação ao bojo da letra, nem uma lei que defina o tamanho e posição de acentos e sinais diacríticos.

Para ficar mais claro, apresento as cinco linhas horizontais que compõem o desenho de um caractere:

Linhas tipográficas

  • A baseline, também conhecida como linha de base ou pauta, define o assentamento dos caracteres. Pouco importa seu formato, todos devem estar apoiados aí.
  • Como você bem sabe, existem letras que “crescem para baixo”, ou que têm hastes e curvaturas que descem, em vez de subir. Chamamos esse tipo de hastes de descendentes. Elas estão presentes no g, j, p, q, y e devem ser apoiadas na linha apropriada para isso. Seu nome? Linha do descendente, óbvio.
  • Da mesma forma, as hastes que sobem de letras como b, d, h, k ou que são, por sua natureza, verticais como f e l, devem terminar na respectiva linha do ascendente. Não, design não tem nada de esotérico, por mais que pareça.
  • Uma curiosidade tiponérdica é que, em letras clássicas com serifa, a altura dos ascendente é levemente maior que a do maiúsculo. Isso facilita a leitura e sua origem remonta a bíblias alemãs, coisa que não dá para explicar aqui. Por isso existe a linha das maiúsculas, diferente da linha do ascendente. Você ainda está comigo? Imagino como deva ser confuso, desculpe-me.
  • Por mais que essas letras sejam altas, não são tão altas quanto o acento das maiúsculas, por isso existe mais uma linha só para defini-las.

Como você pode bem ver, existe uma boa padronização de caracteres, eles não são nada arbitrários. A regra, essencialmente, é esta: você pode fazer o desenho que quiser dentro de um corpo, mas ele deve ser consistente.

Mesmo assim, por que duas letras de mesmo corpo parecem ser de tamanhos tão diferentes? A resposta está na última linha, a da altura-x (ou altura de x, você escolhe). Apesar do nome, ela define a altura média das minúsculas, não só do x. Ele foi escolhido por ser sinônimo de “um caractere qualquer” e também por não ter curvatura, ao contrário de a, c, e, m, n, o, r, s.

Altura-x

Por isso ela pode ser medida com precisão. Afinal de contas, como se mede a altura de uma letra redonda? Pelo vértice ou pela média da altura? As duas respostas estão certas. (e você achava que tipógrafo não era Nerd, tsktsktsk…). Seguindo o mesmo raciocínio, a letra “i” tem pingo, “t” é só uma haste. Sobraram u, v, z. As duas primeiras são variáveis e podem ter algum detalhe em sua haste. Entre x e z, a primeira pelo menos significa alguma coisa.

Edgar Allan Poe

O genial Edgar Allan Poe fez, há um século e meio, uma brincadeira divertida com o x minúsculo ao compor um parágrafo enorme em que absolutamente todas as palavras tinham a letra “o”, que foi substituído por “x”, gerando o texto surreal a seguir. Se você lê inglês, recomendo a leitura deste conto divertido dele, que até serve de estudo arqueológico sobre a forma como se imprimia até 1990:

Sx hx, Jxhn! hxw nxw? Txld yxu sx, yxu knxw. Dxn’t crxw, anxther time, befxre yxu’re xut xf the wxxds! Dxes yxur mxther knxw yxu’re xut? Xh, nx, nx!–sx gx hxme at xnce, nxw, Jxhn, tx yxur xdixus xld wxxds xf Cxncxrd! Gx hxme tx yxur wxxds, xld xwl,–gx! Yxu wxn’t? Xh, pxh, pxh, Jxhn, dxn’t dx sx! Yxu’ve gxt tx gx, yxu knxw, sx gx at xnce, and dxn’t gx slxw; fxr nxbxdy xwns yxu here, yxu knxw. Xh, Jxhn, Jxhn, Jxhn, if yxu dxn’t gx yxu’re nx hxmx–nx! Yxu’re xnly a fxwl, an xwl; a cxw, a sxw; a dxll, a pxll; a pxxr xld gxxd-fxr-nxthing-tx-nxbxdy, lxg, dxg, hxg, xr frxg, cxme xut xf a Cxncxrd bxg. Cxxl, nxw–cxxl! Dx be cxxl, yxu fxxl! Nxne xf yxur crxwing, xld cxck! Dxn’t frxwn sx–dxn’t! Dxn’t hxllx, nxr hxwl, nxr grxwl, nxr bxw-wxw-wxw! Gxxd Lxrd, Jxhn, hxw yxu dx lxxk! Txld yxu sx, yxu knxw,–but stxp rxlling yxur gxxse xf an xld pxll abxut sx, and gx and drxwn yxur sxrrxws in a bxwl!

Apesar da medida de corpo ser bastante precisa, as linhas que o subdividem não têm padrão, e costumam variar bastante. Há caracteres curtos e grossos, que têm grande altura-x, mas ascendentes e descendentes relativamente pequenos, outros que são exatamente o contrário.

A variação na altura-x muda completamente a percepção que se faz deles. Ela influencia muito a legibilidade e é um fator de escolha mais importante que o corpo. A regra básica é mudar os tamanhos de corpos para buscar a padronização dessas alturas. Corpos cuja relação entre hastes e alturas-x for relativamente grande tendem a ser mais difíceis de se ler. O motivo tem a ver com contrastes e percepção cerebral, e também não cabe aqui.

Em CSSês, o argumento vertical-align define em que linha o texto será colocado:

  • baseline – apoiado na pauta
  • middle – centralizado verticalmente
  • super - baseline coincide com ascendente
  • sub - ascendente coincide com baseline
  • text-top - altura-x coincide com baseline
  • text-bottom - baseline coincide com altura-x

Por último, números. Talvez você já tenha reparado que os números em letras como Garamond e Georgia são meio estranhos e parecem estar desequilibrados, principalmente quando comparados aos números que conhecemos. Na verdade é que antigamente os números sofriam a mesma classificação das letras minúsculas. Eles tinham com altura-x, ascendentes e descendentes. As famílias tipográficas que seguem essa estrutura são chamadas de ranging ou oldstyle.

altura-x em números

OK, o papo está bom mas o post ficou muito longo, não deu para falar de emes. Fica para o próximo. Mas com base no xis, já dá para se ter uma idéia do que ele signifique, não?

Popularity: 46% [?]

13 comentários

Trackbacks

Trackback URL para este artigo:
http://www.luli.com.br/2008/04/07/design-para-cssers-tipografia-parte-iii/trackback/

desça a lenha:

Comente este post ou dê um link do seu site.

Acompanhe esses comentários.

Seja legal, não fuja do tópico.

Não faça nada que você não faria.

Se souber HTML, pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Campos obrigatórios