Esta é uma versão do artigo “Fontes variáveis aplicadas 
à sinalização: uma exploração tipográfica de placas de logradouros paulistanos entre 1915 e 1976”, apresentada no CIDI 2019.

Há algum tempo venho observando e fotografando placas antigas da cidade de São Paulo. A placa da Av. Higienópolis foi a primeira que fotografei. Esta sinalização resistiu à chegada dos carros, a construção das grandes avenidas, a chegada do metrô e até hoje, utilizando uma gramática ultrapassada, estão penduradas em paredes e postes da cidade paulistana.

As placas para logradouros (nomes de rua, avenidas, etc) criadas entre 1915 e 1976 estão há cem anos observando o dia-a-dia de uma cidade que expandiu-se de forma inimaginável.

Além deste fator curioso de caráter histórico, sempre me chamou atenção o uso da tipografia, que segue um mesmo sistema variando em peso e largura.

No segundo semestre de 2018, cursei como ouvinte a disciplina Processos experimentais e linguagem em design visual ministrada pela Prof. Dra. Clice de Toledo Sanjar Mazzilli na USP e levantei este tema para escrever um artigo, deste, surgiu este texto aqui em linguagem coloquial. Se você deseja ler o artigo original, o link está no início do texto.

Aqui falo sobre  a história das placas paulistanas e o relato do desenvolvimento de uma fonte variável que criei inspirada nelas, eles vão se cruzando ao longo do texto.

§ As placas de logradouros paulistanos entre 1915 e 1976.

No dia 10 de setembro de 1809 a primeira menção sobre o placas de endereço foi conferida em uma reunião realizada na Câmara Municipal. A implantação das placas originalmente de fundo preto com letras brancas termina em 15 de setembro de 1846, quando o então imperador Don Pedro II visitou a cidade — nenhuma destas placas foi encontrada pelo pesquisador.

Em 14 de junho de 1915 foi editado o Ato nº 769 que trouxe novas regras para emplacamento, nele, o art. 74 define como o layout de placas para vias públicas deveria ser: possuir fundo azul escuro, letras brancas e medidas de 45 cm de comprimento por 25 cm de altura.

Em 1934, foram definidas outras especificações, as placas deveriam agora ser em ferro esmaltado com letras brancas estampadas em relevo sobre fundo azul escuro para vias públicas e vermelho para particulares. O novo artigo ainda especifica que abaixo do nome de logradouro haveria em letras menores um texto explicativo sobre nome dado à aquela via pública.

Vale ressaltar que a maioria das fotos das placas foram em condições adversas pela altura em que estão fixadas, normalmente muito mais alto que as atuais. Um fato interessante é que encontrou-se placas novas que simulam o visual das antigas, porém com uma tipografia diferente e impressas por serigrafia, como é o caso da Praça Horácio Sabino e a Rua Álvares Penteado.

Para o artigo acadêmico, as placas foram fichadas com informações de seus nomes atuais, nomes anteriores, data de oficialização do logradouro, prefeitura regional e descrição técnica (início e término), todos os dados retirados do site da Prefeitura de São Paulo. Destes dados, o mais relevante é a data de oficialização, que confirma que tais logradouros já possuíam o nome correspondente à placa no período que pesquisei. Estas fichas podem ser acessadas neste pdf.

§ Fontes variáveis.

Se você já é um pesquisador de tipografia, provavelmente a esta altura já sabe o que é uma fonte variável e interpolação, passe o olho por aqui e veja se algo te agrega. Caso você não saiba o que são essas coisas que comentei, começamos do começo.

Em 2016 surgiu, a tecnologia das fontes variáveis, que é uma atualização do formato OpenType para versão 1.8. Esta atualização traz duas características principais, como explica Hudson (2016) em texto que a documenta [leia aqui], publicado simultâneo à apresentação da tecnologia (Atypi, 2016):

Há vários benefícios nesta tecnologia. Uma fonte variável é um único arquivo binário, com grande redução em seu tamanho, por consequência, há menor transferência de banda para webfonts. Isto significa pacotes tipográficos mais eficientes e mais rápido carregamento das mesmas. (Hudson, 2016)

Esta primeira característica é relevante às empresas que criaram o formato — são umas empresas pequenas, startups aí, Adobe, Apple, Google e Microsoft, já ouviu falar? — ela tem como princípio fazer que arquivos de famílias tipográficas, com múltiplos pesos, possuam tamanhos bem menores, uma grande economia de bytes. Com aumento de webfonts nos servidores e alta frequência de download por acesso de usuários, a redução é de alto impacto por economizar espaço virtual e transferência de dados, assim, resulta em mais velocidade ao carregar webfonts. Este seria o principal motivo por qual há probabilidade do formato estabelecer-se padrão de mercado em curto período, sobretudo em ambiente online.

O dinamismo da seleção de instâncias personalizadas com variações no ‘espaço de design’ — ou espaço de variação do design para utilizar nome técnico [referente ao funcionamento do sistema de interpolação entre fontes tipográficas] tem grande potencial, abrindo excitantes possibilidades para ajustes finos nas tipografias com possíveis novas formas de responsividade a ser adotadas para melhor apresentação de conteúdo dinâmico no dispositivo do leitor, em relação orientação de tela ou até distância de leitura. (Hudson, 2016)

A segunda característica apontada e mais relevante à nós designers, traz possibilidades diretamente relacionadas ao layouts que poderemos desenvolver.

Ela retoma princípios da tecnologia Multiple Masters criada pela Adobe em 1992 e abandonada pela mesma em 1999 (ADOBE, 2018), onde a aparência da tipografia poderia ser alterada pelo usuário designer gráfico em até quatro eixos de interpolação representados em um painel de sliders, sendo mais comuns de peso e largura, porém havia também a possibilidade de tamanho óptico e inclinação.

Interpolar como termo matemático significa “intercalar magnitudes em uma série de magnitudes conhecidas”(SCAGLIONE, 2014). Interpreto aqui como interpolação dentro do universo tipográfico o método de gerar uma forma — as instâncias — entre dois ou mais parâmetros pré desenhados — as mestras.

A interpolação entre pesos, por exemplo, pode ser representada por um eixo com ponto inicial de mestra regular e final de mestra negrito, qualquer peso calculado pelo computador entre as mestras seria resultado de interpolação.

Fontes variáveis permitem ajustes finos do designer gráfico em relação à tipografia, adequando-as à múltiplas plataformas como Penney comenta em entrevista à Weinreich (2017): 

Nós não estamos limitados a peso e largura, mas qualquer coisa relacionada à formas de letras que o designer de tipos considere que deve suavemente ajustar, como tamanho óptico, inclinação, altura-x, tamanho da serifa, altura da descendente…

Em ambiente do design de tipos, interpolação de eixos como ferramenta de trabalho funciona desde a criação da tecnologia Multiple Masters até os dias atuais com suas devidas atualizações.

Fontes variáveis permitem levar mais recursos que as Multiple Masters entregaram, a capacidade máxima de eixos para fontes variáveis é de 64 mil, contra quatro das originais de 1992. Assim, possuem uma variação que pode ser precisamente controlada pelo designer que as utiliza tanto com propósito online como offline. Aqui, vamos focar na possibilidade offline.

§ Mão na massa: O desenvolvimento de uma fonte variável usando o Glyphs.

Agora descreverei o processo de criação de uma fonte variável, que nomeei de São Placas (turu dum tsss). Ela foi produzida no Glyphs, que permite desenvolver e exportar esse formato.

A observação do desenho das letras nas placas antigas foi o ponto inicial para conceitos que guiaram o projeto tanto no design dos caracteres como a definição de seu mapa.

Primeiros passos

A produção de uma tipografia variável a primeiro olhar não é tão diferente de um projeto tipográfico comum com múltiplos pesos e estilos. Algumas questões no entanto devem ser planejadas previamente sobretudo os eixos que serão trabalhados, que na São Placas foram peso e largura. A definição das mestras no espaço de design, ou seja, a relação numérica entre elas também é necessária.

O desenho dos caracteres da fonte devem ser compatíveis entre mestras para que um arquivo de fonte variável possa ser exportado, isso quer dizer que os pontos precisam estar na mesma ordem, os contornos no mesmo sentido vetorial e as âncoras (pontos referência para posicionamento de diacríticos), caso haja, também devem estar coerentes nas mestras.

Abaixo uma captura de tela do Glyphs mostra como é visualizado a compatibilidade, em evidência está a mestra estendida regular. As linhas azuis referem-se a conexão do mesmo ponto entre mestras, as formas com preenchimentos verdes e azuis numeradas 1 e 2 indicam a ordem dos contornos e por fim, a linha tracejada verde confere a compatibilidade da âncora, representada por um losango marrom. A letra “fantasma” que possui pontos roxos é um teste de variação em tempo real com o plug-in chamado Variable Font Preview do Mark Frömberg.

Espaço de design e interpolação

Espaço de design é o conjunto de eixos, mestras e instâncias no projeto, que pode ser representado em plano cartesiano. O projeto São Placas utiliza dois eixos: peso e largura, gerando assim um gráfico bidimensional.

A ilustração abaixo demonstra mestras em preto e exemplo de instância interpolada em vermelho. Como característica, fontes variáveis permitem o usuário utilizar qualquer valor dentro de tal espaço. Valores de peso estão entre 400 e 800 e de largura entre 40 e 125 respeitando boas práticas para desenvolvimento de espaços de design, principalmente dentro da web, estes são os valores reconhecidos por padrão no CSS.

Sobreposição de pontos

Eventualmente quando se desenha para interpolação, é necessária a sobreposição de pontos, por mais que pareça estranho, temos que pensar que estas formas estão “em movimento” e precisam se ajustar aos diferentes pesos. Abaixo o exemplo do desenho do S nas mestras extremas:

Ajuste fino

Um fato a mais para se preocupar quando está desenvolvendo uma fonte variável é lembrar que todas as instâncias entre mestras serão possíveis de serem utilizadas, então há momentos onde é necessário criar mestras virtuais, ou seja, uma ou mais mestras extras para apenas determinados caracteres, para corrigir aquela maldita transição que tá feia.

Troca de desenho — um caso a parte

Uma ocasião que pode acontecer nos desenhos mais complexos, é a necessidade de se alterar a forma do glifo. Um caso clássico é o cifrão, que eventualmente pode ter o corte vertical atravessado ou não de acordo com o peso. Para tal caso, deve-se criar formas que são substituídas em determinados pontos do espaço de design, não foi o caso na São Placas, porém, vale registrar aqui como tratar tal problema.

Aqui, temos dois glifos desenhados dentro de apenas um. Ao observar os layers vemos um caractere inicial (Light, Regular e Bold) e o paralelo marcado com [75]. O valor [75] sinaliza que a partir deste ponto no espaço de design, a fonte deve buscar o segundo desenho, como mostram as instâncias no canto inferior esquerdo.

São Placas

O desenho dos caracteres foram inspirados nas formas tipográficas das placas paulistanas, porém este experimento não pretende ser um resgate tipográfico fiel das letras originais, mas sim releitura com desenho adaptado para tecnologias atuais e aplicáveis ao desenvolvimento de fonte variável.

Algumas características trazidas dos desenhos originais valem ser ressaltadas, como formas triangulares com topo reto em “A”, “V”, “W” e “Y”; a perna diagonal do “R” e bojos como o do B, D, P, R com pequenas curvas nas extremidades, porém, bastante verticais.

O mapa de caracteres foi definido por letras caixa alta, números e versaletes, assim como era aplicado às placas do período. A pontuação da tipografia é restrita ao ponto final e hífen, que também fazem parte do conjunto da sinalização original.

Além de caracteres padrão, foram desenhadas ligaturas presentes nas placas para abreviação de palavras como “doutor”, “engenheiro”, “subdistrito”, “dona” entre outras. As versaletes eram comumente usadas para preposições sobretudo “de”, “da” e “do”, com intuito que estas ocupassem menos espaço principalmente para logradouros de nomes extensos.

O projeto tipográfico foi desenvolvido através de cinco mestras: comprimida, condensada regular, condensada negrito, estendida regular e estendida negrito.

A tipografia desenvolvida fora pensada para funcionar em um sistema de certa forma monoespaçados. Os pesos compatíveis entre si possuem mesma largura (ex: regular e negrito, estendido e estendido negrito). Esta decisão foi tomada por um ponto crucial da regra das placas, o limite de 25 caracteres. Colocar um número não é muito eficiente. Seriam 25 caracteres estreitos, com muitas letras I, por exemplo, ou 25 caracteres com letras largas como M e W?

Na tabela a seguir, estão as medidas que usei para este projeto. A largura 1 refere-se às maiúsculas, numerais e pontuação, largura 2 refere-se aos versaletes e caractere alternativo compatível para o espaço. 
As medidas utilizadas estão em unities per em (upm), unidade referência na produção de fontes. Ligaturas com duas letras possuem a largura 1 dobrada em cada peso, ocupando assim, o espaço de dois glifos.
Foi considerada a mestra Comprimida como largura mais estreita possível para que 25 caracteres sejam aplicados em placas de tamanho 45 cm por 25 cm. Pelo desenho desta mestra ser tão estreito, não há variação negrito neste extremo.

Ao longo do processo, a São Placas foi exportada para testes no Illustrator.

§ Por fim

Surgiram dificuldades durante o processo sobretudo na mestra comprimida, por conter uma largura complexa de trabalhar por sua legibilidade comprometida, caracteres naturalmente largos como “M” e “W” são os mais gravemente prejudicados. Esta é uma dificuldade comum nas monoespaçadas, contudo mestras mais largas trazem complicações inversas para caracteres estreitos, como “I”. A dificuldade de leitura também acontece nas placas originais para logradouros com nomes com muitos caracteres, como se pode notar a seguir:

É importante ressaltar que esta exploração foca na observação do desenho tipográfico original de placas antigas como inspiração. O projeto do século 20 pode e deve ter seu design questionado no sentido de qualidade em relação à legibilidade própria para sinalização, o desenvolvimento da São Placas não tem pretensão de ser um resgate tipográfico fiel, porém também não houve intenção de se distanciar do design original o suficiente para “consertar” problemas de legibilidade para uso em sinalização, algo como criar letras minúsculas, por exemplo.

O design para sinalização certamente vai além das placas de maneira geral, porém esta pesquisa alcança seu objetivo de desenvolver uma fonte variável e funcional que reflete um uso feito entre 1915 e 1976. Levar este conhecimento para projetos mais profundos, complexos e contemporâneos neste campo, pode trazer resultados interessantes.

A ideia deste artigo é demostrar como fontes variáveis podem ser úteis e precisas, evitando distorções fora do controle do designer (como simplesmente espremer a caixa de texto), trazendo o maior refino tipográfico possível.

Agradecimentos

Agradeço à Prof. Dra. Mary Vonni Meürer e Prof. Me. Rafael Castro Andrade (vulgo Ancara) pelas orientações, além da Prof. Dra. Clice de Toledo Sanjar Mazzilli, professora da disciplina “Processos experimentais e linguagem em design visual” na USP, onde este artigo foi iniciado.

§ Referências

ADOBE. (EUA) (2018). Multiple Master to OpenType Cross Reference. Disponível em: <https://www.adobe.com/products/type/opentype/opentype-mm.html>. Acesso em: 30 abr. 2018.

ATYPI, 2016, Varsóvia (2018). Special OpenType Session… [S.l.: s.n.], 2016. Disponível em: <https://youtu.be/M-vdFRtcZU0>. Acesso em: 30 abr. 2018.

SCAGLIONE, José (2014). Fluxo de trabalho. In: HENESTROSA, Cristóbal; MESSEGUER, Laura; SCAGLIONE, José. Como criar tipos: do esboço à tela. 1. ed. Brasília: Estereográfica, cap. 3, p. 63.

HUDSON, John (2018). Introducing OpenType Variable fonts. Disponível em: <https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369>. 2016. Acesso em: 30 abr. 2018.

PREFEITURA. (São Paulo) (2018). Dicionário de ruas: história de placas. Disponível em: <https://dicionarioderuas.prefeitura.sp.gov.br>. Acesso em: 03 out. 2018.

WEINREICH, Clara (2018). Variable Fonts: a talk with Laurence Penney. 2017. Disponível em: <https://medium.com/@Lorp/variable-fonts-a-talk-with-laurence-penney-d6f8e9777007>. 2017. Acesso em: 16 jul. 2018.