O detalhe tipográfico nas interfaces
O que a Apple tem a nos ensinar sobre fontes
Juntamente com a divulgação da última versão do iOS na WWDC 2020, a Apple apresentou propostas significativas para a nova interface do sistema, incluindo os App Clips (que permitem ao usuário utilizar uma funcionalidade específica do aplicativo sem precisar baixá-lo na loja) e novas maneiras de customizar os Widgets.
Fora dos holofotes e às vezes invisível — apesar de estar sempre presente — , a tipografia também foi novidade no evento deste ano. Através de um vídeo intitulado The details of UI typography, o time de Design da Apple mergulhou nos pormenores tipográficos do sistema, contextualizando técnica e historicamente o estado atual e futuro da utilização de fontes em suas plataformas. Abordo aqui alguns dos temas levantados durante a apresentação que, apesar de possuírem peculiaridades relacionadas às plataformas Apple, valem como princípios para qualquer outro suporte. Os tópicos serão os seguintes:
- Tamanhos Ópticos
- Variable Fonts
- Tracking e Leading
- Text Styles e Dynamic Type
Tamanhos Ópticos
Quando a tecnologia de impressão existente era a prensa móvel, cada tamanho de fonte tinha que ser esculpido separadamente. Isso significava fazer ajustes no desenho das letras para que tanto as fontes maiores quanto as menores tivessem a mesma consistência durante a leitura. A dificuldade em manter essa consistência se dava por conta de dois problemas: 1) tipos menores possuíam maior propensão para borrar devido à grande quantidade de tinta depositada num espaço pequeno de papel, 2) por conta da alta pressão gerada pela prensa tipográfica, tipos menores sofriam risco de quebrar. Os type designers da época tinham plena consciência desses problemas e os contornavam com maestria, como vemos no exemplo abaixo, onde as fontes menores (4 e 5 pt) possuem terminais e esporas mais espessas que as fontes maiores (72 e 48 pt) — essas possuindo mais sutilezas e uma maior variação de espessura.
Assim como esses problemas eram evidentes no meio impresso, algo semelhante ocorre hoje no meio digital, onde as letras precisam se “encaixar” numa quantidade limitada de pixels disponível na tela dos dispositivos. Para lidar com esse problema, a Apple desenvolveu a família San Francisco, que até então possuía apenas dois tamanhos ópticos: SF Pro Text, para ser utilizada em tamanhos de 1 até 20 pt, e SF Pro Display, para usos acima de 20 pt.
Vamos comparar as duas fontes (ambas em 80 pts):
As diferenças mais marcantes podem ser vistas nas sidebearings (espaço horizontal que cada letra individual possui nos lados esquerdo e direito) e altura de x. Conforme o exemplo, podemos notar que a SF Text possui um espaçamento maior do que a SF Display devido ao seu uso em tamanhos menores (abaixo de 20 pt). Esse espaçamento é necessário para dar mais respiro às letras. Também é importante notar como a SF Text possui uma altura de x levemente maior do que a da Display, de forma que as letras minúsculas (as mais utilizadas em texto corrido) ganhem mais legibilidade.
Por mais que os dois tamanhos ópticos sejam eficientes, há ainda um problema: cada tamanho óptico possui 9 pesos diferentes, do Ultra Light ao Black. Isso resulta em 18 arquivos de fontes no total, o que pode acarretar numa diminuição da performance dos aplicativos. É aí que entram as Variable Fonts.
Variable Fonts
As Variable Fonts surgiram no fim de 2016 como extensão do formato OpenType. Uma das propriedades mais significativas dessa tecnologia é a de possibilitar que diferentes estilos de fontes sejam compactadas num único arquivo. Com o iOS 14, a Apple resolveu adotá-las para todas suas tipografias oficiais: SF Pro, SF Compact, SF Mono e New York. Agora, cada uma das famílias possuirá um único arquivo que agregará seus dois tamanhos ópticos (Text e Display), bem como suas variantes de peso (nas versões anteriores, ainda é recomendável manter o uso dos arquivos separados).
Um dos princípios dessa tecnologia é a interpolação, uma prática já adotada pelos type designers antes das Variable Fonts, que consiste no processo de gerar fontes intermediárias entre duas fontes mestras (masters). Por exemplo: é possível gerar os pesos intermediários entre uma fonte Light e Black (sendo essas as masters), criando assim automaticamente os pesos Regular, Medium, Semi-bold, Bold, etc. As Variable Fonts permitem que o designer consiga controlar essa interpolação em tempo real através de sliders proporcionados por softwares gráficos. Embora havendo liberdade para controlar essas versões intermediárias, o HIG ainda recomenda que os pesos pré-definidos sejam utilizados.
Tracking e Leading
Tracking e Leading são duas propriedades invisíveis, pois tratam-se respectivamente dos espaços vazios horizontais e verticais das letras, no entanto são essenciais para a consistência do uso tipográfico.
Tracking
Tracking se refere ao controle do espaçamento horizontal adicional entre as letras da fonte. Esse espaço é controlado pelo designer, sendo possível aumentá-lo ou diminuí-lo conforme a circunstância. Não confundir com kerning (que são pares de letras cujo espaçamento padrão é alterado, como Av, Ay, Ta, Ty, etc, que são reduzidos, e gg, gy, gf, etc, que são aumentados).
Alguns podem se perguntar por que mexer no Tracking, uma vez que o espaçamento padrão já é definido através dos tamanhos ópticos. A resposta é que os tamanhos ópticos possuem uma média de espaçamento aproximado do ideal, cabendo ao designer ajustá-lo conforme a necessidade (no pain, no gain!). Jost Hochuli nos atenta a este ponto:
O espaçamento entre as letras é uma função de seu espaço interno. Quanto maior esse espaço interno, menor o espaçamento; quanto maior o espaço interno, maior o espaçamento. (…) À medida que têm seu corpo aumentado, as letras isoladas tornam-se proporcionalmente mais esguias — é o que também deveria acontecer nas fontes digitalizadas — ; por conseguinte, o espaçamento entre elas também se torna proporcionalmente menor.
Jost Hochuli, O detalhe na tipografia
Boa notícia: para não precisar calcular o Tracking adequado “no olho”, a Apple disponibiliza uma tabela com as medidas recomendadas para cada tamanho de fonte. Essa tabela foi atualizada com o lançamento do iOS 14, já que os dois tamanhos ópticos agora fazem parte de uma única fonte.
Leading
Antes de definir Leading, vamos entender primeiro o conceito de Line-height. Tal propriedade consiste no espaço vertical entre as extremidades de uma fonte. O mesmo valor também pode ser obtido medindo o espaço entre duas baselines.
Chamamos de Leading o espaço adicional entre duas Line-heights, conforme vemos nas setas do exemplo abaixo:
É importante lembrar que conforme aumentamos o Leading de uma fonte, automaticamente aumentamos também sua Line-height.
Ainda que a Apple já ofereça medidas adequadas de Leading através dos Text Styles, precisamos nos atentar para casos específicos. As interfaces do Apple Watch, por exemplo, possuem um espaço limitado, sendo às vezes necessário ajustar estilos específicos para aproveitar o espaço da tela.
Text Styles e Dynamic Type
Text Styles
Text Styles fazem parte de um framework que compreende estilos de tipografia pré-definidos, cada qual possuindo propriedades específicas de tamanho, peso, leading e tracking. Os estilos possuem uma base hierárquica que auxilia o designer a criar interfaces consistentes e flexíveis.
Os estilos pré-definidos funcionam muito bem por si só, porém nem sempre dão conta de todos os usos. Já contando com essas exceções, o sistema dá a possibilidade de adicionar tratamentos específicos para determinados estilos. Por exemplo: o estilo pré-definido Large Title possui o peso SF Pro Regular, tamanho de 34 pts e Leading de 41 pts, mas é possível mudar qualquer uma dessas variáveis conforme a necessidade.
Dynamic Type
Dynamic Type é uma funcionalidade do sistema iOS que permite aos usuários da aplicação escolherem o tamanho de fonte que consideram ideal para leitura. Essa customização só será eficiente se os desenvolvedores utilizarem os Text Styles disponíveis no sistema, de forma que o tamanho escolhido pelo usuário mantenha suas propriedades proporcionais (como peso e leading). Com o iOS 14, esses tratamentos também serão possíveis com fontes customizadas, e não apenas com as fontes oficiais.
Conclusão
Por mais que as funções emocionais e estéticas das letras sejam importantes na composição de uma interface, é fundamental que tenhamos o cuidado técnico com o uso das fontes para que a informação seja transmitida de forma objetiva, com o mínimo de ruído possível. Os princípios tipográficos levantados aqui são essenciais para que qualquer produto possua uma interface intuitiva, textos legíveis e seja acessível a todos e todas.
Referências Bibliográficas
Livros
O detalhe na tipografia, Jost Hochulli
A linguagem invisível da tipografia, Erik Spiekermann
