Smashing Podcast Episódio 5 Com Jason Pamental: O que são fontes variáveis?

A cada duas semanas, publicamos um podcast no qual falo com alguém da indústria da web sobre um tema diferente. Neste episódio, vamos aprender sobre todas as fontes variáveis! Falo com uma fonte de conhecimento sobre o assunto, Jason Pamental.

Mostrar notas

Atualização semanal

• “Sistemas de ilustração de marca: desenhando uma identidade visual forte”, Yihui Liu
• “Lutando para controlar os surtos de tráfego”, Suzanne Scacca
• “Construindo um layout CSS: transmissão ao vivo com Rachel Andrew”, Rachel Andrew
• “Resumo do Advento de Web Design e Desenvolvimento para 2019”, Rachel Andrew
• “Seu site de portfólio deve ser um PWA?”, Suzanne Scacca

Fontes variáveis

• Encontre Jason na web em rwt.io
• Boletim de notícias de tipografia da Web
• “Fontes variáveis: o que os autores da web precisam saber”, Jason Pamental
• O livro de Ellen Lupton “Pensando com Tipo”
• O livro de Erik Spiekermann “Pare de roubar ovelhas e descubra como o tipo funciona”

Transcrição

Drew McLellan: Ele é um estrategista de design, líder de UX, tecnólogo, especialista em tipografia web e especialista convidado no W3C Web Fonts Working Group. Ele escreve, fala e trabalha com equipes e proprietários de marcas sobre como definir melhor o tipo em plataformas digitais. Ele falou com organizações como Adobe, Audible, Conde Nast, GoDaddy, IBM, e fez apresentações, workshops e conferências em todo o mundo. Seu boletim informativo, Web Typography News, é popular entre aqueles que desejam as últimas atualizações e dicas sobre tipografia na web. Ele é claramente um especialista em tipografia da web. Mas você sabia que ele representou a Suécia em Lawn Croquet nos Jogos Olímpicos de 1984? Meus amigos, por favor, dêem as boas-vindas a Jason Pamental. Olá, Jasão. Como você está?

Jason Pamental: Estou arrasando. Principalmente depois dessa introdução.

Drew: Eu queria falar com você hoje, obviamente, sobre tipografia na web, porque isso é realmente o seu lance. Você é um verdadeiro especialista em tipografia da web. Sobre isso em geral, mas em particular, fale um pouco sobre fontes variáveis. Serei o primeiro a admitir que não sou especialista em tipografia. Quero dizer, por favor, me considere tão desinformado quanto qualquer um que esteja ouvindo. Você não pode me patrocinar com qualquer informação sobre tipografia. Acho que temos fontes da web utilizáveis ​​na web há provavelmente cerca de uma década. Isso está certo?

Jasão: Sim. Na verdade, não foi você que começou algo no Twitter alguns dias atrás? Foi tipo 9 de novembro de 2009. Faz 10 anos em dois dias desde o lançamento do Typekit. Eu sei que o Font Deck estava certo no mesmo período de tempo. Então Google Fonts e Monotype Service não muito tempo depois. Eu tive um convite beta que me foi dado por meu amigo, John Cianci, que na verdade agora ainda é um colega da minha esposa na agência onde ela trabalha para o Typekit em algum momento de 2009. Isso foi uma reinvenção completa do meu interesse pela web . Quero dizer, foi nada menos que uma revolução para mim. Quer dizer, eu sempre amei tipografia quando estudei na escola, mas não pudemos fazer nada com isso na web por 15 anos. Isso foi incrível.

Drew: Deve haver designers trabalhando na web agora com fontes da web há 10 anos mais potencialmente. Existem designers trabalhando na web agora que nunca projetaram um site sem a capacidade de selecionar entre uma enorme variedade de tipos de letra.

Jason: Sim, é verdade. Ninguém sem essa experiência teve que empurrar os pixels para cima em ambas as direções como fizemos crescendo. Não somos alguns velhos mal-humorados balançando os punhos para o céu. Mas sim, é incrível com todas as coisas que mudaram na web, a ideia de que algumas pessoas nunca experimentaram de outra maneira é notável.

Drew: Quando conseguimos as fontes da web, houve uma grande mudança em como começamos a usar a tipografia na web, porque realmente podíamos começar a usar a tipografia na web. Obviamente, havia coisas que poderíamos fazer com fontes seguras para a web, mas estávamos bastante limitados a uma paleta muito restrita. Mas há potencialmente agora outra grande mudança quase tão significativa, talvez com fontes variáveis. Quero dizer, o que são fontes variáveis? O que eles fazem por nós? Por onde começamos?

Jason: Eu sempre tento e começo dando às pessoas um quadro de referência. Então, quando pensamos em usar fontes na web, o que temos que lembrar é que atualmente com fontes “tradicionais”, cada fonte é uma largura individual, peso, inclinação, variante desse tipo de letra. Para cada um que queremos usar na web, temos que carregar um arquivo. Para um site típico em que você o está usando para cópia do corpo, você está carregando, geralmente, quatro fontes: normal, negrito, itálico e negrito itálico. Todas essas coisas precisam ser carregadas. Cada um deles é um pequeno dado que precisa ser baixado, processado e renderizado.

Jason: Então, normalmente, o que temos feito ao longo dos anos é nos restringir a usar esse número muito pequeno de fontes, o que na verdade não é uma prática de tipografia particularmente boa. É muito mais comum no design gráfico usar uma gama muito mais ampla. Você pode usar oito ou 10 pesos e variantes diferentes de um tipo de letra em um determinado design. Na web, ficamos muito limitados por causa do desempenho. A grande diferença em uma fonte variável é todas essas permutações, essas variações estão contidas em um único arquivo. Esse formato é realmente eficiente porque o que ele está fazendo é armazenar a forma regular desse caractere e, em seguida, o que chamamos de deltas de onde os pontos ao longo dessas curvas se moveriam para renderizá-lo como negrito, fino, largo ou estreito.

Jason: Então, armazenando apenas as diferenças, você não precisa armazenar todo o contorno. É um formato muito mais eficiente. Embora não seja tão pequeno quanto um único arquivo de fonte, ainda é muito menor do que todos os arquivos individuais tomados separadamente. Se você olhar para algo como o Plex Sans da IBM, todos esses arquivos separados podem ter quase um megabyte, onde dois arquivos de fonte variável que contêm todas as larguras e pesos na vertical em um arquivo, o itálico no outro é como 230K. Isso é para conjuntos de personagens realmente completos. A maioria das pessoas poderia usar um subconjunto disso e torná-lo ainda menor. Geralmente, vejo esses tamanhos de arquivo em torno de 50 a 100K para uma necessidade típica de um site em idioma ocidental. Isso não é tão diferente de carregar... Depois de carregar três ou quatro arquivos de fonte individuais, você provavelmente está carregando mais dados do que isso. É uma vitória interessante para o desempenho, mas também abre toda a gama de fontes para usarmos na web por meio de CSS.

Drew: Então é quase como entregar a receita ao invés da refeição. Em vez de aqui está a versão em itálico, aqui está a versão em negrito. É como, “Aqui está a versão regular e para torná-lo itálico, você faria isso, para torná-lo negrito, você faria aquilo”. Isso reduz o tamanho do arquivo que desce pelo fio.

Jasão: Sim. Bem, de certa forma, está te dando todos os ingredientes e aí você pode fazer a receita que quiser. Porque você pode realmente ir a qualquer lugar de... Voltando ao exemplo do Plex, de 100 a 700 pesos, onde 700 é o típico negrito, 400 seria um peso normal. Mas então você tem muito mais leve. Então você pode fazer cabeçalhos de linha muito grandes e muito finos ou citações em bloco ou itens diferentes ou como ênfase, e então ser capaz de modular o que você quer que seja em negrito em tamanhos diferentes. Há todos os tipos de coisas diferentes que você pode fazer para melhorar a tipografia, melhorar a experiência do usuário e, ao mesmo tempo, obter um melhor desempenho. Esse é o porteiro.

Drew: Então, há quase um número infinito de ajustes de etapas entre o que consideramos hoje regular e ousado? Você realmente tem a capacidade de ir a qualquer lugar ao longo desse eixo para ajustar entre os dois?

Jasão: Certo. O que eu acho realmente empolgante para mim como alguém que estudou design gráfico e olhou de perto o design de impressão por muitos anos, a ideia do que é negrito realmente deve mudar com base no tamanho do texto que você está renderizando. Então, por padrão, 400 e 700 para normal e negrito é o padrão da web. Mas, na verdade, a única razão pela qual você está chamando negrito é que você quer alguma ênfase, você quer que algo se destaque. Mas quanto mais pesada a fonte fica do tamanho pequeno, mais difícil é ler. Isso meio que preenche os pequenos espaços abertos. Em vez de usar 700 para o corpo da cópia quando está definido para esse tamanho de aproximadamente 16 pixels ou o que estivermos usando lá, você usa talvez 550, 575 onde você obtém ênfase suficiente, mas as formas das letras ainda são mais abertas. Então, à medida que aumenta, você pode usar um peso maior.

Jason: Mas, novamente, é uma escolha sua nesse ponto. Ao modular isso para obter o nível certo de ênfase, mas ainda mantendo uma legibilidade realmente boa, temos muito mais flexibilidade. Eu realmente espero que, à medida que eles se tornem mais populares e mais amplamente usados, possamos começar a ensinar as pessoas a serem um pouco mais sutis com a maneira como usam esse intervalo e, na verdade, ficarem mais expressivas e também mais legíveis ao mesmo tempo .

Drew: Uma coisa que notei implementando designs como front-end e implementando designs que recebi é que diferentes combinações de contraste de cores e texto claro em um fundo escuro versus texto escuro em fundo claro, os pesos podem parecer completamente diferentes. Então, presumivelmente, isso ajudaria a nivelar e refinar o visual e a experiência de leitura com base em mudanças como essa?

Jasão: Com certeza. Essa é uma das coisas que normalmente vou mostrar em workshops e palestras é adicionar suporte para essa consulta de mídia de modo leve. Você pode inverter esse contraste, mas então você quer fazê-lo de uma maneira sutil. Dependendo do tipo de letra, pode acabar parecendo muito pesado ou meio fino com um tipo de letra com serifa. Às vezes você quer ficar um pouco mais pesado ou um pouco mais leve, mas você também tende a precisar espaçar as letras quando você as tem em um fundo escuro ou então as letras meio que sangram juntas. Há pequenas coisas que você pode ajustar na tipografia. A consulta de mídia é descartada de maneira simples. Quero dizer, são como duas linhas de código para adicionar isso ao seu site. Então é o que você faz com isso. Não é necessariamente apenas inverter as cores. Às vezes, você precisa ajustar o contraste, mas também ajustar o próprio tipo para melhor legibilidade.

Drew: Então, presumivelmente, não é apenas o peso que pode ser variado em uma fonte variável. Existem outras maneiras de alterar nossa fonte conforme exibido?

Jasão: Sim. Depende completamente do designer de tipos. Acho muito bom reforçar que isso não é gratuito para todos no navegador. O navegador só pode renderizar o que foi habilitado na fonte. Em última análise, é o designer de tipos que diz que o peso varia entre isso e isso. Você pode ter um eixo de largura. Ficaria um pouco mais estreito ou um pouco mais largo, mas também há a capacidade de ter o que chamamos de eixos registrados. Há largura, peso, inclinação, itálico e tamanho óptico. Essas são todas as coisas principais que são mapeadas para propriedades CSS. Slant permite um ângulo entre um e outro, tão vertical e eu realmente vi alguns com uma inclinação reversa, bem como uma inclinação para a frente. Isso é totalmente aberto. Itálico está geralmente ligado ou desligado, mas não necessariamente. Você pode realmente ter… Bem, existem designers de tipos que experimentaram mudar as formas das letras gradualmente à medida que você muda do normal para o itálico, e meio que substituindo as letras ao longo do caminho. Isso é uma coisa interessante.

Jason: Mas há a possibilidade de ter eixos personalizados. O designer de tipos pode definir os eixos personalizados que deseja variar. Você já viu aqueles que adicionam uma espécie de gravidade espalhada por gotejamento e todos os tipos de formas divertidas de torção, ou serifas estendidas, alterando a altura dos ascendentes e descendentes. Nas formas de letras minúsculas, alterando se são ou não serifas ou não. Há todos os tipos de coisas que você pode fazer. É realmente até a imaginação de um designer de tipos. Acho que estamos apenas arranhando a superfície do que poderia acontecer de forma realista com todas essas coisas. É tudo acessível através de CSS.

Drew: Sim. Todas essas propriedades podem ser ajustadas apenas através do CSS normal que você está entregando com o resto do seu design. Que tipo de coisas podemos fazer em CSS para desencadear essas mudanças? É como faríamos com um layout responsivo onde temos consultas de mídia para acionar isso?

Jason: Há todos os tipos de maneiras que você pode fazer isso. Há uma pequena mudança que você tem que fazer. Estou assumindo que forneceremos vários links para algumas coisas que ajudarão as pessoas a brincar com essas coisas. Quer dizer, eu escrevi um monte. Espero que isso ajude as pessoas. Então, no lado do uso, o eixo de peso da fonte é mapeado apenas para o peso da fonte. Em vez de dizer negrito normal, você apenas fornece um número. Você pode mudar isso com consultas de mídia. Você pode alterá-lo com JavaScript. Você pode fazer o que quiser com isso. Eu tenho usado uma técnica chamada CSS Locks que aprendi com Tim Brown para usar basicamente matemática. Propriedades e cálculos personalizados de CSS para dimensioná-lo, uma vez que você atinge um pequeno ponto de interrupção até um grande ponto de interrupção, ele dimensiona suavemente o tamanho da fonte e a altura da linha.

Jason: Então você também pode usar um pouco de JavaScript para fazer a mesma coisa com o peso deles, se quiser. O eixo de peso mapeia para o peso da fonte, a propriedade CSS. O eixo de largura na fonte será mapeado para esticar a fonte, e isso é expresso apenas como uma porcentagem. Devo observar que muitos designers de tipos não estão necessariamente pensando em como isso é expresso, então você pode ver faixas de peso que fazem coisas estranhas como ir de 400 a 650. Você ainda precisa expressá-lo como uma porcentagem, mas funciona. Está bem. Você só precisa saber o que é normal e todas as fontes estão documentadas. Então, com qualquer coisa além desses dois, atualmente, há um suporte um pouco desigual na implementação para inclinação e itálico. Muitas dessas coisas você meio que precisa voltar a usar as configurações de variação de fonte e, em seguida, pode fornecer várias coisas ao mesmo tempo. É como as configurações de recursos de fonte. É uma sintaxe de nível inferior onde você pode fornecer uma lista separada por vírgulas deste eixo de quatro letras e o valor, o próximo, o próximo.

Jason: A única coisa que as pessoas precisam ter em mente é que quando você usa as configurações de variação de fonte, você perde toda a compreensão semântica disso e perde o fallback. O peso da fonte e o estiramento da fonte são universalmente suportados em todos os navegadores. Você definitivamente deve usar esses atributos. Para qualquer outra coisa, você pode usar as configurações de variação de fonte. Mas a vantagem de usar o peso da fonte da maneira que você normalmente faria é se a fonte variável não carregar, o navegador ainda pode fazer algo com isso. Considerando que, se ele não entender as fontes variáveis ​​ou não carregar, se tudo estiver nas configurações de variação de fonte, você perderá todas as informações de estilo. Isso é apenas uma pequena nota lateral apenas em termos do que é suportado onde. Mas também devo dizer que ele é suportado em todos os navegadores de envio que você provavelmente encontrará na maioria das circunstâncias. O I-11 não funciona, mas você pode fornecer fontes da Web estáticas e usar suportes de anúncios em seu CSS para mudar para as fontes variáveis. Assim, você evitará downloads duplicados de ativos e funcionará muito bem. Eu tenho isso em produção em vários sites já.

Drew: Eu acho que, como muitas das tecnologias da web mais modernas que você está vendo, se houver uma fonte variável que está borbulhando silenciosamente por um tempo, e é apenas quando ela finalmente ferve e temos suporte em navegadores e pessoas como você fazendo barulho sobre isso e deixando todos saberem que está lá. Quase pode parecer para o designer ou desenvolvedor padrão que está apenas trabalhando no dia-a-dia e não rastreando todos os downloads mais recentes. Pode parecer que surgiu do nada. Mas acho que isso está borbulhando há bastante... quero dizer, você mencionou as duas implementações ligeiramente diferentes com as quais estamos lidando agora. Existe uma espécie de padrão mais antigo e mais novo para implementação?

Jason: Bem, na verdade não é mais velho e mais novo. Ambos são muito intencionais. Voltarei a isso em um segundo, porque realmente vale a pena entender qual é a diferença entre eles. Mas você está certo. O formato foi introduzido há pouco mais de três anos, foi em setembro de 2016. Na verdade, tivemos a primeira implementação funcional na compilação noturna do Safari três semanas depois. Foi notavelmente rápido que tínhamos um navegador funcionando. O Safari foi o primeiro a fornecer suporte total para ele. Acho que foi quando High Sierra saiu. Eu não sei, era como o Safari 12 ou algo assim.

Jason: Mas não muito tempo depois, acabamos recebendo suporte no Firefox, Edge e Chrome. Na verdade, temos suporte para navegadores há quase dois anos. Mas não havia uma tonelada de fontes. Tem havido esse tipo de evolução constante. O suporte para usá-los na web existe há mais tempo do que em qualquer outro lugar. Quero dizer, tecnicamente, esse formato também funciona no sistema operacional de desktop. Portanto, se você tiver um formato TTF, poderá instalá-lo em seu sistema operacional de desktop no Windows ou Mac e usá-lo em qualquer aplicativo. Você nem sempre pode variar os eixos da maneira que deseja jogar com eles infinitamente, mas há essa noção de instâncias nomeadas incorporadas nesse arquivo de fonte que o mapeiam de volta ao que estamos acostumados.

Jason: No Keynote, por exemplo, não há suporte explícito para fontes variáveis, mas o formato funciona se houver coisas como no Tech Sense, mais uma vez, condensado, leve. Você terá aqueles normais, regulares, regulares em negrito, estreitos, etc., todos estarão disponíveis em um menu suspenso, assim como instalar toda a família. Então, se você estiver no Illustrator ou Photoshop ou agora no InDesign que acabou de ser lançado na semana passada ou no Sketch que foi lançado há algumas semanas, todos eles suportam fontes variáveis ​​agora, para que você possa acessar todos os diferentes eixos e brincar com eles em seu Conteúdo do coração. Mas no navegador, é onde temos muito mais para trabalhar. Tomando uma sugestão de sua esposa, eu tenho meio que batendo esse tambor por um tempo tentando fazer as pessoas ficarem mais conscientes disso. Então, graças ao trabalho que a equipe do Firefox fez na criação de ferramentas para desenvolvedores. Com Jen Simmons empurrando isso, temos ferramentas incríveis para trabalhar no navegador que nos ajudam a entender do que as fontes são capazes.

Drew: Você mencionou designers de tipos e os recursos de fonte. Existem muitas fontes que estão disponíveis?

Jason: Bem, muitas pessoas estão fazendo isso agora. Provavelmente o melhor e mais completo lugar para procurá-los é o site de Nick Sherman, v-fonts.com, v-fonts.com. Isso é apenas um site de catálogo. Está rapidamente se tornando muito, muito grande. Há mais fontes variáveis ​​saindo o tempo todo agora. Não há um grande número de fontes de código aberto, mas se você pesquisar no GitHub por fontes variáveis, você encontrará um monte de projetos lá. Mas o Google lançou uma versão beta de sua nova API com cerca de uma dúzia de fontes variáveis ​​disponíveis lá. Há mais vindo deles. Eles acabaram de lançar o Recursive em recursive.design, que é um novo tipo de letra fantástico de Stephen Nixon. A variável Plex, uma disponível, é de código aberto. Depois, há toneladas de comerciais.

Jason: O legal disso é que Monotype lançou alguns bem grandes. Mas são muitas fundições menores e designers individuais que estão liderando o caminho para experimentar esse formato. Eu acho que é ótimo para o design e ótimo para a web que estamos vendo todos esses novos designs de novos designers ou designers menores que estão abrindo esse novo caminho. Porque eu gosto de vê-los tendo sucesso com isso, porque eles realmente tomaram a iniciativa de colocar algumas coisas boas por aí.

Drew: Estamos vendo alguma atualização de fontes existentes para serem fontes variáveis ​​para que as famílias sejam substituídas por uma única fonte variável? Isso está acontecendo em tudo?

Jasão: É. Os que Monotype lançou são atualizações para alguns tipos de letra realmente clássicos. FF Meta foi um que eu ajudei a lançar ao projetar a demo para isso no ano passado. Eles têm isso. Univers, Frutiger, Avenir, acho que são esses que lançaram até agora, esses quatro. Esses são realmente tipos de fontes clássicas de marca. Eles estão trabalhando em mais. Eu sei que eles têm pelo menos mais meia dúzia que estão em vários estágios de produção. Eu sei que a Dalton Maag, que faz muito trabalho de tipografia personalizada para grandes corporações, tem várias fontes variáveis ​​muito boas. Eu tenho feito alguns trabalhos com TypeTogether. Eles também têm vários tipos de letra realmente ótimos. Eu conheço aquele…

Jason: Eu mostrei em algumas das conferências em que falei sobre essas coisas que a Adidas também tem as suas próprias, que eles usam para todo o trabalho de marca impresso há quase dois anos. O que é algo realmente notável. Mas também Mark Simonson está trabalhando em uma versão variável do Proxima Nova. Isso é um grande negócio. Essa tem sido uma das fontes da web mais vendidas de todos os tempos. Está acontecendo. Está acontecendo em pedaços e pedaços, subindo e descendo a escala. Mas mesmo algo tão simples como assinar David Jonathan Ross, Font of the Month Club, lhe dará uma fonte variável quase todos os meses. Quero dizer, ele tem sido realmente incrível nas coisas que ele está lançando. É como $ 72 para o ano ou algo assim. Ele está lançando todos os tipos de coisas realmente bonitas.

Drew: É bem interessante então, porque obviamente, com os recursos de fontes variáveis, você pode criar novos designs que façam uso delas. Mas, potencialmente, pode haver sites que estão em produção onde existem versões de fonte variável agora disponíveis, onde alguém poderia voltar, revisitar isso e substituir vários arquivos de fonte por uma nova implementação baseada em uma nova versão de fonte variável.

Jason: Sim, absolutamente. Essas são algumas das perguntas que recebo com bastante regularidade. Recentemente, eu estava olhando para um site de transmissão de esportes bastante grande que a equipe de desenvolvimento me perguntou sobre a mesma pergunta. Eu olhei, e com certeza, para dois dos tipos de letra que eles estão usando, existem fontes variáveis ​​disponíveis. Uma rápida pesquisa nos mostrou que poderíamos substituir quatro instâncias de um tipo de letra e três do outro por dois arquivos de fonte variável e remover mais de 70% do tamanho do arquivo em cinco solicitações. Quero dizer, seria uma questão de ganhar do ponto de vista do desempenho. Para sites de grande escala, quando você analisa a remoção de quase 300K de download de dados em milhões de usuários, isso realmente resulta em economia real em dólares e custo de largura de banda. Mesmo do ponto de vista puramente prático, sem reescrever nenhum de seus CSS, apenas substituindo essas fontes, já será uma vitória significativa para eles em desempenho, em tempo de renderização de página e em custos reais de largura de banda para eles.

Drew: Em termos práticos, é tão simples quanto parece, apenas trocar um pelo outro?

Jasão: Pode ser. Eu acho que o exemplo perfeito disso é algo que o Google casualmente deixou escapar na ATypI em setembro que eles começaram a fazer isso com Oswald na ordem de 150 milhões de vezes por dia. Eles criaram uma versão de fonte variável e começaram a navegar em sites que usavam instâncias suficientes em que renderia um benefício significativo. Eles não contaram a ninguém. Eles não disseram aos proprietários do site. Ninguém precisava fazer nada. Porque ele tinha o mapeamento correto do eixo de peso para que os padrões funcionassem. 150 milhões de vezes por dia é muito serviço de fonte. Isso está começando a dar a eles alguns insights melhores sobre como seria esse cenário para eles se pudessem começar a mudar as cinco principais fontes da Web que eles servem? Estou assumindo que o Open Sans é provavelmente um desses. Eu sei que Lato provavelmente está lá, Roboto.

Jason: Então, se você olhar para eles e ver como podem ser as versões otimizadas, verá que existem algumas razões muito claras pelas quais o Google estaria interessado nisso. Então, se você olhar para o outro lado, apenas o espaço de design e o quanto mais fiel à voz da marca uma empresa poderia ser se estivesse trabalhando com toda a gama de fontes de sua própria marca, em vez de ter que trocar por diferentes ou ser mais limitado em sua paleta. Portanto, há coisas realmente interessantes para aprender e explorar nos dois extremos desse espectro.

Drew: Parece um excitante e admirável mundo novo de tipografia e oportunidades para fazer tipografia de uma forma mais sensível e potencialmente mais criativa na web do que tínhamos sido capazes de fazer antes.

Jason: Bem, isso é certamente o que eu espero. Acho que uma das maiores barreiras para a adoção de fontes na web em todos os estágios tem sido o desempenho. Então o que acontece? Quanto tempo leva para carregar? O que isso significa para o tempo de renderização na página? Temos esses problemas desse tipo de flash de texto invisível ou texto sem estilo. Lidando com todas essas coisas, realmente, voltamos a quanto tempo leva tudo para chegar lá? Como o navegador reage a isso? Há muitas coisas que podemos fazer para mitigar alguns desses problemas. Mas, na verdade, se tivermos uma fonte melhor e uma maneira melhor de servi-la, todos esses problemas se tornarão muito menos significativos. Então, tendo isso no lugar, podemos ser muito mais expressivos. Podemos realmente tentar empurrar o design e tentar ser um pouco mais criativos.

Drew: Porque você escreveu ultimamente meio que expressando a sensação de que talvez a web tenha caído em uma armadilha de projetar um modelo de artigo por site, talvez com algumas variações para alguns tipos diferentes de conteúdo. Mas todo mundo está se aproximando desse estilo medium.com de coluna única de texto muito legível aos meus olhos. Bem tipografia. Isso é tão ruim assim?

Jason: Eu não acho isso ruim. Só acho que vai ficar chato. Quero dizer, quando o Medium foi lançado, isso era muito novo. Quero dizer, acho que uma coluna de… Como você disse, era uma cópia muito bem composta. Tem uma área agradável. Não estava lotado. Não era apertado e barras laterais e todas essas outras coisas. Sempre haverá questões de modelo de negócios e o que apoiará isso. É por isso que um redesenho realmente bonito de, eu acho, foi o Seattle Times que Mike Monteiro para Mule Design fez alguns anos atrás. Absolutamente lindo até o lançamento. Então eles colocaram esses banners enormes em ambos os lados da coluna e isso meio que tirou todo aquele espaço em branco. Foi uma verdadeira vergonha.

Jason: Eu entendo que as empresas precisam ganhar dinheiro. Há ramificações para isso. Então seria maravilhoso ter essa opção. Para ter aquele layout limpo e agradável. Mas não deve ser o único. Temos todos esses recursos em CSS que nos permitem fazer coisas realmente interessantes com margens e layout. Quero dizer, não é apenas o fato de termos grade agora. Mas o fato de podermos fazer cálculos no navegador em CSS nos permite fazer coisas muito mais interessantes. Você combina com isso, a capacidade de ser muito mais expressivo com o tipo, então poderíamos começar a olhar para o que eles fazem nas revistas. A Vanity Fair não tem um modelo de artigo. Eles têm seis ou sete ou oito. Se você realmente olhar como eles colocam essas coisas, há uma quantidade tremenda de variabilidade, mas está jogando dentro de um sistema.

Jason: Então, quando criamos um sistema de design para nosso site, em vez de parar em apenas um layout, temos uma maneira relativamente fácil de construir alguns switches em nossos sistemas de gerenciamento de conteúdo. A maioria deles suporta uma quantidade razoável de flexibilidade. Não há razão para não podermos dar uma escolha às pessoas. Eu quero usar o layout um, dois, três, quatro, cinco, seis. Isso vai introduzir margens diferentes, compensações diferentes. Talvez introduzindo a capacidade de criar algumas colunas. Há muitas coisas diferentes que poderíamos fazer que tornariam uma web muito mais interessante. Eu acho que esse tipo pode desempenhar um papel muito importante nisso.

Drew: O tipo é nosso salvador quando se trata de adicionar um pouco mais de personalidade de volta à web?

Jason: Bem, eu acho que pode ser. Acho que tivemos essa longa evolução na web para uma melhor usabilidade. Mas acho que uma das baixas que há quando tudo o que nos preocupa é essa abordagem utilitária, é uma abordagem utilizável? Isso tende a vencer a personalidade. Então, quando cada site é… Novamente, tivemos fontes da web e isso criou um novo nível de expressividade que não tínhamos antes. Então, de repente, pudemos… As telas melhoraram. Então as serifas voltaram à mistura. Poderíamos usá-los novamente na web. Essas coisas adicionaram um pouco de vida. Então nós meio que otimizamos de volta para todos usando um ou dois San-serifs. É Open Sans ou é Roboto ou Oswald ou qualquer outra coisa. Estamos meio que de volta à mesma coisa, onde há toneladas de tipos de letra realmente bons e realmente legíveis. Nós realmente não ensinamos essa geração atual de designers de UX que muitas vezes são os que conduzem muito disso qualquer coisa sobre tipografia. Qualquer coisa sobre o quão expressivo pode ser, o quanto pode alterar o humor e o tom.

Jason: Então, temos um grande número de pessoas que estão ditando a direção do design das coisas na web que têm ideias sobre tipos que talvez não sejam tão bem informadas quanto alguém que estudou design gráfico e essas noções de legibilidade. Precisamos juntar essas coisas. Não é um ou outro. É um e. Precisa ser.

Drew: Especialmente quando falamos sobre personalidade e sobre tom e humor. Do ponto de vista do negócio ou do que estamos falando são aspectos de uma marca. Então, ao fazer tudo parecer igual, estamos perdendo a capacidade de comunicar uma marca aos clientes?

Jasão: Com certeza. Não para mergulhar na política, mas acho que o todo… Um dos grandes problemas que certamente vivemos nos EUA, e tenho certeza que não é tão diferente do que aconteceu no Reino Unido nos últimos anos. Quando todas as notícias são consumidas por meio de uma única plataforma, e tudo parece igual, não há distinção de voz. Portanto, é algo como 75% dos adultos nos EUA dizem que recebem uma parte significativa de suas notícias do Facebook. Quero dizer, vamos deixar de lado o quão geralmente horrível isso é. Mas dado que tudo é apresentado de maneira uniforme, não há diferença entre um artigo do The Guardian, para o New York Times, The Wall Street Journal, The Washington Post e as notícias de direita de Joe. É tudo apresentado exatamente da mesma forma.

Jason: Quando vemos aquele logo, aquele estilo tipográfico, o Guardian é tão característico. O Wall Street Journal é tão característico. Reconhecemos instantaneamente quando o vemos, mesmo que seja apenas uma manchete. Sabemos de onde isso veio. Depois, há essa associação automática com essa marca e essa autenticidade. Quando você tira tudo isso, você fica com: “Ok, vou avaliar isso em uma manchete. Então, quem escreveu um título melhor? Isso não é muito para continuar. Então acho que perdemos muito. Se você observar o que o Apple News Plus está tentando fazer, há alguns esforços de algumas empresas para tentar reintroduzir isso. Blundell fez um trabalho muito interessante na Europa. Eles foram lançados nos Estados Unidos, mas não tenho certeza se são realmente tão bem sucedidos. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. É verdade. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Obrigada. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.