Aline Text: uma família tipográfica para textos em telas

CENTRO UNIVERSITÁRIO SENAC SANTO AMARO

Aline Text: Uma família tipográfica para textos em telas

Julio Claudius Giraldes Junior

❦ São Paulo 2017

JULIO CLAUDIUS GIRALDES JUNIOR

Aline Text: Uma família tipográfica para textos em telas

Trabalho de conclusão de curso apresentado ao Centro Universitário Senac - Santo Amaro, como exigência parcial para obtenção do grau de Bacharel em Design Gráfico Orientador: Prof. Ms. Jair Alves

❦ São Paulo 2017

JULIO CLAUDIUS GIRALDES JUNIOR

Aline Text: Uma família tipográfica para textos em telas Trabalho de Conclusão de Curso apresentado ao Centro Universitário Senac - Santo Amaro, como exigência parcial para obtenção do grau de Bacharel em Design Gráfico Orientador: Prof. Ms. Jair Alves

Giraldes Junior, Julio Claudius Aline Text: Uma família tipográfica para textos em telas / Julio Claudius Giraldes Junior - São Paulo (SP), 2017.

152 f.: il. color.

A banca examinadora dos Trabalhaos de Conclusão em sessão pública realizada em ___/___/_____, considerou o aluno:

Orientador(a): Jair Alves Junior, Tadeu Costa Trabalho de Conclusão de Curso (Bacharelado em Design com Linha específica em Design Gráfico) - Centro Universitário Senac, São Paulo, 2017.

1. Tipografia. 2. Fonte Tipográfica. 3.Composição de textos. 4.Telas I. Alves Junior, Jair (Orient.) II. Costa, Tadeu (Orient.)

_________________ 1. Examinador (a)

_________________ 2. Examinador (a)

_________________ 3. Presidente

Agradecimento Ao meu orientador Prof. Ms. Jair Alves Junior por ter me aceitado como orientando e acreditado no projeto.

Ao Professor Tadeu Costa e aos Designers de Tipos Eduardo Omini, Daniel Sabino e Isac Corrêa por todos os atendimentos, paciência e discuções a cerca dos processos técnicos e práticos necessários à conclusão do projeto aqui apresentado.

De todas as conquistas da mente humana, o nascimento do alfabeto ĂŠ a mais importante.

(Frederic Goudy)

Resumo Este trabalho tem o objetivo a criação de uma fonte tipográfica para composição de textos que serão lidos em telas digitais. Partiu-se do pressuposto o crescente uso de equipamentos eletrônicos como e-readers, tablets, smartphones e computadores para a leitura de conteúdos textuais mais densos como e-books, matérias de jornais e revistas eletrônicas. Considerando tal crescimento e o aumento da demanda por fontes criadas especificamente para o meio digital, o produto final deste projeto foi, portanto, uma fonte digital projetada para ser eficiente, funcional e que ofereça conforto durante a leitura de textos mais longos exibidos digitalmente. A metodologia de pesquisa incluiu: entrevistas com profissionais da área de tipografia, referências bibliográficas e digitais, as quais serviram como base, para a composição das partes teóricas e práticas. Como resultado, este projeto poderá ser utilizado como um guia metodológico para o desenvolvimento de uma fonte digital para uma melhor experiência de leitura em telas.

Palavras-chave: 1. Tipografia. 2. Fonte Tipográfica.

3.Composição de textos. 4. Telas

Abstract This work has the objective of creating a typographic font for the composition of texts that will be read on digital screens. The growing use of electronic equipment such as e-readers, tablets, smartphones and computers was used to read more dense textual content such as e-books, newspaper articles and electronic magazines. Considering such growth and increasing demand for fonts created specifically for the digital medium, the final product of this project was therefore a digital source designed to be efficient, functional and that offers comfort when reading longer texts digitally displayed. The research methodology included interviews with professionals from the area of ​​typography, bibliographical and digital references, which served as a basis for the composition of the theoretical and practical parts.

As a result, this project could be used as a the development of a digital source for a best reading experience on screen.

Key words: 1. Typography. 2. Typographic font.

3.Composition of texts. 4. Screens

Sumário 1 Introdução 17 2 Procedimentos Metodológicos 21 3 Fundamentos Teóricos 25 4 Resultados da Pesquisa 53 5 Requisitos para o Projeto 91 6 Estudos de Concepção 95 7 Considerações Finais 127 8 Referências 130 9 Lista de Imagens 134 10 Glossário 136 11 Entrevistas com Type Designers 140

1 Introdução

E

1 Introdução

ste trabalho tem como finalidade desenvolver uma família tipográfica para composição de textos longos exibidos em dispositivos de leitura digital ou similares, cujo conteúdo será lido através telas, como as encontradas em tablets e telefones celulares. Para tanto, serão levados em consideração preceitos tipográficos embasados em processos empíricos e bibliográficos, que elucidam quais as características mais desejáveis que esse tipo de produto deva possuir para que, então, se consiga proporcionar ao leitor uma experiência de leitura mais confortável, dinâmica e fluida.

JUSTIFICATIVA

17

Por conta do crescente uso dos dispositivos digitais como computadores, e-readers, tablets e smartphones, houve consequentemente um aumento da demanda por projetos tipográficos que fossem desenvolvidos exclusivamente para esses tipos de dispositivos digitais.

Segundo a pesquisa realizada pela Fundação Instituto de Pesquisas Econômicas (Fipe) sob encomenda da Câmara Brasileira do Livro (CBL) e do Sindicato Nacional dos Editores de Livros (SNEL), a qual demostra que, no ano de 2015, 189 editoras venderam 1.264.517 e-books, obtendo um faturamento de R$ 20,44 milhões.

Tal demanda tem sido atendida com o perceptível crescimento do número de fontes produzidas para o meio eletrônico. Como o caso da Monotype, a qual, segundo seu relatório anual, possuía em 2015, aproximadamente 25 mil

Unidades de eBooks vendidas (por milhão de unidades)*

2 1.5 1.213 1.0 Figura 1 Vendas de eBooks no Brasil entre 2013 e 2015. Fonte: Fundação Instituto de Pesquisas Econômicas. Ilustração

18

1 Introdução

autoria própria

1.264

0.889

0.5 0

2013

2014

2015

Os dados podem ser conferidos na pesquisa anual, realizada pela Fundação Instituto de Pesquisas Econômicas (Fipe) sob encomenda da Câmara Brasileira do Livre (CBL), e do Sindicato Nacional dos Editores de Livros (SNEL).

fontes a venda na sua loja virtual e em 2016, esse número subiu para mais de 99 mil. Demonstrando assim que a produção de fontes tipográficas digitais tem aumentado rapidamente (MONOTYPE, 2016).

Em contrapartida porém, muitas dessas fontes não oferecem a mesma funcionalidade quando se necessita utilizá-las em textos mais longos exibidos em telas, onde são submetidas a tamanhos de corpo menores em uma quantidade maior de texto. Em adição a isso, muitas fontes ainda, são exibidas em telas com baixa resolução, ou que emitam diretamente luz em direção ao usuário, como no caso dos tablets, contribuindo assim, para o cansaço dos olhos durante a leitura por longos períodos. Todas essas complicações tecnológicas, contribuem para que o ato da leitura desse tipo conteúdo se torne uma tarefa pouco confortável e atrativa.

Considerando tais questões, justifica-se este trabalho como uma oportunidade de explorar mais este campo, oferecendo como produto final a criação de uma família tipográfica com especificidades técnicas que contribuam para uma experiência melhor para o leitor. ▪

2 Procedimentos Metodológicos

A

2 Procedimentos Metodológicos 21

primeira etapa deste trabalho foi o levantamento bibliográfico, estabelecido a partir de autores e referências selecionadas por questão de relevância teórica e prática. Esta bibliografia básica pode ser dividida em dois grupos: da área teórica, de caráter mais geral e histórico, e, de obras voltadas para enfoques técnicos, práticos para o desenvolvimento de uma fonte digital.

O primeiro grupo foi utilizado para desenvolver os capítulos iniciais. A exemplo da introdução histórica, a qual apresentará uma visão geral desde a revolução digital dos anos 90, até o uso da tipografia digital nos dias de hoje, na internet e em meios eletrônicos. Em seguida, serão explorados os conceitos de legibilidade, leiturabilidade e como a tipografia – sendo uma ponte entre leitor e conteúdo – influi na experiência de leitura. Na sequencia ainda, há uma análise comparativa entre fontes serifadas e sem serifas, buscando definir, qual dos dois estilos demonstra uma melhor performace quando utilizados na composição de textos longos em telas.

Já nos resultados da pesquisa, a bibliografia de caráter prático foi utilizada como guia da metodologia para desenvolvimento de uma familía tipográfica digital.

Inicialmente, através de uma visão macro do processo de desenvolvimento, dividido-o em partes pré-conceituais, de producão, pós-produção, finalização e publicação.

Depois, partindo dos esboços em papel e digitalização através das curvas Bézier, para a ordem de desenho dos caracteres e seus ajustes ópticos. Continuando, o proces-

2 Procedimentos Metodológicos 22

so com a explicação da importância das contraformas no espaçamento e kerning das letras desenhadas. Mais adiante, é apresentado o processo de hinting, cuja função é otimizar a exibição e renderização de fontes em telas.

Por fim, foi feito um levantamento sobre a origem e funcionalidades dos formatos de fontes digitais TrueType e OpenType. Diferentemente dos capítulos anteriores, os últimos dois pertencentes aos resultados de pesquisa e trazem um levantamento de fontes digitais, além de um estudo de casos. No primeiro, foram selecionadas 11 fontes que apresentaram ótimas performaces e funcionalidade em telas. Dentre elas, 7 fazem parte da curadoria de Ellen Lupton e Christopher Clark, no livro Tipos em tela, e, as outras 4 são oriundas das conclusões do próprio autor deste trabalho, o qual se apropriou do mesmo sistema de avaliação de Ellen e Clark, para dar a sua contribuíção.

Já no estudo de casos, foi feito uma análise mais detalhada de 2 fontes escolhidas pelo autor, as quais, segundo o mesmo, apresentam as características mais desejáveis para composição de textos longos em telas.

Com intuito de agregar uma visão mais prátca ao trabalho, serão feitas também entrevistas com designers de tipos brasileiros, sobre a profissão, o mercado de trabalho e suas abordagens durante o processo criativo de desenvolvimento de suas fontes.

Todos os embasamentos teóricos e práticos encontrados nos capítulos anteriores, serviram para traçar os requisitos do projeto que, por sua vez, serviram de ponto de partida para o desenvolvimento do produto final, uma fonte tipográfica para composições de textos longos em telas. As citações inseridas em inglês, foram mantidas no idioma original, porém contarão com sua tradução nas notas de rodapé da respectiva página.

No texto corrido, as expressões que foram mais utilizadas, terão seus significados e explicações elucidadas no glossário (página 136). ▪

3 Fundamentos Teóricos

O

3 Fundamentos Teóricos

panorama da tipografia até então analógica, se modificou completamente depois da chegada dos computadores pessoais, lançados pela IBM no início dos anos 80. Com essa novidade os usuários não precisavam mais serem graduados em ciência da computação para poder utilizar todas as funções e ferramentas dos seus computadores pessoais. Isso resultou consequentemente em um grande impacto para o cenário tipográfico. Nesse capítulo, será apresentado um levantamento breve e sucinto, sobre a tipografia na era digital, desde o seu início nos anos 80, até os dias de hoje.

A TIPOGRAFIA NA ERA DIGITAL

25

Em 1984, com o lançamento do Macintosh surgiu uma novidade decisiva: wysiwyg (what you see is what you get), com essa tecnologia, fez-se então o início do Desktop Publishing. O DP tratava-se de uma ferramenta que dava a possibilidade de saída para materiais publicáveis, podendo estes serem feitos para o uso em tela, assim como para impressão.

Bastava apenas um designer operando um PC para que se pudesse dar saída para uma impressora. Programas como Quark X Press e Pagemaker, foram justamente feitos para simular o trabalho do designer gráfico.

Inicialmente rudimentares quanto à sensibilidade das ferramentas para o manuseio da tipografia, pacotes de atualizações posteriores rapidamente responderam a

demanda dos designers e assim, estes puderam desfrutar melhor dos benefícios dessa tecnologia.

Apesar da transferências das fontes para o ambiente digital, e do crescimento de vendedores nesse ambiente, como as empresas Bistream e Emigre, havia ainda uma quantidade bastante reduzida de fontes para o ambiente digital. Junto com o Mac vieram algumas fontes de sistema, entre elas, versões da Courier (Uma referência às máquinas de escrever), Helvetica e Times New Roman, assim como novas fontes para telas que trabalhavam em baixar resoluções (72dpi), como a Chicago (Usada pelo próprio sistema da Apple), Geneva, Monaco e a New York (BLACKWELL,1998).

Aliado ao aumento do número de empresas que procuravam vender seus serviços no ambiente digital, houve um crescimento no mesmo período do número de fontes que estavam sendo desenvolvidas para atender esse mercado em ascensão. Entre as produções tipográficas feitas na época, muitas tinham como propósito lidar com o desafio da qualidade variável de impressão, a qual degradava as formas de muitas das fontes. Isso se deve ao fato das impressoras disponíveis até então, possuirem uma resolução baixa (BLACKWELL, 1998).

Essa limitação, tornou-se um grande problema para impressão de fontes em tamanhos pequenos, com 8pt, cujas finas serifas dificilmente eram renderizadas2 corretamente. Como resposta, designers de tipos como Matthew Carter, Gerard Unger, Kris Holmes, passaram a

2. Renderizar é o processo pelo qual se obtém o produto final de um processamento digital qualquer.

3 Fundamentos Teóricos

3 Fundamentos Teóricos

Figura 2 Chicago, criada por Susan Kare para os computadores da Apple. Fonte identifont.com

1. "Dentro da minha experiência, o tempo que se tomava para conceitualizar e produzir um caracter de letra passou de um ano para um dia. (tradução do autor).

Figura 3 Letra S da fonte Demos projetada por Gerard Unger gerardunger.com

27

26

– Matthew Carter"

Com o aparecimento dos computadores pessoais foi possível aos designers integrarem imagens e tipografia, utilizando apenas um único programa, com a vantagem ainda de após se concluir o projeto, este poder ser exportado para um único arquivo.

Outra grande vantagem foi a diminuição do tempo gasto para se desenvolver uma fonte. Segundo Matthew Carter (1989 apud LEWIS BLACKWELL, 1998, p. 131), within my experience, the time take to conceptualize and produce a real letter character has gone from a year to a day1.

Figura 4 Comparação entre fontes bitmap e PostScript Fonte

A curva Bezier [...] originalmente desenvolvida pelo francês Pierre Bezier para a indústria automobilística, nos anos 60, tornou-se uma nova ferramenta de desenho baseada em uma variedade muito versátil de curvas matemáticas. [...] Tais construções matemáticas tinham como mérito o fato de proporcionarem uma definição fácil das curvas de maneira que os computadores pudessem entendê-las. Posteriormente, seu conceito se tornou a base de todo o modelo gráfico do Adobe PostScript, sendo hoje largamente utilizado na maioria dos softwares de computação gráfica. Desta forma, tais curvas se tornaram familiares para qualquer usuário de programas com “vector drawing”. (MAGGIONI, Liane, 2017)

3. Bitmap, que significa mapa de bits em inglês, são imagens não escalonáveis que contêm a descrição de cada pixel, em oposição aos gráficos vetoriais.

Com a apropriação dessas novas ferramentas, os designers da nova geração começaram a explorar e experimentar com as formas tipográficas.

desenho da letra, esse processo muitas vezes acabava, por deformar o desenho original das letras (BLACKWELL, 1998).

Com a proliferação dos programas digitais, criou-se também a demanda por uma linguagem comum para os arquivos de fontes. E novamente, a Adobe inovou e criou em 1983 os arquivos em formato PostScript. Esse novo

Figura 5 Exemplo de curvas Bézier no desenho de uma letra Q (Autoria própria)

29

28

formato, deixa de utilizar imagens bitmap3 em detrimento das curvas de Bézier, para se atingir uma qualidade de imagem impressa melhor (BLACKWELL, 1998).

De acordo com a engenheira tecnológica, Liane Regina maggioni, as curvas Bézier têm como definição:

3 Fundamentos Teóricos

3 Fundamentos Teóricos

tipografos.net

desenvolver famílias tipográficas com o objetivo de minimizar estes problemas (BLACKWELL, 1998).

Uma outra questão, além da baixa resolução, era o fato que boa parte das fontes não eram renderizadas adequadamente pelo próprio computador.

Diante deste novo desafio, a Adobe foi pioneira a desenvolver um método chamado Hinting para superar essa problemática. Essa nova ferramenta criava informações na fonte que se ajustavam automaticamente a forma das letras em tamanhos pequenos, a fim de combater os já mencionados problemas de baixa resolução e renderização. Para que se pudesse preservar as características do

A exemplo da revista norte americana Emigre, lançada em 1984, liderada por Rudy Vanderlans e Zuzana Licko, cuja importância se deve tanto na demonstração de novas ideias para o uso da tipografia, assim como um meio para debates relaciona dos à área.

Figura 7 Capas da revista The Face por Neville Brody.

Fonte: Inkbotdesign

1986. Fonte: Zuzana Licko - Emigre

As fontes produzidas por Zuzana Licko e outros designers, foram resultados de experimentações dentro das estruturas de bitmap, buscando estéticas que poderiam ser adquiridas com o potencial dos sistemas da época (BLACKWELL, 1998).

Outra grande figura que se destacou nesse período foi Neville Brody, cujo trabalho na revista The Face e Arena o tornou internacionalmente famoso. Seu trabalho, caracterizado por várias experimentações com as formas das letras, muitas vezes ainda influenciadas pelas estéticas das fontes bitmap, eram resultado da influencia tipográfia expressionista ensinada por Wolfgang Weingart. Seguindo o mesmo pensamento, surgiram outras revistas como a i-D Magazine de Tery Jones, Blitz na inglaterra, Actuel na França e Wiener na Alemanha (BLACKWELL, 1998).

O fenômeno dessas revistas, foi um resultado da nova produção de designers gráficos, que se apropriaram da tecnologia digital e a utilizam como ferramenta para as

31

30

Matrix, desenhada por Zuzana Licko em

suas experimentações. Houve também em contrapartida, um aumento do número de revivals de famílias tipográficas criadas antes da era digital. Isso foi permitido através dos recém criados scanners que tornaram possível a transformação de fontes antigas que apenas existiam em espécimes tipográficos ou em livros impressos, em um novo arquivo de fontes digital. Ou seja, tornando o que era tangível, em intangível.

A quantidade de novas famílias tipográficas nos 90 já era grande a ponto de já ser difícil estimar a quantidade que estavam em circulação na época. A maior parte das Type Foundries moveram suas bibliotecas para o meio digital e/ou passaram a oferecer Compact Discs com centenas de fontes disponíveis para venda. A Emigre, possuía um catálogo de aproximadamente duzentas fontes em meados de 1997, entre elas a fonte Template Gothic de Barry Deck que se tornou um grande sucesso na época, após estampar a capa da décima nona edição de sua revista homônima (BLACKWELL, 1998).

Fundada em 1990 pelos designer gráficos Neville Brody em Londres e Erik Spiekermann em Berlim, a Fontshop Internacional era comercialmente mais motivada pelo negócio de Type Design. Ao contrário da Emigre, o porti-

3 Fundamentos Teóricos

3 Fundamentos Teóricos

Figura 6 Caracteres da fonte

3 Fundamentos Teóricos

Figura 8 A fonte Template Gothic estampada na capa da revista Emigre Fonte: 20th Century Type, BLACKWELL,

fólio de fontes da FSI possuía uma natureza bem menos experimental que a Emigre. No final dos anos de 1997, eram oferecidas mais de duas mil fontes, produzidas por inúmeros designers. Todas as suas fontes eram caracterizadas pelo selo FF encontrado em frente ao nomes de suas famílias tipográficas. Iniciativas como as da FSI e

4. Cascading Style Sheets (CSS) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento e etc...) a um documento web. Em vez de colocar a formatação dentro do documento, o CSS

Surgiram então, tecnologias para preencher o vazio deixado pelo CSS 2.14, técnicas como Scalable Inman Flash

cria um link (ligação) para uma página que contém os estilos.

33

32

Lewis, (1998, p. 145)

A implementação de normas para a web tornou mais rápido o proceso de desenvolvimento de sites, permitindo que os designers passassem menos tempo programando diferentes versões da mesma página e mais tempo aperfeiçoando seu ofício. A medida que os sites se tonavam mais complexos e o design para a web tonava-se mais elegante, o desejo por mais fontes crescia (LUPTON, 2014, p. 12).

3 Fundamentos Teóricos

Emigre, inspiraram pequenas fundições e designers independentes a publicar e distribuir suas fontes. Fundições tradicionais como Linotype, Monotype e Berthold tiveram grandes dificuldades durante os anos 1990, de buscar um reposicionamento dos seus negócios e em perceber e reavaliar o valor das suas propriedades intelectuais em tempos de declínio dos seus negócios tradicionais. Por outro lado, a Adobe cresceu rapidamente, tornando-se uma das maiores distribuidoras de fontes, se utilizando da posição favorável de possuidora da tecnologia Post Script para expandir, licenciar e desenvolver suas fontes.

Enquanto isso, cada vez mais se utilizava a internet como forma de distribuição de fontes, sem necessitar portanto de peças físicas das espécimes compradas.

Outro fator que contribuiu com a crescente diversidade tipográfica na web, foi a criação em 1998, da regra @font-face, a qual dava a possibilidade aos navegadores fazerem o download de informações relativas a uma fonte, permitindo assim que qualquer uma fonte pudesse ser usada em um site. No entanto, esta regra não continha qualquer tipo de proteção contra pirataria, fazendo com que a @font-face, fosse removida e não retornasse por quase uma década (LUPTON, 2014).

Porém, em meados dos anos 2000, as coisas começaram a mudar. Segundo Lupton, no livro Tipos na tela:

Essas radicais trocas de tecnologias e o crescimento do mercado tipográfico, com a diminuição do custo de produção encorajado pelo aumento do uso dos computadores e da internet, trouxeram uma mudança das

3 Fundamentos Teóricos

ANATOMIA TIPOGRÁFICA

Este sub-capitulo trará um pequeno resumo sobre a anatomia e nomenclatura tipográfica que será utilizada no decorrer deste trabalho. Os termos que serão apresentados a seguir, contribuirão para um melhor entendimento das análises e informações técnicas abordadas, principalmente nos resultados de pesquisa.

Primeiramente, devemos definir quais grupos de caracteres são minimamente necessários para que uma família tipográfica tenha um bom desempenho em textos.

ABCDEFGHIJKLMNOPQRSTUVXYZ Caixa alta (Upper case)

abcdefghijklmnopqrstuvxyz Caixa baixa (Lower case)

Figura 9 Caixas altas e baixas. Fonte (Autoria própria)

35

34

Depois da invasão de fontes atualmente disponíveis, os designers ficaram livres para tomar decisões ruins, usando fontes display para texto, forçando negrito e itálico e selecionando tipos no Mac sem testar no Windows. [...] variações entre navegadores e sistemas operacionais arruinavam composições e experiências de leitura. A web estava cheia de fontes mal utilizadas (LUPTON, 2014, p. 14).

demandas para o uso da tipografia. Tinha-se toda forma de estilos tipográficos de épocas distintas sendo utilizados nas mais diversas mídias. Simular formas tradicionais nas novas mídias digitais, que oferecessem conforto e boa leitura em meios impressos, não podiam ser mais o futuro, uma vez que já se tinha um número imenso desse tipo de fontes. Um novo desafio surgiu com o intuito de entender como a tipografia poderia funcionar melhor em ambientes virtuais, como o das telas.

Desprendeu-se de certa forma da ideia de digitalizar e ou reviver fontes das eras anteriores, mas voltou-se o olhar em como melhorar a experiência do usuário nessa nova mídia digital. Surgiu-se portanto, uma demanda por fontes que fossem exclusivamente desenvolvidas para o ambiente virtual (BLACKWELL, 1998).

Hoje, os designers de tipos e fundições unem esforços para desenvolver tipos capazes de resistir às dificuldades da vida na tela (LUPTON, 2014).

3 Fundamentos Teóricos

Replacement (SIFR), Cúfon (Gráficos Vetoriais escaláveis ou SVG) e typeface.js funcionavam relativamente bem e permitiam que qualquer fonte para impressão fosse utilizada na web sem a necessidade de adquirir licenças adicionais.

Dessa forma, de acordo com Lupton, (2014, p. 12), “[...] Os designers de tipos passaram a se preocupar menos com a pirataria e mais com um mercado de design que estava rapidamente evoluindo sem eles”.

Ja em 2008, os navegadores Mozilla Firefox e Safari reimplementaram a regra @font-face, dando o acesso a fontes para Web para os usuários de internet. Serviços de hospedagens de fontes, entraram em cena como Typekit, Fontdeck e Google Fonts, com o papel de preencher o vazio de licenciamento e piratara que ainda existia no CSS. Esses serviços ajudaram a solucionar muitos dos pequenos problemas que acompanharam o suporte a múltiplos navegadores e ofereceram fontes que podiam ser adquiridas em um mesmo lugar. Os provedores de hospedagem de fontes tornaram-se o recurso padrão das fontes para Web (LUPTON, 2014).

Os designers de tipos inicialmente tiveram uma certa resistência contras as fontes para web, pois apresentavam inúmeros problemas, entre eles, afirma Lupton:

Começando com a caixa alta e baixa, cuja origem do nome vem da impressão com tipos móveis. Na época, para facilitar o acesso do tipógrafo aos caracteres, estes eram divididos pela frequência de seu uso. A parte contendo os caracteres mais usados (as minúsculas, pontuações, espaços e algarismos) ficavam num plano mais baixo, mais acessível, a caixa baixa. Já a parte onde as maiúsculas eram guardadas, ficava mais no topo da caixa de tipos, e por isso, levou o nome de caixa alta (CHENG, 2005).

Figura 10 Versaletes. Fonte Autoria própria

ABCDEFGHIJKLMNOPQRSTUVXYZ Versaletes (Small Caps)

3 Fundamentos Teóricos

x 0123456789 x 0123456789 Númerais desalinhados (Old Style ou Lining Figures)

Figura 11 Números alinhados e desalinhados Fonte

Númerais alinhados (Proporcional Figures)

Entre os numerais, existem basicamente dois tipos: os numerais alinhados e desalinhados. Os alinhados, como seu próprio nome diz, possuem todos os seus números alinhados geralmente na altura ou um pouco a baixo da caixa alta. Por outro lado, os números desalinhados, ou

Figura 12 Sinais de pontuação e símbolos não alfabéticos. Fonte (Autoria própria)

Levando ainda em conta os diferentes idiomas que serão suportados por uma fonte, deve-se também considerar os diacríticos, como sinais gráficos que distinguem ou destacam a pronúncia de certas palavras. A exemplo dos acentos agudos, grave e cedilha.

Outros caracteres ainda bastente utilizados, são as ligaturas, que servem muitas vezes como soluções para conflitos em determinados pares de letras (fi, fl), ou como assinaturas estilísticas tipográficas (CHENG, 2005).

ãẳưčçüîęềñøřħůșż Diacríticos (Diacritical Marks)

æœßfiflfbffffiftst Ligaturas (Ligatures)

Figura 13 Diacríticos e ligaturas.

Autoria própria

37

36

(Autoria própria)

@&*#%^+= ©°®❦¶¦†‡«§ ™ .,:; […] / - – — ¡!¿? {}() ‘’ “ ” ¢ ¤ $ €ƒ₣₤₧£¥+−×÷=≠><≥≤± ≈ ~ ¬ ∅ ∞ ∫ ∏ ∑ √ ∂ %‰ ↑ ↗ → ↘↓↙←↖↔↕↲↳↵●○◯ ◊■▪▲▶▼◀△▷▽◁►◄▴▸▾◂ ☜☞✓❦@&¶§©®™°|¦†‡^

3 Fundamentos Teóricos

Em seguida, as versaletes, que são carácteres com a altura-x próxima da caixa baixa, mas com desenho semelhante ao da caixa alta. Geralmente são utilizadas para dar ênfase em textos, ou em inícios de parágrafos.

Importante notar, porém, que as versaletes, não são simplesmente versões achatadas da caixa alta, pois seus caracteres são ajustados e redesenhados individualmente.

também chamados de old style, ou numerais textuais, são desalinhados e acompanham o ritmo da caixa baixa, tendo números que terminam nas descendentes ou iniciam nas ascendentes de um alfabeto. São ideais para serem compostos em textos longos, pois não interferem no ritmo de leitura (CHENG, 2005).

Em adição aos números e letras, temos ainda os sinais de pontuação e símbolos não alfabéticos.

Figura 14 Exemplos de letras ornamentadas na Minion Pro

3 Fundamentos Teóricos

Serifa moderna (Didot)

Serifa arredondada

Serifa em concha

Serifa em forma de bracelete

Serifa em forma de cunha

Serifa Egípcia ou Slab

Figura 16

Finalizando este subcapítulo, na próxima página, será apresentado um guia com os termos mais comuns referentes à anatomia tipográfica e as características particulares de cada letra do alfabeto latino.

Exemplo de diferentes tipos de serifas (Autoria própria)

3 Fundamentos Teóricos

Existem também outros caracteres especiais que são estilizados com arrebates e ou ornamentos, os quais podem ser utilizados para destaques e ou opções decorativas.

Esses caracteres alternativos geralmente são encontrados em fontes com o formato OpenType.

Após a apresentação dos grupos de letras acima, podemos fazer uma análise mais detalhada com relação às suas características. Dessa forma, a análise a seguir tem o intuito apresentar a nomenclatura básica referente às principais partes que consistem a anatomia tipográfica das letras. Antes, porém, há um ponto importante a ser esclarecido. A nomenclatura utilizada neste trabalho teve como referência o livro da professora de design da Universidade de Washington Karen Chang, lançado em 2005 chamado Designing type, e não representa a única forma correta de utilizar estes termos tipográficos. Atualmente, existem vários estudiosos e profissionais na área tipográfica que se apropriam de vocábulos distintos, muitas vezes de acordo cada idioma, para descrever os mesmos termos.

Existem vários estilos de fontes: as serifadas, sem serifa, mistas, script, experimentais, fantasias e dingbats.

Porém, dentro do contexto desse trabalho, serão estudados dois tipos principais de estilos tipográficos, os sem serifa (sans serif) e os serifados.

Os tipos serifados geralmente, possuem terminais presentes nos estilos que fazem referência à sua origem lapidar (gravada em pedra) ou caligráfica (HENESTROSA, 2014). Entre as famílias tipográficas serifadas, existem diferentes tipos de serifa conforme demonstrado na imagem abaixo. Cada estilo remete à ferramenta utilizada para a construção dos caracteres.

Figura 17 (Próxima Página) Anatomia Tipográfica Autoria própria

Tipografia Figura 15 Tipos com (Autoria própria)

Tipografia

Fonte Sem Serifa (Myriad Pro)

39

38

e sem serifa

Fonte Serifada (Aline Text)

Serifa

Barra

Orelha

Terminal

Olho

Bojo ou barriga

Espinha Ligação

Espora

Espinha Bojo

Espora

Loop

Ápice

Ascendente

Braços

Ombro Espora

Bojo

Serifas

Barra

Barra 3 Fundamentos Teóricos

3 Fundamentos Teóricos

Bojo

Descendente

Ponto

Gancho

Bojo superior

Barra

Haste

Cauda

Haste

Suporte ou Cochete

Cintura

Perna

Bojo inferior

Cauda Terminal

Diagonais

Diagonais

Espinha Perna

Terminal

Calda

41

40

Vértice Cauda

FUNCIONAMENTO DAS TELAS LCD E E-INK

3 Fundamentos Teóricos

não forem energizadas, com ajuda de eletrodos, elas vão induzir a luz recebida a fazer uma torção de 90 graus, mudando seu sentido horizontal para vertical. Uma vez na vertical, a luz vinda dessas moléculas de cristais líquidos, terá passagem livre e não será bloqueada pelo segundo filtro polarizador, o qual por sua vez, só permite a passagem de luzes verticais. Permitindo assim, que finalmente o subpixel necessário seja ligado (HARRIS, 2002).

Figura 19 Esquema de funcionamento de uma tela LCD Fonte – Carlos Luis Burgos, do canal Burgoseletronica no Youtube

3 Fundamentos Teóricos

Tendo em mente que o produto deste trabalho será uma fonte desenvolvida para ser utilizada em diversos tipos de telas com resoluções e sistemas de exibição diferentes, é, portanto importante também entender os seus funcionamentos básicos. Dessa forma, será possível, durante o processo de confecção da fonte, levar em considerações as suas características e limitações.

Hoje em dia, existem duas tecnologias de telas mais utilizadas para exibição de conteúdos digitais: a LCD, utilizadas em tablets, monitores de computadores, notebooks, smartphones e a E-Ink, amplamente utilizada em e-readers, como o caso do Kindle da Amazon e o Lev da Saraiva.

As telas de cristal líquido ou, em inglês LCD (liquid cristal display), são formadas por pixels. Cada um desses pixels possui três subpixels, os quais por sua vez, representam as cores verde, vermelho e azul (RGB).

Figura 18 Pixels e seus subpixels exibidos na tela do MacBook Pro. Fonte: Dan

Durante o funcionamento das telas LCD, existem duas situações: quando os pixels estão apagados, e quando estão ligados. De forma simplificada, quando os pixels estão apagados, significa que a luz emitida no fundo, não chega até a última camada externa da tela, fazendo com que o pixel em questão não emita nenhuma luz.

Isso depende principalmente, da posição onde as moléculas de cristal líquido estarão no momento em que a luz direcionada passará por elas. Se essas moléculas

5. PPI (Pixels Per Inch) referem-se ao número de pixels de dispositivo por polegada, também chamado de "densidade de pixels". Quanto maior o número, menor o tamanho dos pixels, portanto, os gráficos são percebidos como mais nítidos e menos pixelados.

43

42

Rhatigan, Typecast

Caso, entretanto, as mesmas moléculas forem energizadas, elas não vão mais alterar o sentido da luz emitida, que permanecerá na horizontal e, portanto, será posteriormente bloqueada pelo segundo polarizador vertical.

Resultando, no desligamento do pixel (HARRIS, 2002).

Esse processo de apagar e acender os pixels acontece aproximadamente 60 vezes por segundo e é assim de forma básica e resumida que as imagens são formadas nas telas de LCD. Hoje em dia existem diversos tipos de telas LCD com diferentes tipos de resoluções.

A título de comparação, a resolução do iPhone 3S era de apenas 163ppi5, já o último modelo lançado, o iPhone 7, possui 401ppi (GABRIEL, 2017).

Figura 20 Evolução da resolução do iPhone. Fonte Gabriel Sébastien, DPI Love. Imagem

Figura 21 Funcionamento da tecnologia E-Ink Fonte – E-Ink. Imagem adaptada pelo autor

Figura 22

Comparando as duas tecnologias e entendendo melhor seu funcionamento, podemos perceber suas vantagens e desvantagens e como elas podem influir na forma com que uma fonte será exibida em suas telas.

Exibição em uma tela do Kindle.

Fonte Dan Rhatigan, Typecast

45

44

adaptada pelo autor

Além das telas LCD, existe também a tecnologia E-Ink, muito utilizada em e-readers como Kindle, Lev entre outros. A tecnologia E-Ink trabalha usando microcápsulas que são suspendidas num líquido, com aproximadamente a mesma largura de um cabelo humano, e contêm partículas positivamente carregadas brancas e partículas pretas negativamente carregadas (E-INK, 2017).

Quando é aplicado um campo elétrico negativo, as partículas brancas chegam à superfície. Inversamente, a isso, quando é aplicado um campo elétrico positivo, isso faz com que as partículas pretas cheguem à superfície. Ao aplicar campos diferentes em várias partes de uma tela, a E-Ink pode produzir uma exibição de texto (E-INK, 2017).

Além de ser considerado por muitos como mais fácil para os olhos lerem textos, a tecnologia E-Ink também possui menor consumo de energia, particularmente quando comparado com tradicionais telas de cristal líquido LCD retroiluminado (HIDALGO, 2016).

Essas vantagens, juntamente com a adoção por grandes fabricantes de e-readers como Amazon e Sony, fizeram com que a E-Ink dominasse o mercado de displays de leitores de livros eletrônicos. Apesar de sua popularidade, a tecnologia E-Ink também tem suas limitações. Uma delas é a sua incapacidade de exibir cor e vídeo.

Além disso, ao contrário dos tradicionais monitores LCD, a E-Ink não têm retroiluminação, o que torna um desafio ler em locais pouco iluminados. Com exceção aos modelos Kindle mais novos, como o Paperwhite, os quais já contam com iluminação adicional através de LED. Hoje em dia, os aparelhos da terceira geração do Kindle, possuem telas com 300ppi de resolução (HIDALGO, 2016).

3 Fundamentos Teóricos

3 Fundamentos Teóricos

Isso demonstra que a tecnologia está oferecendo cada vez mais telas com melhor resolução. Porém, não soluciona todos os problemas de exibição e renderização de fontes em telas. No capítulo chamado Hinting, dentro dos resultados de pesquisa deste trabalho, essa questão será melhor explorada (GABRIEL, 2017).

LEITURABILIDADE E CONFORTO DURANTE A LEITURA

A fim de compreendermos quais os fatores que contribuem para o conforto durante a leitura de textos, há dois termos importantes a serem definidos: legibilidade e leiturabilidade. De acordo com o designer de tipos Walter Tracy (1986 apud GERARD, 2007, p. 20), legibilidade se refere à facilidade com a qual letras podem ser distinguidas uma das outras. Quando, por exemplo, há uma diferença suficiente entre a caixa alta "I" e a caixa baixa "l". Da mesma forma que se não houver uma coesão

Figura 23 Comparativo da legibilidade entre fontes. De cima para baixo: Schirft, Linear Konstrukt, Neo Fonte: While you’re Unger, (2007, p. 129)

6. Contraforma são os espaços em branco no interior e ao redor dos caracteres, em contraposição à forma, que é a área ocupada pelo caractere ou pelas partes pretas.

Figura 24 Exemplos de parágrafos com diferenças de largura das letras e espaçamento Fonte: While you’re reading, GERARD, Unger, (2007, p. 95)

47

46

reading, GERARD,

entre os caracteres, ou estes possuírem contraformas6 reduzidas, sua legibilidade também estará prejudicada.

Por outro lado, leiturabilidade, segundo Tracy, é um termo mais amplo que se refere ao conforto da leitura.

Se um leitor conseguir ler um jornal por um espaço maior de tempo, esse jornal é considerado com boa leiturabilidade. O espaçamento entre letras, é uma característica bastante importante que também influi consideravelmente no ritmo de leitura. Fontes que tenham corpos muito estreitos ou largos, prejudicam a experiência do leitor.

Conforme exemplo da imagem abaixo, com excessão do primeiro parágrafo, cujos espaçamentos e largura das letras foram definidos corretamentes, podemos perceber que o ritmo de leitura pode ser drasticamente prejudicado. Agora, caso as letras estejam próximas ou distantes demais uma das outras (parágrafos 3 e 4), a leitura desse trecho será prejudicada. Da mesma forma que se as larguras das letras forem alteradas indiscriminadamente para expandindo ou comprimindo (parágrafos 2 e 3), isso acarreterá também em um desconforto ao leitor, pois ficará

3 Fundamentos Teóricos

3 Fundamentos Teóricos

No caso das telas LCD, por serem mais populares, existem no mercado dispositivos equipados com diferentes resoluções. Impossibilitando o Designer de Tipos de presupor se a sua fonte desenvolvida, será sempre exibida em monitores de alta resolução. Quanto ao tempo de leitura, as telas LCD, perdem para as telas com a tecnologia E-Ink, pois emitem luz diretamente na direção do usuário, contribuindo para um cansaço visual mais rápido, o que por sua vez, não ocorre nos e-readers, feitos para um tempo maior de leitura.

As telas LCD, funcionam com a síntese aditiva RGB, já a tecnologia E-Ink, só possuí pigmentos pretos e brancos, os quais, podem atingir várias variações de cinza e conseguem fornecer um contraste maior na hora de exibir uma fonte (HIDALGO, 2016).

3 Fundamentos Teóricos

FONTES SERIFADAS OU SEM SERIFA

Muitos designers se deparam com as seguintes perguntas: Fontes serifadas ou sem serifa, quando escolher uma em detrimento da outra? Qual delas funciona melhor para composição de textos mais longos?

Em seu livro, While you’re reading, Gerard Unger levanta essa questão, ao dar o exemplo do jornal holandês Trouw, o qual em 1986, mudou sua fonte serifada Ionic para a a sem serifa Frutiger. Após 12 anos de intensas reclamações

Figura 25 Comparação entre Frutiger (em cima) e Swift (a baixo) Fonte: While you’re Reading, UNGER, (2007, p. 165)

49

48

Ou seja, o leitor que se deparar com letras que possuam muita personalidade, a sua experiência de leitura de um determinado texto, poderá se tornarar mais árdua, uma vez que será preciso decodificar constantemente as letras durante o processo da leitura. Nas palavras de Gerard (2007, p. 38), [...] “é praticamente impossível ler e observar ao mesmo tempo. São ações diferentes”.

3 Fundamentos Teóricos

mais difícil de se distinguir os espaços entre palavras.

O último parágrafo demonstra o pior cenário possível para o leitor, espaçamentos totalmente irregulares.

Complementando as questões de legibilidade e leiturabilidade, existe outro fator que também contribui para uma boa experiência de leitura: a familiaridade do leitor com o alfabeto e com a leitura em sí.

A designer de tipos Zuzana Licko, diz (1990 apud GERARD, 2007, p. 43), “Fontes tipográficas não são intrinsecamente legíveis. Porém, é a familiaridade do leitor com elas que as tornam legíveis. [...] Leitores lêem melhor o que lêem mais frequentemente”. Ou seja, além das características técnicas exploradas há séculos por calígrafos, tipógrafos e designers de tipos digitais da atualidade, grande parte do que é legível, é um resultado de convenções, costumes e inclusive memória, entre quem fabrica um produto tipográfico e quem o lê.

As observações de Zuzane não se limitam somente às formas de letras com boa legibilidade. Segundo um artigo publicado por Atichison ainda sobre o tema, (1999 apud GERARD, 2007, p. 73), a leiturabilidade das palavras que lemos com mais frequência, são, consequentemente, mais rapidamente reconhecidas.

Parte desse processo de leitura não é mais de natureza visual, mas um componente abstrato linguístico.

Em adição à frequência de aparição, o contexto também pode fazer com que saltemos palavras, pois conseguimos deduzir seus significados pelo que já lemos ou pelo que já sabemos. Leitores assíduos, podem pular grandes quantidades de palavras. Segundo pesquisa feita por Inhoff & Raynern em 1996, chamada Mindless reading revisited: eye movements during reading, página 945 diz: “Há leitores capazes de pular 15% das palavras (pronomes, verbos e adjetivos) e até 16% de palavras consideradas funcionais tais como artigos indefinidos, preposições e conjunções.

Demonstrando uma média de 20% das palavras de um texto são puladas”. (GERARD, 2007, p. 73).

3 Fundamentos Teóricos 50

Figura 26 Resultado de pesquisa de Constantin sobre o uso de fontes serifadas para texto. Fonte: Typographic Design Patterns And Current Practices (2013 Edition), Smashing Magazine

51

[...] em termos de manchetes, as fontes sem serifa possuem uma leve vantagem sobre as serifadas. No corpo de texto, porém, a tradição ainda é soberana, e 61,5 % dos sites opta pelas fontes serifadas. Embora a maioria dos sites pesquisados use fontes para Web fora do padrão, as fontes mais recorrentes identificadas foram Georgia, Arial, e Chapparal Pro para Manchetes, e Georgia, Arial e Helvetica para o corpo do texto. (LUPTON, 2014, p. 19).

Portanto, levando em consideração a análise feita por Unger e a pesquisa de Constatin, podemos concluir que mesmo com a grande popularidade das fontes sem serifa, ainda permanece uma melhor aceitação de fontes serifadas para textos mais longos. ▪

3 Fundamentos Teóricos

dos leitores, o jornal teve que voltar atrás e trocar novamente sua fonte padrão para textos, dessa vez porém, escolhendo a Swift, uma serifada.

Com isso, logo depois, pôde-se perceber um aumento nas vendas do jornal. Na página anterior há uma comparação entre duas versões do mesmo texto, com o memso número de caracteres por linha, tamanhos de corpo opticamente identicos, mas com a seguinte diferença: a versão de cima está em Frutiger e a de baixo em Swift (UNGER, 2007).

As conclusões de Unger pesam a favor das fontes serifadas. Aparentemente esses tipos de fontes parecem fazer as palavras e linhas mais estáveis e fixas, por tanto, mais fáceis de ler. Já a estrutura das sem serifas, dão uma sensação do texto estar mais solto, fazendo um movimento vertical que interefe na estrutura horizontal do texto.

Levando em consideração que, durante o processo de leitura, nós vemos apenas pequenos trechos com foco. O restante do texto à direita que ainda será lido, aparecerá desfocado na nossa visão periférica. Dessa forma, será mais fácil ler e identificar palavras, cujas letras seguintes ainda em desfoco, tenham serifas. Isso se deve ao fato que fontes serifadas possuem caracteres mais definidos e distintos entre sí, os tornando mais legíveis e consequentemente com melhor leiturabilidade (UNGER, 2007).

Complementando às afirmações de Unger, um estudo de 2013 conduzido por Jan Constantin sobre sites de notícias pelo mundo descobriu que,

4 Resultados da Pesquisa

O

4 Resultados da Pesquisa 53

desenvolvimento de uma familia tipográfica é um processo extenso e bastante detalhado. Entre a fase projetual, até a distribuíção da fonte, existem inúmeras etapas que devemos percorrer para atingir um produto final esteticamente bonito e funcional.

A seguir, será apresentada uma metodologia que percorrerá todas as etapas do desenvolvimento de uma fonte digital, levando em consideração, os aspectos básicos e informações técnicas minimamente necessárias para a conclusão desse tipo de projeto. Neste subcapítulo, porém, será apenas apresentada uma visão geral de todo o processo de criação. Já os capítulos seguintes, serão destinados ao esclarecimento de informações técnicas necessárias para o bom andamento do projeto.

De acordo com o designer de tipos, José Scagline, o fluxo de trabalho para esse tipo de projeto tipográfico, pode ser dividido em quatro etapas: projeto, design, produção e pós-produção. Essas tarefas podem variar de um projeto para outro, mas devem ser processos subsequentes e não concorrentes (SCAGLIONE, 2014).

A primeira fase é projetual, ou seja, envolve o momento da conceituação da familia tipográfica, de sua função e do processo necessário para concluí-la. Essa fase é bastante importante, pois será nela que algumas decisões de desenho (serifa, sem serifa ou mista), forma (numerais desalinhados, transicional, moderna ou geométrica), assim como contraste (translação ou expansão) serão tomadas.

Logo depois, passamos para a fase de design. É nela que ocorre a maior parte do desenho criativo, onde os glifos e os espaços são projetados e a fluidez das curvas é controlada. Aqui serão desenvolvidas as minúsculas, maiúsculas, numerais, sinais monetários, pontuações e não-alfabéticos. Esse conjunto de caracteres, de acordo com Scaglione, é chamado de núcleo do conjunto.

Em seguida, podemos passar para a etapa de produção. É aqui que serão gerados os arquivos Multiplo Master para interpolação ou extrapolação. A tecnologia de Multiplo Master criada pela Adobe é uma ferramenta quase indispensável para o desenvolvimento de familias tipograficas com muitos estilos (SCAGLIONE, 2014).

Segundo Scaglione, 4 Resultados da Pesquisa

7. Âncoras são caracteres formados por um glifo ou mais acentos.

Basicamente, há dois métodos de esboços que se pode utilizar para a criação de uma fonte: o esboço em papel, que será posteriormente digitalizado em programas de criação de fontes, ou, desenvolvidos diretamente em tela.

As técnicas utilizadas para esboços em papel podem vir de diferentes ferramentas de escrita: utilizando-se ferramentas caligráficas (penas chatas ou de ponta), dois lápis unidos por elásticos (que similam o mesmo movimento da pena chata), ou simplesmente um único lápiz.

Ao utilizar ferramentas caligráficas ou alguma que simule seus traços, as formas resultantes das letras nos esboços, podem apresentar resultados distintos. Em The Stroke, Gerrit Noordzij (2009), introduz três tipos de conceitos que diferenciam as letras em função de contraste.

O contraste por translação (aquele produzido por uma pena de ponta quadrada ao variar a trajetória ou direção do traço, sem mudar a posição da pena), o contraste por Figura 27 Exemplos de contrastes por translação (esquerda) e expansão (direita) Fonte: Como criar tipos: do esboço à tela, HENESTROSA et alii, (2014, p. 33)

55

54

alfabético base e 1

Ainda na etapa de produção, os numerais ordinais, sobrescritos, subscritos e versaletes serão adicionados. Além de serem também feitas as verificações de acentos e posicionamento de âncoras7 e espaçamento. Caso a família tipográfica conte com versões itálicas, o mesmo procedimento deve ser tomado.

Apenas após o conjunto de caracteres desejado estar totalmente completo, com todos os estilos desenvolvidos, formas testadas, aprovadas e devidamente espaçadas, pode-se prosseguir com a pós-produção da fonte. Nessa última etapa, serão feitas as interpolações, kerning e

ESBOÇOS EM PAPEL OU TELA

4 Resultados da Pesquisa

Essa tecnologia [...] parte do fato de que as fontes digitais – e os contornos dos glifos propriamente ditos – são números e equações matemáticas. Por conseguente, se o desenho de dois pesos extremos é realizado, é possível obter estilos ou pesos intermediarios por meio de um processo chamado interpolação. Tambem é possível gerar estilos que estão além dos extremos atraves da extrapolação, embora isso geralmente implique uma significativa quantidade adicinal de revisões e correções.

(SCAGLIONE, 2014, p. 63).

hinting. As funções OpenType serão adicionadas, além da configuração do cabeçalho do arquivo, onde serão encontrados o nome das fontes, a identificação, suporte e licenciamento.

Ao dividir cuidadosamente o projeto nessas quatro etapas, o designer deve seguir o fluxo de trabalho estabelecido, uma vez, que esse será o ideal e o mais rápido.

Dessa forma, evita-se o retrabalho e contribui na tomada de desições de design (SCAGLIONE, 2014).

rotação (aquele produzido por pena quadrada quando a trajetória é mantida, mas variando a posição da caneta) e o contraste por expansão (aquele produzido por pena de

Figura 28 Exemplos de esboços de superfície Fonte: Como criar tipos: do esboço à tela, HENESTROSA et alii,

Por fim, os esboços feitos diretamente em tela.

Para esse tipo de abordagem, pula-se o processo manual e se inicia os esboços diretamente em um programa de desenho vetorial. Esse tipo de esboço é recomendado para fontes geométricas ou modulares (MESEGUER, 2014).

Devemos notar que muitas vezes os processos de criação de esboços podem transitar entre as técnicas anteriormente citadas. Mas independentemente da forma escolhida, os resultados desses esboços deverão ser digitalizados e refinados vetorialmente através de programas para criação de fontes ou vetoriais.

(2014, p. 43)

4 Resultados da Pesquisa

CURVAS BÉZIER

Após breve explicação sobre as curvas Bézier no interlúdio histórico, vamos nos aprofundar um pouco mais sobre o uso dessas curvas durante o processo de digitalização dos esboços.

Antes de definirmos como podemos utilizar as curvas Bézier na digitalização de esboços no papel, cabe ressaltar que existem dois tipos de funcionamento das mesmas: as curvas quadráticas (TrueType) e cúbicas (PostScript).

As curvas Bézier quadráticas tem 3 pontos: um de inserção, um de controle e um de fim. Ou seja, elas forçam o usuário a utilizar mais pontos de âncora, tornando a tarefa de um simples desenho de um círuclo mais difícil.

4 Resultados da Pesquisa

ponta fina flexível ao variar a pressão, alterando a largura do traço). Além das técnicas caligráficas, pode-se fazer também esboços de superfície ou de contorno.

(HENESTROSA, et alii, 2014).

Segundo a designer de tipos, Laura Meseguer, (2014, p.

43), o esboço de superfície, [...] “baseia-se no argumento de que a definição das formas é mais importante do que a precisão do contorno, que define uma “fronteira” entre duas áreas: a forma e a contraforma”. Já com relação ao desenho de contorno, Laura entende que “[...] a fluidez das curvas podem ser mais bem controladas do que no esboço de superfície”. (MESEGUER, 2014, p. 44).

Figura 30 Exemplos de curvas Bézier quadráticas Fonte: Scanner Licke.

Imagem adaptada pelo autor.

Figura 29 Exemplo de esboços de contorno

57

56

Fonte Aline Text (Autoria Própria)

Figura 31 Exemplos de curvas Bézier quadráticas (esquerda) e cúbicas (direita) Fonte: Scanner Licke.

Imagem adaptada pelo autor.

Além do mais, por conta da quantidade de pontos necessários, tornam os arquivos mais pesados.

No exemplo abaixo, precisamos de 16 pontos para desenhar um círculo perfeito, 8 pontos de âncora, mais 8 pontos de controle. Já as Curvas Bézier cúbicas, possuem 4 pontos: um de inserção, um de extremidade e duas alças. Os dois pontos de controle por nós, permitem maior liberdarde durante o desenho de uma curva. O resultado final é um arquivo mais leve, pois as curvas cúbicas, possuem menos pontos, menos coordenadas para serem calculadas. (MARTINS, 2014).

Algumas recomendações que Laura faz é posicionar os nós nos pontos de extremidades das curvas, os extremos e usar o menor número possível de pontos, sem deixar de incluir todos os que forem necessários.

A seguir, serão mostrados alguns modelos, que a designer de tipos sugere para se obter bom controle das formas e dos detalhes, assim como consistência no desenho e fidelidade aos esboços.

Figura 32 Quantidade adequada (esquerda e centro) e inadequada de pontos de curva (direita)

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Fonte: Próprio autor

Os pontos de ancoragem podem ser de três tipos: vértice, curva e tangente.

Figura 33 Tipos de pontos

Na curva (on-curve, que passam através das curvas), também chamados de pontos de ancoragem ou nós, e “fora da curva” (off-curve), também chamados de BCP (Bezier Control Point), pontos de controle ou alças, que são invisíveis e que influenciam o progresso da curva mas não fazem parte dela. (MESEGUER, 2014, p. 65).

de ancoragem

Vértice

Curva

Tangente

Fonte: Próprio autor

Para desenhar um contorno sem curvas, utilizamos pontos de vértice e os posicionamos nas extremidades do contorno, seja ele aberto ou fechado.

Figura 34 Retas e pontos de vértice Fonte: Próprio autor

59

58

Após essa breve análise das diferenças dos tipos de curvas Bézier, podemos concluir que é vantajoso utilizar as curvas cúbicas para o desenho das letras. Dessa forma, podemos agora voltar nosso olhar para as técnicas mais utilizadas para a digitalização de esboços.

Segundo a designer de tipos Laura Meseguer, as curvas cúbicas Bézier, têm dois tipos de pontos:

Para desenhar uma curva regular adequadamente, é preciso de pelo menos dois pontos de controle de vértice em cada segmento da curva.

Em primeiro lugar, a representividade da letra em termos do reconhecimento do alfabeto, a taxa de repetição nos idiomas com maior quantidade de falantes e, por que não, do gosto pessoal do designer. Em segundo lugar, a seleção de caracteres que forneçam maior quantidade de dados sobre as proporções, estilo e objetivos da fonte. Por último, a determinação de um conjunto de glifos que não sejam derivados de outros. (SCAGLIONE, 2014, p. 59).

Figura 35 Segmento de curvas Fonte: Próprio autor

4 Resultados da Pesquisa

Figura 36 se conectam com e sem suavização Próprio autor

4 Resultados da Pesquisa

Ao conectar duas curvas, gerando um vértice entre elas, é recomendado intercalar um ponto de vértice. Caso se queira fazê-lo de forma mais fluída, criamos um ponto de curva. É possível garantir uma transição suave entre um segmento de reta e uma curva, posicionando um ponto de tangência entre eles.

Curvas que

Notar que esse recurso está disponível apenas em softwares específicos para o desenho de tipos como Ghyphs e FontLab. Já em programas como Illustrator, apesar de ser possível criar um ponto de tangência, este pode apresentar um resultado não muito fluido (MESEGUER, 2014).

ORDEM DE DESENHO DAS LETRAS

A discussão sobre que letra deve ser desenhada primeiro é uma das mais antigas e recorrentes. O recomendado segundo Scaglione, seria começar com uma quantidade

Figura 37 Afinidade morfológica das letras Fonte: Como criar tipos: do esboço à tela, HENESTROSA et alii, (2014, p. 47)

61

60

de letras que tornem possível a composição de alguns parágrafos de textos e assim, avaliar o desempenho das formas. A seleção dos caracteres a serem desenhados primeiro, conforme o autor, está baseada em três critérios:

Existem, porém, alguns ajustes visuais que não são sistematizados, ou seja, aqueles que respondem a equilíbrios de peso e que se medem com o olho. Entre eles o b / o e / n r / v w / v + j = y (MESEGUER, 2014).

Figura 40 Sequência para caixa alta (Próprio autor)

Figura 38 Grupos morfológicos a partir da palavra “novia” e a relação entre terminais

Figura 39 Ajustes visuais não sistematizados

Para a construção de letras de caixa alta, costuma-se iniciar com uma sequência de caracteres que se assemelham a formas geométricas básicas (H, O, V) e que servem para definir as proporções.

Após finalizados os desenhos das caixas altas e baixas, ainda é preciso criar os sinais complementares. São eles os sinais diacríticos e de pontuação.

Os sinais diacríticos dão valor especial aos outros sinais, no caso dos sinais tipográficos, os convertem em outros caracteres. São sinais diacríticos: os acentos agudo e grave ( ` ´ ), o trema ( ˜ ) , o til ( ˜ ), a cedilha ( ¸ ), o circunflexo invertido ( ˇ ), o breve ( ˘ ), o macro ( ¯ ), o anel ( ˚ ), o ponto superior ( ˙ ), o acento circunflexo ( ˆ ) e o acento agudo duplo ( ˝ ). Já os sinais de pontuação são aqueles que indicam pausas, marcam frases e parágrafos em um texto, auxiliando a compreensão do mesmo. São sinais de pontuação: o ponto ( . ), a víirgula ( , ), os dois pontos ( : ), o ponto e vírgula ( ; ), as aspas ( « » „“ ), os parênteses ( () ), os colchetes e chaves ( [] {} ), os pontos de interrogação ( ¿ ? ), os ponto de exclamação ( ¡ ! ), as reticências ( … ) e os diferentes tipos de traços ( - – — ). Além da arroba ( @ ), o asterisco ( * ) e os sinais monetários (€ ¢ £ ¥ ƒ).

63

62

Fonte: Próprio autor

De acordo com a semelhança morfológica das letras, elas podem ser agrupadas com outras, ou seja, ao projetar um único caractere de cada grupo, é possível obter as outras letras restantes do alfabeto, com menos investimento de tempo e esforço.

Conforme figura acima, podemos observar que através do desenho das serifas da letra n, podemos derivar as letras m, h, r e até u. Da mesma forma que as letras com formas arredondadas, são derivações da letra o. As letras v e i, funcionam da mesma forma. Com excessão apenas das letras a, s e g, consideradas especiais, pois possuem desenhos próprios e não derivam diretamente de nenhuma outra letra do alfabeto.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Fonte: Próprio autor

Diante da complexidade da criação de um alfabeto, é imprescindível testes e avaliar o trabalho realizado conforme ele for progredindo. Para tanto, utiliza-se as chamadas “palavras de amostragem”, que são aquelas que contêm caracteres-chave (ou determinantes), que definem o aspecto formal do resto do alfabeto (MESEGUER, 2014).

circulares e triangulares, tonando-as ligeiramente mais altas, assim quando comparadas com as formas quadradas, pareçam ter a mesma altura.

Um traço horizontal posicionado na metade da altura de um traço vertical, parecerá mais abaixo. Para que pareçam estar no meio, o traço vertical deve ser levado um pouco para cima.

Figura 43 Divisão horizontal geométrica versus

Figura 41

ajustes ópticos

Exemplos de palavras

Geometricamente dividido

de amostragem

Com ajuste óptico

(Autoria própria)

AJUSTES ÓPTICOS

Ao contrário das ideias erroneamente preconcebidas que muitos designers iniciantes possuem, as letras não devem responder a uma rígida geometrização, a exemplo dos esforços renascentistas de Pacioli, Tagliente, Dürer.

De acordo com Cristóbal Henestrosa (2014, p. 48), [...] “Na construção dos caracteres há uma grande quantidade de compensações ópticas que o designer de tipos deve conhecer, ou, pelo menos, saber identificar”. A seguir, veja as mais comuns apontadas Henestrosa.

Se caractéres com formas circulares, triangulares e ou quadradas tiverem a mesma altura metemática, eles se parecerão menores que os de forma quadrada. Por isso, é necessário que se faça um ajuste no desenhos das formas

Mesma altura

Do mesmo modo, deve-se levar em consideração o equilíbrio entre os caracteres. Se fizermos ajustes no E, esses mesmo ajustes devem ser parecidos para o F. O bojo do B é menor do que o do R, e este por sua vez, é menor do que o do P (MESEGUER, 2014).

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Fonte: Próprio autor

Figura 44 Ajustes ópticos que visam o equilíbrio entre os caracteres Fonte: Autoria própria

Outro ajuste necessário são nas metades superiores que devem ser ligeiramente mais estreitas, caso contrário, parecerão maiores do que as metades inferiores.

Altura compensada

Figura 45 Ajustes óticos de

Figura 42

larguras entre metades

Compensação óptica

superiores e inferiores

Autoria própria

Áreas de overshoot

Fonte: Autoria própria

65

64

e overshoot Fonte:

Figura 46 Ajustes ópticos que visam o equilíbrio entre os caracteres (Autoria própria)

Caso dois traços tenham a mesma espessura, o o que é horizontal parecerá mais grosso do que o vertical.

Por isso, deve-se deixar os traços horizontais mais finos.

O mesmo ajuste é necessário para traços diagonais (HENESTROSA, 2014).

Mesma espessura

Compensação óptica

100%

95%

90%

4 Resultados da Pesquisa

Altura-x

Figura 48 Compensações ópticas em conexões entre reta e curva e diagonais (Autoria própria)

Figura 49 Compensação de altura entre regular e bold (Autoria própria)

4 Resultados da Pesquisa

A espessura dos traços curvos precisa ser um pouco maior do que a dos traços retos, do contrario estes parecerão mais finos.

Em uma mesma família tipográfica e com a mesma altura, as letras em negrito, vão aparentar serem menores do que as regulares.

Dessa forma, é recomendável também, aumentar um pouco a altura-x dos caracteres mais pesados, compensando assim, o efeito de encolhimento (MESEGUER, 2014).

CONTRAFORMA, ESPAÇAMENTO E KERNING

Figura 47 Diferenças de espessuras entre curvas e retas

Os pontos onde linhas retas ou diagonais se encontram costumam resultar em áreas mais escuras e de maior concentração de massa. Para evitar esse efeito, deve-se reduzir a espessura na junção.

67

66

(Autoria própria)

Segundo a designer e tipógrafa Beatrice Warde (1955 apud HENESTROSA, 2014, p. 83), a boa tipografia se assemelha a uma taça de cristal transparente, que revela e ajuda a degustar o vinho servido nela: não pretende chamar atenção para si, como faria uma ostentosa taça de ouro maciço, mas sim honrar o seu conteúdo, ou seja, taças e tipografia, devem ser invisíveis.

O que ocorre é que o tipo possui a parte do desenho (visível) e outra invisível, que é composta por contraforma (counterspace), espaçamento (spacing) e compensação (kerning). As contraformas são os espaços brancos no

interior e ao redor das letras, ao contrário da parte preta visível do tipo. A relação entre as contraformas devem ser proporcionalmente similares, de modo a criar ritmo, melhorar a legibilidade, especialmente, em corpos pequenos (MESEGUER, 2014).

Figura 50 Exemplos de contraformas de do tipo. Fonte: The Stroke, theory of writing, NOORDZIJ, (2009, p. 13)

Quanto mais pesada for a letra, ou seja, com uma maior parte de seu desenho visível, ela terá consequentemente uma menor contraforma e por isso deverá ter um espaçamento menor, a fim de se manter o ritmo na composição das palavras (NOORDZIJ, 2009).

Tipografia Tipografia

Figura 52 Comparação entre uma palavra bem (abaixo) e mal espaçada (acima) Fonte: Autoria própria

Conforme exemplo da figura abaixo, percebemos que na palavra “cervantes”, as letras R, V aparentam estar separadas, mesmo depois de terem sido espaçadas corretamente. Esse tipo de problema só é possível ser corrigido através do kerning. Para isso, foram aplicados valores negativos de espaçamento, aqui no caso -50 (à esquerda) e -80 (à direita), para opticamente corrigir a sensação de separação das três letras problemáticas. O cuidado de atribuir a cada desenho o espaço que lhe convém é fundamental para que a tipografia cumpra seu objetivo.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

acordo com o peso

O kerning, é justamente essa série inevitável de ajustes a serem feitos entre pares de caracteres considerados problemáticos. (HENESTROSA, 2014).

Figura 53 Exemplo de kerning Fonte: Como criar tipos: do esboço à tela, HENESTROSA, et alii, (2014, p. 83)

Figura 51 Exemplos de espaçamentos de acordo com o peso do tipo Fonte: The Stroke, theory of writing, NOORDZIJ,

Por isso, uma fonte com problema de espaçamento não pode ser corrigida apenas através do kerning; assim como um problema de kerning não pode ser resolvido através da manipulação do espaçamento.

O espaçamento deve sempre vir antes dos ajustes de kerning (HENESTROSA, 2014).

69

68

(2009, p. 13). Imagem adaptada pelo autor

O espaçamento é a definição dos espaços laterais (proteções laterais ou sidebearings) que cada caractere tem à esquerda e à direita. Ele determina as distâncias genéricas entre caracteres. Porém, existem combinações problemáticas que quase nunca se resolvem, apenas com o espaçamento e por isso, recorremos ao kerning.

Quando se está produzindo uma larga família tipográfica com vários pesos diferentes, um certo grau de automação, além de desejável (como uma forma de evitar um trabalho tedioso), torna-se inclusive necessário. Um método comum de se fazer isso é gerando pesos intermediários com dois valores básicos, através dos quais, serão geradas variações intermediárias originárias desses dois valores básicos. Posteriormente é aconselhável, um refinamento manual em cada letra derivada dessa interpolação.

No início do ano de 1987, enquanto desenvolvia uma versão intermediária de uma fonte já existente, Luc(as) de Groot percebeu que os pesos intermediários corrigidos opticamente, representavam uma curva côncava que produzia valores menores do que aqueles resultantes de uma interpolação mecânica em linha reta (GROOT, 2008).

Após testes, foi criada uma fórmula matemática que define o valor óptico para qualquer peso intermediário.

Interpolação b = √ac

a = 40u b = 70u

b = √40.70 b = √2800 b = 52,92

Extrapolação c = b2/a a = 53u b = 70u

astes verticais

tenha 70, então o peso Semibold não devería ser 55 unidades exadas, porém levemente menor, para que se tenha a impressão óptica de no meio.

da fórmula de Groot (Autoria própria)

é uma curva de forma semelhante a um S, constituído por dois arcos curvados em sentidos opostos

Em outras palavras, Luc(as) concluiu que: If the verticals of the Regular weight have a value of 40 units and those of the Bold weight 70, then the Semibold verticals should not be 55 units wide but slightly less, in order to give the optical impression of being exactly “in the middle7” . (GROOT, Luc(as). Interpolation Theory.

Disponível em: <http://www.lucasfonts.com/about/interpolation-theory/>. Acesso em 15 abr. 2017).

Vide o exemplo acima, se considerarmos a = 40 unidades e c = 70u e aplicarmos a fórmula para interpolação, teremos o valor óptico aproximado de b= 53u. Ou seja, um valor inferior ao que se teria, caso tirássemos a média aritmética dos valores (40+70 = 110 e 110 / 2= 55u).

Além da fórmula criada por Luc(as) de Groot, o designer de tipos Pablo Impallari, criou sua própria fórmula, a qual se basea nas curvas de Ogee8 e na teoria de Groot.

Segundo Impallari (2010), “[...] My formula [...] seems to be the most useful pattern to distribute weight across a font family. Especially in large families with many weights [...], or where the Black-Thin difference is lengthy9”.

sejam paralelas. É uma espécie de curva em forma de "S".

9. Minha fórmula aparenta ter um padrão mais útil de distribuíção dos pesos através das familias da fonte.

Especialmente em famílias com muitas longas diferenças entre o black e thin (tradução do autor).

71

70

estar exatamente

Exemplos de aplicação

suas extremidades

7. Caso o peso das

correspondente bold

segundo Groot

fazendo com que

(Lucas Fonts)

40 unidades e sua

extrapolação

8. Uma curva ogiva

c = 702/53 c = 4900/53 c = 92,45

interpolação

tiveremum peso de

da interpolação e

Figura 56

b = √ac

de valores na

Fórmula para aplicação

Segundo a fórmula de Groot, na interpolação, a letra a representa o peso mais leve, c representa o mais pesado e b refere-se ao valor óptico intermediário. No caso da extrapolação, esses valores se mantém, porém, em vez de buscarmos encontrar o valor intermediário, procuramos os valores extremos, ou seja, os correspondentes às letras a e c (GROOT, 2008).

Figura 54 porcentagem

a = b2/c c = b2/a

Figura 55

(Autoria própria)

Interpolação

Exemplo da

Extrapolação

4 Resultados da Pesquisa

4 Resultados da Pesquisa

INTERPOLAÇÃO E EXTRAPOLAÇÃO

Importante notar também que a interpolação não se limita apenas ao peso da fonte numa linha horizontal, mas também possibilita mudanças nas estruturas fundamentais de seus glifos, como serifas, ou a falta delas, contraste (expansão ou translação), além de proporções dos caracteres. A exemplo do cubo de Noordzij, que mostra a interpolação entre múltiplos polos e eixos.

Segundo o diagrama ao lado do cubo, o eixo x define o aumento de contraste e o eixo y a sua redução, enquanto o eixo z representa o contraste através da translação ou da expansão (NOORDZIJ, 2008).

HINTING

4 Resultados da Pesquisa

Figura 57 para o cubo de Noordzij. Fonte: The Stroke (NORRDZIJ, 2008, p. 79)

renderização, mapeiam matematicamente como as letras serão projetadas na tela.

Figura 58 Versões com hinting da fonte Fedra Sans Screen em diferentes medidas de pixels por eme11. Fonte: BILAK, Peter. Font Hinting. (2017)

Mesmo após mais de 20 anos da revolução digital, o hinting permanece ainda muito relevante nos dias atuais, segundo o designer de tipos Peter Bilak,

11. Eme: Em mensuração linear, é uma distância igual ao tamanho do tipo.

73

Podemos concluir, que o processo de interpolação pode ser feito de diversas formas. Desenhando-se manualmente cada peso intermediário da família, o que não é muito recomendado, haja visto o tempo gasto nesse processo.

Outra opção é a automação, utilizando softwares que calculam automaticamente os pesos intermediários das masters já existentes.

Apesar de gerar rapidamente os novos pesos, para esse processo automatizado, se faz necessários ajustes ópticos em cada glifo resultante. Ou por fim, um processo semi-automatizado, tomando como base, valores retirados de fórmulas como a de Luc(as) de Groot e Impallari.

10. Os softwares de

4 Resultados da Pesquisa

Hinting, ou otimização para telas, é o processo pelo qual arquivos de fontes digitais são ajustados manualmente para uma máxima leiturabilidade em monitores. Existem diferentes tipos de hinting, para cada software de renderização10 utilizados em sistemas operacionais como Windows (ClearType e DirectWrite) ou Mac OS (Quartz).

Durante o processo, são feitos ajustes finos pixel por pixel na renderização da fonte, podendo entre outras possibilidades, controlar as alturas e larguras individualmente de cada letra, a quantidade de espaço em branco em volta dos caracteres, o ângulo das itálicas para melhor encaixe no gride de pixels (BILAK, 2017).

Diagrama dos eixos

72

A interpolação torna uma família de fontes mais flexível e comercial, sendo além de necessário, um ótimo atrativo comercial para quem desenvolve a fonte. Embora a geração de fontes com interpolação padrão nos dê uma grande flexibilidade, os arquivos de webfont ainda estão estáticos em seu ambiente de navegador. Devido a isso, precisamos de mais para trabalhar com a capacidade de resposta da web (NOORDZIJ, 2008).

12. O problema é que as fontes modernas típicas não são projetadas principalmente para a resolução de 72-96 dpi de telas de computador, mas para a resolução muito mais alta de 1.200 dpi da mídia de impressão. As letras são projetadas e armazenadas como contornos, linhas e curvas

The problem is that typical modern fonts are not designed primarily for the 72–96 dpi resolution of computer screens, but for the much higher 1,200+ dpi resolution of print media. The letterforms are designed and stored as outlines, mathematically perfect lines and curves which look great at high resolutions, but can be distorted or even illegible when converted into groups of pixels, the on-or-off dots that make up a computer’s display12.

(BILAK, Font Hinting. Disponível em <https://www. typotheque.com/articles/ hinting >. Acesso em: 23. mar.

2017).

matematicamente perfeitas que parecem ótimas em altas resoluções, mas podem

de pixels, os pontos on-e-off que compôem o display de um computador (tradução do autor).

FORMATOS DE ARQUIVOS DE FONTES DIGITAIS

Antes de entendermos as diferenças entre TrueType e OpenType, é oportuno falar um pouco sobre a tecnologia PostScript, a qual serviu de base para o desenvolvimento dos dois formatos mencionados anteriormente e hoje em dia ainda muito utilizados no meio digital.

PostScript ou PostScript Type 1 é uma linguagem de programação vetorial especializada para visualização de informações, originalmente criada para impressão e posteriormente modificada para o uso com monitores.

A linguagem fornece comandos específicos para o desenho de letras através das curvas Bézier, incluindo comandos de traçado e formas de representação de imagens. Foi desenvolvida de 1982 a 1984 pela Adobe por John Warnock, em parceria com Charles Geschke, Doug Brotz, Ed Taft e Bill Paxton, tendo como inspiração uma linguagem desenvolvida na Xerox, a InterPress (ADOBE, 1999).

75

74

convertidas em grupos

4 Resultados da Pesquisa

4 Resultados da Pesquisa

ser distorcidas ou até ilegíveis quando

Por tanto, podemos concluir que o hinting, apesar dos avanços tecnológicos ainda é uma ferramenta importante para uma fonte que tem como finalidade o meio digital, uma vez que ainda há no mercado diferentes tipos de softwares de renderização de fontes encontrados em diferentes navegadores e sistemas operacionais.

Já o formato TrueType foi desenvolvido pela Apple para competir com o PostScript da Adobe. Ao contrário deste último, os glifos são desenhados com curvas quadráticas no lugar das curvas cúbicas e oferece melhores recursos de hinting (HENESTROSA, et alii, p. 148).

Seu desenvolvimento foi o fruto da parceria entre Apple e Microsoft no final dos anos 80. Desde então o formato TrueType se tornou o formato de fonte mais comum nos sistemas operacionais clássicos da Apple (Mac OS) e Windows. As primeiras fontes TrueType lançadas foram as famílias Times Roman, Helvetica e Courier. A fim de garantir uma ampla adoção, a Apple licenciou TrueType gratuitamente para a Microsoft. Em 1991 a empresa de Bill Gates firmou parceria com a Monotype, para desenvolver fontes padrão para seu sistema operacional, entre elas: Times New Roman (compatível com Times Roman), Arial (Compatível com Helvetica) e Courier New (Compatível com Courier). Estas fontes continuam sendo as fontes padrão do Windows até hoje (MICROSOFT, 2017).

Notar que “compatível” possui dois significados: primeiro, que as fontes comparadas possuem similaridades no desenho e segundo, possuem as mesmas larguras de caracteres. Possibilitando documentos serem editados sem que o texto corra ou precise ser reformatado.

A principal vantagem do TrueType foi oferecer aos desenvolvedores de fontes um alto grau de controle e precisão, em como suas fontes seriam exibidas, pixel por pixel de tamanhos pequenos médios e até maiores.

(MICROSOFT, 2017).

Mais tarde, surgiu o formato vetorial de fontes tipográficas OpenType que é essencialmente uma extensão do TrueType, mas que permite maior flexibilidade e o armazenamento de curvas de Bézier cúbicas ou quadráticas. Pode ter tanto a extensão TTF (True Type Font) quanto OTF (Open Type Font). (HENESTROSA, et alii, p.148).

Suas origens vieram da tentativa mau sucedida da Microsoft em licenciar a então nova tecnologia avançada

☞ Codificação Unicode que dá suporte a idiomas árabes, chineses e indianos; ☞ Oferece opções para ligaduras e substituição automática para versaletes; ☞ Opções de posicionamento das letras, tais como kerning e leading; ☞ Numerais de texto (old style) e alinhados (lining); ☞ Símbolos matemáticos e fracionários; ☞ Suporte de até 65.536 glifos por arquivo; Após comparação entre os dois formatos de fontes disponíveis, torna-se evidente as vantagens que o formato OpenType traz, em relação ao TrueType. Dessa forma, o autor deste projeto, definiu que o produto do seu trabalho será uma fonte tipográfica com recursos OpenType.

O objetivo deste levantamento é verificar através das fontes selecionadas, quais as características mais desejáveis que essas fontes devem ter para desempenharem uma boa funcionalidade e conforto de leitura em uma composição de textos longos.

No livro, Tipos na tela, Ellen Lupton junto com o designer Christopher Clark, examinaram a forma como cada fonte selecionada é reproduzida em diferentes sistemas

Legibilidade: Os caracteres são bem distintos entre sí?

Fontes altamente modulares ou geométricas podem ser menos legíveis do que aquelas com formas mais orgânicas e individualizadas. Flexibilidade: A fonte funciona bem em diferentes tamanhos e pesos? Ela funcionaria bem tanto para manchetes quanto para textos? Uma fonte versátil é capaz de solucionar muitos tipos de problemas.

Elegância: Ela te levaria pra jantar em um restaurante de frutos do mar? Você compratia um anel de diamentes para ela? Leitura: A leitura da fonte é confortável no corpo do texto? A fonte se presta à leitura e à escrita de textos longos? Carisma: A fonte é memorável? Seus detalhes são únicos? Ela possui uma letra q que se destaca ou numerais impressionantes? Sua aparência fica incrível quando ela é ampliada? Adaptabilidade: Ela é otimizada para tela? O hinting é bem feito? Se uma fonte só tem uma aparência boa em um Mac; sua nota de adaptibilidade é baixa. (LUPTON, 2014, p. 20).

Após os esclarecimentos dos requisitos de avaliação, Lupton e Clark, apresentam uma seleção de 18 fontes (com e sem serifas) e analisam seus pontos fortes e fracos.

Para este trabalho, porém, o autor separou desta lista apenas as fontes serifadas (vide explicações no capítulo Serifas e Sem Serifas). Definindo portanto um total de 11 fontes selecionadas.

A primeira da lista é a Adelle, criada inicialmente para projetos editoriais, mas que floresceu na web. Ela possui boa legibilidade por conta das formas abertas e quadradas, junto com boa altura-x (LUPTON, 2014).

77

76

LEVANTAMENTO DE FONTES EM TELAS

operacionais e navegadores, classificaram cada uma delas de acordo com sua visibilidade, legibilidade, flexibilidade, carisma, elegância e adaptabilidade.

Além de incluirem também algumas observações históricas e estilísticas. (LUPTON, 2014). A seguir explicações de cada requisito avaliado por Lupton e Clark.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

de controle e edição de fontes chamado GX Typography da Apple. Como resposta, a Microsoft iniciou o desenvolvimento de uma tecnologia própria, chamada “TrueType Open”. Em 1996, a Adobe fecha então uma parceria com a Microsoft, adicionando ao projeto a sua tecnologia de fontes PostScript Type 1.

O nome OpenType surgiu por ter sido o resultado da combinação das tecnologias das duas empresas (Adobe e Microsoft). As principais características do formato OpenType são (MICROSOFT, 2017):

tela. Apesar das semelhanças com a Times New Roman, ela possui altura-x e contraformas generosas. Por ser uma fonte de sistema, é uma das mais utilizadas na web, por sua praticidade. Teve um processo bastante meticuloso de hinting, porém em tamanhos menores, não apresenta uma grande personalidade. (LUPTON, 2014).

Figura 59 Adelle, José Scaglione e Veronika Burian, 2009, Typetogether Fonte: (Tipos em Telas, LUPTON, 2014, p. 22).

Imagem adaptada pelo autor

A Chaparral, desenhada por Carol Twombly para a Adobe, tem serifas quadradas e proporções suaves que remetem às famosas fontes romanas. Apesar da semalhança, nesse sentido, com à Adelle e Meta Serif, ela vem monida de detalhes mais suaves e uma variação de contraste maior (LUPTON, 2014).

Figura 62 Georgia, Matthew Carter, 1996, Microsoft Fonte: (Tipos em Telas, LUPTON, 2014, p. 27).

Imagem adaptada

4 Resultados da Pesquisa

4 Resultados da Pesquisa

pelo autor

Figura 60 Chaparral, Carol Twombly, 1997, Adobe Fonte: (Tipos em Telas, LUPTON, 2014, p. 23).

Imagem adaptada pelo autor

A Fedra Serif criada por Peter Bil’ak possuí uma vasta família, altura-x generosa e traços de baixo contraste, além de ter sido submetida a um processo minuncioso de hinting o que a faz bastante adequada para textos longos em tela (LUPTON, 2014).

A FF Meta Serif, foi criada com o intuito de complementar a já consagrada família de Erik Spiekermann. ótima altura-x, largura um pouco menor que as fontes selecionadas anterirmente, e junções suaves de suas serifas, são complementadas com um excelente hinting, fazem a FF Meta Serif muito popular na web (LUPTON, 2014).

Figura 63 FF Meta Serif, Erik Spiekermann, Christian Schwartz e Kris Sowersby, 2007, FontFont. Fonte: (Tipos em Telas, LUPTON, 2014, p. 30).

Figura 61

Imagem adaptada

Fedra Serif, Peter Bil’ak,

pelo autor

2003, Typotheque Fonte: (Tipos em Telas, LUPTON, 2014, p. 26).

Imagem adaptada

A Georgia, desenvolvida por Matthew Carter em 1996, especialmente encomendada pela Microsoft para exibição na

A robusta Skolar do designer de tipos David Brezina tem serifas em formas de trapézios conta com maiúsculas mais baixas que as ascendentes, dando uma leveza geral no seu peso. Baixo contraste e contraformas generozas contribuem para uma boa leiturabilidade (LUPTON, 2014).

79

78

pelo autor

Figura 64 Skolar, David Brezina, 2008, Rosetta. Fonte: (Tipos em Telas, LUPTON, 2014, p. 34).

Imagem adaptada pelo autor

Para a Tisa, Miklavcic buscou uma abordagem nova ao gênero serifa quadrada, as desenhando de forma mais leve e assimétrica, além de adicionar um eixo mais oblíquo, remetando à tradição humanista. (LUPTON, 2014).

A Garibaldi, fonte brasileira criada por Henrique Beier, selecionada pela sexta bienal de tipos latinos, apresenta um caráter forte com bastante carísma. Seu eixo de 20° remete às tipografias humanistas, porém com uma roupagem mais moderna de serifas com arremates geométricos. Em contrapartida, é a fonte com menor altura-x e consequentemente contraformas menores. Mesmo assim, possuí ótima legibilidade e boa leitura.

Figura 67 Garibaldi, Henrique Beier, 2015, Harbor Type. Fonte: Imagem

Figura 65

adaptada pelo próprio autor

(Tipos em Telas, LUPTON, 2014, p. 35).

Imagem adaptada pelo autor

A fim de complementar a seleção acima, o autor desse trabalho traz a seguir, sua lista de fontes selecionadas.

Para tanto, foram levados em consideração os mesmos requisitos adotados por Lupton e Clark.

A primeira fonte da lista é a Bookerly, desenvolvida pela Dalton Maag exclusivamente para os leitores digitais Kindle da Amazon. Com baixo contraste e serifas de cantos arredondados e ótima altura-x, a Bookerly oferece para o usuário do Kindle excelente leiturabilidade e conforto durante a leitura de livros.

A Malabar é o resultado de um projeto da Linotype chamado eText, cuja intenção é redesenhar e adaptar fontes já lançadas pela foundry, porém totalmente adaptadas para leitura em telas. Para tanto, sua altura-x foi aumentada, a fim de encaixar melhor dentro do gride de pixels. Foi submetida também a um processo de hinting minuncioso.

Suas serifas tem terminações mais racionalistas e apesar de oferecer um contraste baixo, possui bom carisma.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Tisa, Mitja Miklavcic, 2010, Font Font. Fonte:

Figura 68 Malabar eText, Dan Reynolds, 2011, Linotype. Fonte: Imagem adaptada pelo próprio autor

Figura 66 Bookerly, Dalton Maag, 2007, Amazon Fonte: Imagem próprio autor

81

80

adaptada pelo

Finalizando a seleção das fontes selecionadas, a Tuna, da Ligature Inc, é a mais recente fonte desta lista. Possui o diferencial de, antes mesmo de ser submetida ao hinting, ter sido desenhada com ângulos específicos os quais são mais facilmente exibidos e renderezados no grid de pixels.

Isso faz com que Tuna tenha uma excepcional exibição em telas. Apenas de pouco carisma e elegância, tem ótima legibilidade entre seus caracteres.

Figura 69 Tuna, Felix Braden, Alex Rütten, 2017, Ligature Inc Fonte: Imagem adaptada pelo próprio autor

Após o levantamento feito no capitulo anterior, foi possível apontar em cada fonte selecionada, os seus pontos fortes e fracos. Além de definir também, quais características que mais influem na experiência de leitura e desempenho na exibição em telas.

O intuito desde capítulo, porém, é transcorrer uma análise mais detalhada de duas das fontes selecionadas pelo autor deste trabalho, as famílias Bookerly e Tuna.

Adotando como parâmetro, os seus desempenhos na função de fonte para composição de textos no meio digital.

Visando um melhor entendimento de suas características, foram elegidos tópicos que serão, em seguida, analisados mais profundamente nas duas fontes selecionadas.

Estes são:

Dando início a primeira análise, a fonte Bookerly, desenvolvida pela Dalton Maag exclusivamente para os aparelhos de leitura digital Kindle da Amazon. Lançada em agosto de 2015 como substituta da fonte Caecilia, padrão dos dispositivos da Amazon, se tornou a primeira fonte desenvolvida exclusivamente para um e-reader.

Sua principal função era melhorar a experiência do leitor de livros digitais, diminuindo o máximo possível o cansaço durante a leitura por longos períodos, aumento do ritmo de leitura, oferecendo uma mancha de texto mais concisa, além de trazer melhoramentos no espaçamento e justificação dos textos.

Por ser um projeto customizado bastante específico, a Bookerly oferece uma família tipográfica enxuta, porém, muito funcional. Com versões regular e bold e suas respectivas versões itálicas.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

ESTUDO DE CASOS

☞T ipo de eixo adotado: humanista, racionalista ou transicional; ☞Q uantidade de idiomas suportados; ☞P rocesso de hinting utilizado; ☞E spécimes e exemplo da fonte em uso;

Figura 70 Família Bookerly nas suas versões Regular, bold, e respectivas itálicas . Fonte:

☞H istórico por traz da criação da fonte e quem a desenvolveu; ☞ Briefing, objetivos e requisitos para o projeto; ☞ Extensão da família tipográfica e suas variações; ☞ Funções OpenType disponíveis, tais como ligaturas, versaletes etc; ☞ Altura-x, e sua relação com as ascendentes e descendentes; ☞ Tipo de serifa e terminações;

As funcionalidades OpenType da Bookerly também são enxutas, possuindo suporte para letras capitulares e ligaturas básicas, tais como fi, fl.

Figura 71 Ligaturas da Bookerly Fonte: Amazon (2017).

Imagem adaptada pelo próprio autor.

83

82

Autoria própria

Se observarmos, ambas possuem eixo racionalista.

Figura 74 Eixo racionalista na Bookerly e Caecillia

Figura 72 Capitular da Bookerly Fonte: Amazon (2017)

Nos aspectos técnicos a Bookerly, comparada com a Caecilia, apresenta uma altura-x bastante semelhante, com ascendentes e descendentes relativamente curtas, contribuindo para um bom entrelinhamento e rimo de leitura.

Suas serifas, porém, possui formas mais arredondadas do que as expressivas egípcias da sua antecessora, dando à Bookerly um ar mais amigável e caligráfico, perceptivo nas caldas do R e k, assim como na espora da letra a.

Figura 73 Características e diferênças entre Bookerly e Caecillia própria

85

84

Fonte: Autoria

Já com relação à gama de idiomas, a Bookerly oferece praticamente 100% de suporte para todos os alfabetos latinos, cirílico e grego. Não possuindo, porém, versões em chinês, koreano, hebraico ou japonês.

Um dos pontos mais fortes apresentados pela Bookerly, é justamente o processo de hinting manual metódico e detalhado através do qual a fonte passou. O hinting feito pelo engenheiro de fontes, Vincent Connare, faz com que a exibição dela, mesmo em tamanhos de corpo pequeno, seja excelente e muito nítida.

A segunda fonte que será analisada, é o resultado de um trabalho de 3 anos de dois designers de tipos alemães, Felix Braden e Alex Rütten. A Tuna, teve seu lançamento oficial em 2017. Segundo seus criadores, trata-se de uma de uma fonte contemporânea para leitura de textos, que contempla o charme caligráfico de uma pena chata, com a otimização para dispositivos digitais. Desde do início de sua concepção, o objetivo era de desenvolver uma fonte com ótima legibilidade, consistência, estabilidade, para composição de textos em telas.

A Tuna conta com uma extensa família, do peso light, ao heavy, passando pelos pesos intermediários, normal, medium e bold, além de suas respectivas itálicas.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Fonte: Autoria própria

Figura 75 Família Tuna Fonte: Ligature-Inc. Imagem adaptada pelo autor.

O processo de interpolação foi baseado na teoria de Luc(as) de Groot, conforme explicado no capítulo Interpolação. Com apenas algumas adaptações nos formatos extremos, o light e o heavy.

4 Resultados da Pesquisa

Figura 76

Ligaturas

Numerais desalinhados

Versaletes

fl fi

$0123456789

Small

fl fi

$0123456789

SMALL

Sobrescrito

Números Fracionários

Subscrito

Note5

C2H6O

13/4 cups

Note5

C2H6O

13/4 cups

Opções OpenType disponíveis na Tuna Fonte: Ligature-Inc. Imagem adaptada

Ao observarmos a fonte mais de perto, podemos verificar praticamente a ausência de contraste entre as hastes horizontais e verticais. Seus arrebates e curvaturas retângulares, lembram mais a forma de um retângulo com cantos arredondados, ao em vez de uma curva normal. Suas serifas são avantagadas e com pequenas diferenças

Figura 77

Os idiomas suportados pela a Tuna são apenas os de origem latina, não tendo versões em outros alfabetos como o russo, grego, chinês ou árabe.

Um dos principais diferencias da Tuna, esta ligado ao processo de hinting totalmente manual e individualmente feito para cada glifo, principalmente em tamanhos de corpos menores, de 9pt a 14pt. O responsável pela engenharia de hinting foi, Jan Gerner (Yanone), que focou na renderização da Tuna principalmente em renders utilizados no Windows e Tablets (LIGATURE-INK, 2017).

Figura 78

Características da Tuna. Fonte: Autoria própria

Eixos variados da Tuna. Fonte: Autoria do próprio autor.

87

86

pelo autor.

Já com relação aos eixos, a Tuna traz um diferencial bastente contemporâneo, pois possui diferentes eixos dependendo da letra que se observa. Os eixos vão desde tipos humanistas, no caso das letras c, o, q e g, porém já no caso da letra a, esta utiliza um eixo racionalista.

4 Resultados da Pesquisa

Além de possuir uma família maior, a Tuna traz, várias funções OpenType, como ligaturas, versaletes, figuras tabulares, numerais desalinhados (old style), opções de subscrito, sobrescrito e números fracionários.

entre seus lados, apesar de apresentarem curvaturas que suavizam o desenho de seus arrebates.

Figura 79 Processo de hinting manual. Fonte: Ligature-Inc. Imagem adaptada pelo autor.

4 Resultados da Pesquisa

4 Resultados da Pesquisa

Não somente o hinting foi cuidadosamente pensado e executado, mas também os ângulos utilizados nas serifas e hastes da Tuna, foram, em sua grande maioria, baseados em ângulos racionais, os quais são melhor exibidos dentre de um gride de pixels (LIGATURE-INK, 2017).

formas e ângulos mais amigáveis para um gride de pixels, não precisando se apoiar completamente no hinting. É notável que até hoje, a teoria de Luc(as) de Groot ainda seja utilizada como base para interpolação e extrapolações de familias tipográficas, observado no caso da Tuna.

Por outro lado, a simplicidade e objetividade da Bookerly, com apenas dois pesos desenhados separadamente e suas respectivas itálicas e capitulares, já se mostra bastante eficiente e suficiente para uma diagramação e hierarquia dentro de um livro digital.

Finalizando o capítulo, o autor gostaria de resaltar que com o levantamento feito nos últimos dois capitulos, somado às questões práticas e teóricas exploradas nos resultados de pesquisa e fundamentos teóricos, valerão como um ótimo guia metodológico para o objetivo prático deste trabalho, o desenvolvimento de uma família tipográfica para composição e leitura de textos em tela. ▪

Figura 80 Utilização de ângulos racionais

Podemos concluir, após as análises acima, que ambas as fontes estudadas, possuem pequeno contraste, formas mais robustas com altura-x generosas, mas principalmente um enorme cuidado no processo de hinting manual.

Diferentemente da Bookerly, a Tuna, já iniciou o seu processo de desenvolvimento, levando em considerações

89

88

Fonte: Ligature-Inc

5 Requisitos do Projeto

A

5 Requisitos para o Projeto

pós o levantamento teórico e prático dos capítulos anteriores, foi possível separar e apontar características necessárias importantes para que se desenvolva uma boa fonte de texto para leitura em telas. Tendo como resultado, um produto esteticamente bonito, de personalidade marcante, flexível e funcional, contribuindo assim, para uma melhor experiência de leitura para o usuário.

A maioria dos fatores condicionantes para o projeto, foram extraídos das referências bibliográficas, digitais, das entrevistas com os profissionais da área e através dos estudos de casos. Entre os principais parâmetrso práticos desejáveis para a produção de uma fonte para composição de textos em telas, destacam-se: ☞F ontes serifadas com serifas mais largas; ☞ Ótima legibilidade, ou seja, fácil reconhecimento e diferenciação entre caracteres do alfabeto; ☞B aixo contraste; ☞A ltura-x generosa; ☞C ontraforma expressiva, espaçamento e kerning bem resolvidos; ☞ Formas e curvaturas mais racionais, com estruturas mais robustas e menos delicadas (pixel friendly); ☞ Deve oferecer dois pesos (regular e bold) e, se possível suas respectivas versões itálicas (desejável); ☞ Cobertura para alfabetos latinos e do oeste-europeu; ☞L igaduras básicas (desejável)

91

92

93

Deve-se porém, notar que nem todas as características acima são necessárias, como o caso das versaletes e numerais textuais. Porém, elas tendem a valorizar o projeto, tonando-o mais versátil para quem for utilizá-lo, por exemplo, para uma diagramação mais complexa, como no caso de livros e revistas.

A opção por uma fonte serifada, foi baseada principalmente nos fundamentos teóricos, os quais apontam a vantagem de fontes serifadas no ritmo de leitura, em comparação as sem serifa. Em adição a isso, as fontes serifadas também possuem melhor legibilidade, uma vez que seus caracteres são mais facilmente distinguíveis entre sí, do que os de uma sans serif geométrica, por exemplo, onde as formas do p, q, b e d são muito semelhantes (UNGER, 2007).

O baixo contraste favorece o ritmo de leitura, principalmente em textos mais longos, uma vez que criam uma mancha de texto mais homogênia. Fontes com contrastes muito grandes, costumam chamar mais atenção e consequentemente, influenciam no processo de leitura. O que por outro lado, é uma característica, muito funcional em chamadas, títulos e destaques.

Outro fator que ficou bastante nítido durante a pesquisa e o levantamento das fontes estudadas, é que a maioria delas possuem altura-x generosas, fazendo com que a fonte consiga oferecer uma ótima legibilidade e consequentemente, leiturabilidade em tamanhos de corpo menores. Isso, naturalmente, com o auxílio de contraformas bem resolvidas e expressivas, as quais junto com espaçamentos e kerning adequados produzem harmonia e bom ritmo de leitura.

Levando em consideração o meio digital, é aconselhável, que as formas dos caracteres da fonte não sejam

muito delgadas ou delicadas, pois quando forem renderizadas e exibidas na tela, podem perder muitos desses detalhes, principalmente em tamanhos de corpo menores.

Diferenças de pesos como regular e bold, são indispensáveis para a hierarquia de um texto, muito utilizada em livros, jornais e revistas, como forma de destaque ou para chamar a atenção do leitor para um trecho específico do conteúdo. A versão itálica possuí a mesma função, é utilizada como destaque e ou em subtítulos.

Comercialmente, é interessante que a fonte desenvolvida possa, ao menos, dar cobertura para alfabetos latinos, como (português e espanhol), e do oeste-europeu, como França, Inglaterra, Alemanhã e Itália. Uma simples falta de um acento utilizado em francês, pode tornar sua fonte inutilizada e descartável para possíveis clientes neste país.

Funcionalidades disponíveis no formato OpenType, como ligaturas, versaletes, são um excelente atrativo e, praticamente, um quesito básico para sua melhor aceitação no mercado tipográfico de fontes digitais.

Por fim, uma vez que o objetivo do projeto é desenvolver uma fonte para leitura de textos em telas, o hinting se faz um extremamente importente e necessário para oferecer funcionalidade real para a familia tipográfica. De preferência, não somente o hinting automático oferecido por programas como Ghyphs, mas um hinting manual de cada caracter, principalmente nos tamanhos menores, fará uma enorme diferência e, sem dúvidas, será visto como um diferêncial para o produto.

Em resumo, podemos concluir, que as características acima, apresentam os requisitos mínimos necessários para o desenvolvimento de uma fonte de texto funcional e otimizada para o seu uso em telas. ▪

5 Requisitos para o Projeto

5 Requisitos para o Projeto

☞V ersaletes e numerais textuais (desejável) ☞ Hinting automático (desejável); ☞ Formato OpenType;

6 Estudos de Concepção

P

odemos dividir os estudos de concepção deste projeto em cinco etapas principais: esboços, caminho escolhido, produção, últimos ajustes e o projeto final. Nesse capítulo, cada uma dessas etapas serão explicadas de forma mais detalhada, buscando demonstrar como foi o desenvolvimento do produto final deste projeto, a fonte Aline Text, projetada para leitura de textos em telas.

6 Estudo de Concepção

ESBOÇOS

Figura 81 Fotos dos primeiros esboços

95

Para se dar início aos primeiros esboços deste projeto, o autor se utilizou das informações dos capítulos Ordem de desenho das letras e Esboços em Papel, para definir, por quais letras iniciar, os primeiros esboços.

Seguindo a sugestão da designer de tipos Laura Meseguer, os primeiros rafes foram desenhos separados de cada uma das letras da palavra "novia". Buscando inicialmente na letra n a essência da fonte através dos ângulos e terminais das serifas de base e de cima. Para a letra o, foram feitos testes de ângulações mais retas e com eixos humanistas. Para a letra v, buscou-se apropriar das serifas da letra n e adaptá-las para as astes diagonais, buscando uma harmonia entre contra forma e preto do glifo. Finalmente, a letra a, foi a que mais precisou de teste e experimentações com penas retas, pincéis, linhas, rachuras. Outra grande dificuldade que surgiu nesse estágio inicial foi a de definir as métricas verticais (alturas verticais), e as horizontais (larguras) sem sair do que se verificou recomendado para fontes para leitura de textos longos. A seguir alguns exemplos dos rafes iniciais.

6 Estudo de Concepção

6 Estudo de Concepção

96

97

CAMINHO ESCOLHIDO

Após muitos esboços e experimentações, foram definidas algumas diretrizes com relação ao estilo da fonte a ser desenvolvida. Nesse momento, foi definido que a fonte seria uma variação do estilo Slab Serif, com serifas mais arredondadas, eixos racionais retos, contra-formas generosas, descendentes curtas, e com pouco contraste entre suas astes.

Finalmente, com as referências das ascendentes e descendentes, foi possível definir as métricas verticais da fonte.

Após as métricas, o próximo passo foi focar na produção do alfabeto, inicando pelas caixas baixas e seguindo para as caixas altas.

Figura 82 Rafes com as definições

Figura 84

de estilos

Vetorização das letra h e p

6 Estudo de Concepção

Com a definição, de como a fonte seria, o passo seguinte foi o de vetorização no Glyphs. Nele o processo de digitalização com a pen tool foi bastante parecido com os demais programas vetoriais como Illustrator ou Corel Draw. Porém no caso do Glyphs, por ser um software especifico para o desenho de fontes, possui um controle intuitivo e preciso, acelerando o processo de digitalização.

6 Estudo de Concepção

PRODUÇÃO E TESTES

Para agilizar o processo, o autor desenhou primeiramente todas as fontes derivadas da letra n, depois da letra o, as diagonais com o v, e finalmente, os caracteres especiais como as letras a, s e g.

Durante o processo de desenho dos caracteres, foi necessário, após cada modificação ou finalização de um novo glifo, fazer teste impressos em vários tamanhos para avaliação e apontamentos das possíveis alterações necessárias. A imagem a seguir demonstra o alfabeto básico na sua 10ª versão.

Figura 83 Primeira vetorização da letra n

Assim que as primeiras letras já estavam digitalizadas, foi preciso desenhar pelo menos mais duas derivadas das letras da palavra novia, para assim definir o comprimento e altura das ascendentes e descendentes. Por questões morfológicas, foram escolhidas as letras h e p.

Figura 85 Vetorização das letra a,s e g na versão 10 do projeto

99

98

no Glyphs

6 Estudo de Concepção

caixa alta e baixa na

Os testes com palavras e textos foi de extrema importência, pois neles se conseguiu ter as primeiras sensações de como as letras estavam interagindo entre sí, além de se poder observar a mancha de texto. Mesmo ainda espaçada de forma não definitiva, já foi possível verificar mais alguns problemas e fazer correções necessárias, principalmente em letras como r, s, g e as letras com traços verticais como o v, w e x.

Após essa etapa de verificações mais gerais quanto à mancha de texto e a relação entre letras, em seguida, o autor iniciou o desenho das pontuações e dos numerais, outra parte de extrema importância para o projeto.

Para os numerais, foram desenvolvidos os numerais alinhados e suas versões deselinhadas ou old style, além de suas respectivas versões tabulares, subscritas, sobrescritas e fracionárias.Com mais uma parte bastente importante desenhada, foram feitos novamente outros testes

Figura 87 Todos os numerais desenhados

101

100

versão 10 da fonte

Após chegar a um set básico de caracteres, foram feitos mais alguns testes, desta vez, não somente através de testes impressos, mas tambem em telas, como a do Kindle, e através de arquivos em PDF em monitores de computadores. Desta vez, o foco não foi somente no desenho individual de cada letra, mas no alfabeto como um todo.

Chegando a um resultado satisfatório, pode-se avançar para a próxima etapa, o espaçamento.

Para o espaçamento das letras, foi escolhido o método desenvolvido por Walter Tracy no seu livro Letters of Credit: A View of Type Design. Esse método consiste em definir a relação de espaço entre as letras n e o, e usar essa relação como parâmetro para espaçar as demais letras do alfabeto. Esse método consegue proporcionar um espaçamento mínimo aceitável rapidamente, e com isso, já foi possível fazer mais alguns testes com palavras e textos (TRACY,1986).

6 Estudo de Concepção

Figura 86 Alfabeto completo

Figura 88 Principais pontuações utilizadas para textos em idiomas latinos

Figura 90 Exemplo de kerning entre as letras K e e

6 Estudo de Concepção

6 Estudo de Concepção

em tela e impresso para a verificação das relações entre pontuação e letras, pesos, tamanhos, mancha, alturas e métricas. Para completar o set de glifos necessários a uma fonte de texto de boa qualidade, foram ainda desenhados os sinais monetários, matemáticos entre outros, como setas e sinais tipográficos.

Neste etapa, após mais alguns ajustes e refinamentos, foi decidido por expandir a familia tipográfica, adicionando uma versão bold para complementar a regular, até então desenvolvida. Para esta versão bold, foi feita uma cópia da versão regular já existente e todos os glifos presentes e estes foram redesenhados individualmente.

Como citado anteriormente, durante essa segunda etapa, foram feitos inúmeros testes impressos e digitais para refinamento e ajustes de cada glifo redesenhado até que se chegasse ao mesmo nível de funcionalidade da versão regular.

Tendo agora as versões regular e bold da fonte, foi possível dar mais um passo adiante e iniciou-se processo de kerning de ambos os pesos.

Outro fato que deve ser levado em consideração é que o processo de kerning não se aplica somente entre pares de letras caixa alta com caixa baixa, caixa baixa com caixa baixa ou caixa alta com caixa alta, mas tambem à qualquer tipo de par, podendo ser entre letras e pontuações, letras e numerais, letras e símbolos ou sinais.

Figura 89 Sinais matemáticos e estilísticos

103

102

tipográficos,

104

Figura 91 Alguns rafes para a versão itálica

105

Finalmente com o processo de kerning concluído, a maior parte do processo de desenvolvimento da fontes já estava teoricamente concluido. Mas até este momento, a fonte apenas cobria uma pequena parte dos idiomas latinos.

Por isso, foi decidido avançar mais uma etapa e fazer com que a fonte pudesse cobrir uma gama maior de idiomas, expandindo seu set de caracteres.

Foram desenvolvidos todos os diacríticos e glifos especiais para todos os idiomas latinos do oeste, leste, centro, norte da Europa, África e até mesmo idiomas asiáticos que utilizam caracteres latinos como o Vietnamita.

Terminada essa etapa, novamente foram adicionados os espaçamentos e kernings de cada novo tipo de par que passou a existir. Com o kerning e espaçamentos finalizados das versões regular e bold, foi verificado ainda a necessidade de criar agora uma versão itálica que complementasse às versões anteriores.

Dessa forma, voltou-se à etapa inicial de esboços buscando deste vez, um desenho que tivesse caráter e que fosse interessante e funcional, mas que também servisse de complemento para os estilos já existentes da fonte.

Entre os métodos mencionados anteriormente de esboço foi utilizado, desta vez, em vez dos desenhos de contornos, a pena chata que foi bastante utilizada para ajudar na estética caligráfica da versão itálica.

Além de teste com as penas chatas, foram feitos também várias experimentações na angulação das letras, que no já nos esboços finais, havia sido definida como sendo de 11°. Essa angulação foi considerada a ideal para acompanhar as versões romanas.

Outro fator importante a ser definido durante o processo de rafes foi a espessura das letras itálicas. Estas normalmente são opticamente mais leves que as suas companheiras romanas. Nos primeiros esboços, as letra tinham ficado mais pesadas que a regular, porém mais leves que a sua versão bold, necessitando, portanto, de

6 Estudo de Concepção

6 Estudo de Concepção

ÚLTIMOS AJUSTES

vários ajustes até chegar a um resultado satisfatório.

Assim que se conseguiu chegar a esse resultado, foi a vez de digitalizar e começar o desenhos dos demais caracteres do alfabeto. As mesmas métricass verticais e horizontais das versões romanas foram utilizadas para a itálica.

A ordem dos desenhos também foi baseada na mesma ordem utilizada anteriormente. No espaçamento e kerning, foram utilizadas as mesmas metodologias mencionadas anteriormente.

Após percorrer todos os processos descritos anteriormente, serão apresentadas a seguir algumas das características e funcionalidades da fonte criada para este projeto de TCC. Notar que até o momento, a fonte, chamada pelo autor de Aline Text, possuí 3 versões: Regular, Bold e Kursiv (Versão Itálica) e conta com aproximadamente 2436 glifos.

As versões romanas, contam com suporte para todas os idiomas da europa, norte da africa e vietnamita. Já a versão itálica, apenas para a europa central.

Entre as funções OpenType disponíveis, a Aline Text conta com:

6 Estudo de Concepção

6 Estudo de Concepção

O PROJETO FINAL

meticuloso e demorado, além de custoso, o autor deste trabalho se limitou apenas à esfera em que se aplica o desenho de tipos, excluindo os conhecimentos necessários de programação para que se pudesse fazer um hinting totalmente manual.

Após testes impressos e principalmente no Kindle, a Aline se mostrou bastante eficiencia e preencheu todos os pré requisitos para o projeto de forma satisfatória.

Para finalizar este capítulo, a seguir, serão apresentadas algumas aplicações, exemplos de usos, mapa de caracteres e as funcionalidades Opentype da Aline Text nas suas versões romanas (regular e bold) e kursiv (itálica). ▪

Já como acabamento, foi aplicado o hinting automática disponível no Glyphs, uma vez que para se fazer um hinting manual, além de ser um processo extremamente

107

106

☞V ersaletes nas versões regular e bold; ☞ Numerais old style e alinhados com suas respectivas versões tabulares; ☞ Sobrescrito e subscrito e reconhecimento inteligente de datas e frações; ☞ Ligaturas estilísticas (st, ffl) e padronizadas (fi, fl); ☞ Sensitives Caps (reconhecimento e alinhamento de símbulos, pontuações e acentos nas caixas altas); ☞ Ajustes finos para o alemão em ligaturas e conflitos entre pares comuns ao idioma (fü, fä, fü, ß, ẞ).

Æ

Δ

ǚ

Ω

ą

∏ ƒ

% ft

Aline Text ∅ A modern Slab Serif for text in screens

�

¥

√

₤

ñ

$

☞ Chapter I ☜

T

HE STUDIO WAS FILLED WITH THE RICH ODOR OF ROSES, and when the light summer wind stirred amidst the trees of the garden there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pinkflowering thorn. ¶ From the corner of the divan of Persian saddle-bags on which he was lying, smoking, as usual, innumerable cigarettes, Lord Henry Wotton could just catch the gleam of the honey-sweet and honey-colored blossoms of the laburnum, whose tremulous branches seemed hardly able to bear the burden of a beauty so flame-like as theirs; and now and then the fantastic shadows of birds in flight flitted across the long tussore-silk curtains that were stretched in front of the huge window, producing a kind of momentary Japanese effect, and making him think of those pallid jade-faced painters who, in an art that is necessarily immobile, seek to convey the sense of swiftness and motion. The sullen murmur of the bees shouldering their way through the long unmown grass, or circling with monotonous insistence round the black-crocketed spires of the early.

109

108

6 Estudo de Concepção

č

The Picture of Dorian Gray

6 Estudo de Concepção

te u a l Um en h tsc über ben ie u de äre rie ndw e h i c e d ies w ie s rge de I b gä d d rt. S hr? len en s a n ie ,e u l w r feh stab an b t o n e a v h i e t h al stab te e , nic er d buc ie m m h n er am , ab roß g, d n i c d e nd u s e n n G u b t st l u i d su onst ng n ein hrh g. Se int ö l l K e - u Not ans eibu ch Ja un n m r i ss e s r e r h e e i g a l e d c h t g i d s b c o K s a t rrn rra , wa hen nnö nt, a bens lem ken, e e sc e u ken sta prob den on H Üb lich i v t er ch ich ür g zw ein sen f h t n u e b l ls s na un eic st ei Ho t, k ß e a l r r l o i h i rn eite ec nlich il-Ad r Gr h w vie ber r r e p H br ben ehr ei -Ma eine ßlic sich ll, a r h n e s a c o r v o ie nn h st v l s t c ns us E Bei ch ka hen nun wei buch t do ine a s . l r e s pie ürd de e Lese ste ular sind Groß hein ich e w ür e en rm n en n ersc ießl h h e i n d c r o e w tsc r ü n eu ün nk-F Nam efe en, schl e w M o d m e d a te s u na Der l für es B Beid rr H wer gen a l n e de n t . lt h a l m ? l l H l g n o r e r -U un d de N w gefü öfe und este n ve e e g g E H en ab ndi eln us ar n er CH

I don't wanna see you crying Darling, no way!

Três Bien?

Cafuné

«Pour une Morale de L'ambiguïte»

Achtung

6 Estudo de Concepção

6 Estudo de Concepção

Alexandre Dumas, "Les trois Mousquetaires"

«L'invitée» Par Simone de Beauvoir & «Les Chemins de la liberté» par Jean-Paul Satre

Crime & Punishment by Fydor Dostoyevsky

111

110

Raskolnikov

ALINE TEXT BOLD 10/14

JOHANNES GENSFLEISCH ZUR LADEN ZUM GUTENBERG was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe. His introduction of mechanical movable type printing to Europe started the Printing Revolution and is regarded as a milestone of the second millennium, ushering in the modern period of human history.

Soll's ich wirklich machen, oder lass ich's lieber sein? Jein!

Gesellschaft

We are no strangers to love, you know the rules and so do I

Take me out!

Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich

MAX & MORITZ Despacito, Quiero respirar tu cuello despacito

Fahrenheit 451 Guð er hnefa-gróft svar, delicacy gegn okkur hugsuðumá þú ættir

Der Spiegelblatt Öküz ajan hapse düştü yavrum, felç gibi

113

112

JOHANNES GENSFLEISCH ZUR LADEN ZUM GUTENBERG was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe. His introduction of mechanical movable type printing to Europe started the Printing Revolution and is regarded as a milestone of the second millennium, ushering in the modern period of human history.

6 Estudo de Concepção

6 Estudo de Concepção

ALINE TEXT REGULAR 10/14

6 Estudo de Concepção

f the able equa righ hum freed an fam ts of a l l o i l m m y 3Log7 < x+1/5 − (x+2) , jus i s t h t W e i c f h e o f o r erea x3+5√c−Log7 (x+2)2 a u hum n d s an r p d eace i ights sreg i a h a r con ve da Sensação: 15°

Sensação: 15°

Umidade: 72%

Umidade: 72%

Pressão: 1021 hPa

Pressão: 1021 hPa

Vento: 13 km/h

Vento: 13 km/h

115

114

15° 16°

6 Estudo de Concepção

d a d i n a m u H Ó a ! , e " r e i d a t a l d o r V e PREVISÃO DO TEMPO v Ó " A e ! s e e PARA SÃO PAULO d ; a l i d c i l á i f c e a s b i n o m e I c 14/08 15/08 Ó m é a o n ã a n m e u d h a W o a d p t r r e e o u v her q p i e a s r v e m e a l e a e s m h d c a r ho r n e h e e c l c e e o n e l u g I " q n o che — s i z st t Céu encoberto Céu encoberto t e i o i N p o hn a c i r d e — ina a " Fri of th n n e i b lien do e

☞ OPENTYPE FEATURES ☜

☞ OPENTYPE FEATURES ☜

Funções Opentype Disponíveis

Funções Opentype Disponíveis

fi→fi

1/2→1/2

fü→fü

11/2→213/987

aAA

1725→1725

¿Quê?

O2 X3→O2X³

Ligaturas Contextuais

Versaletes

Frações Inteligentes

Numerais Alinhados e Desalinhados

Numeros cientificos, subscritos e sobrescritos

117

116

Pontuação Sensível

Frações

6 Estudo de Concepção

6 Estudo de Concepção

Ligaturas

6 Estudo de Concepção 118

Caracteres básicos

Caracteres básicos

{ABCDEFGH} (IJKLMNOPQ) ¿RSTUVWXYZ? ‘abcdefghijklm’ ¡nopqrstuvwxyz!

“0123456789” †0123456789‡ *§¶/|:¦\_@©® «$£€#¢;,.„…‚» [™‹&›-–—]

{ABCDEFGH} (IJKLMNOPQ) ¿RSTUVWXYZ? ‘abcdefghijklm’ ¡nopqrstuvwxyz!

“0123456789” †0123456789‡ *§¶/|:¦\_@©® «$£€#¢;,.„…‚» [™‹&›-–—]

119

☞ ALINE TEXT BOLD ☜

6 Estudo de Concepção

☞ ALINE TEXT REGULAR ☜

6 Estudo de Concepção

☞ ALINE TEXT REGULAR ☜

Caracteres básicos

Exemplos de textos em corpo 8/10

Since the recognition of the innate dignity and equal and inalienable rights of all members of the community of human beings forms the basis of freedom, justice and peace in the world, since the non-recognition and contempt of human rights have led to acts of barbarism, the conscience of humanity to fulfill with indignation.

ALEMÃO

Da die Anerkennung der angeborenen Würde und der gleichen und unveräußerlichen Rechte aller Mitglieder der Gemeinschaft der Menschen die Grundlage von Freiheit, Gerechtigkeit und Frieden in der Welt bildet, da die Nichtanerkennung

ISLANDÊS

Þar sem viðurkenning á meðfædda reisn og jafnan og óalgengan rétt allra manna í samfélagi manna byggir á frelsi, réttlæti og friði í heiminum, þar sem viðurkenning og fyrirlitning mannréttinda hefur leitt til barbarismanna, samvisku mannkynsins að uppfylla reiði.

NORUEGUÊS

Da anerkjennelsen av menneskeverd og like og umistelige rettigheter for alle medlemmer av menneskeslekten er grunnlaget for frihet, rettferdighet og fred i verden, da tilsidesettelse av og forakt for menneskerettighetene har ført til

POLONÊS

Ponieważ uznanie wrodzonej godności i równych i niezbywalnych praw wszystkich członków społeczności ludzkiej stanowi podstawę wolności, sprawiedliwości i pokoju na świecie, ponieważ nieuznanie i pogarda praw człowieka doprowadziły do aktów barbarzyństwa, sumienia ludzkości do wypełnienia z oburzenia.

VIETNAMITA

Trong khi thừa nhận phẩm giá vốn có và những quyền bình đẳng và bất khả xâm phạm của tất cả các thành viên của gia đình nhân loại là nền tảng của tự do, công lý và hòa bình trên thế giới, trong khi coi thường và khinh đã dẫn nhân quyền trong hành vi man rợ mà lương tâm của nhân loại để hoàn.

121

{ABCDEFGH} (IJKLMNOPQ) ¿RSTUVWXYZ? ‘abcdefghijklm’ ¡nopqrstuvwxyz!

“0123456789” †0123456789 ‡ *§¶/ |: ¦\_@©® «$£€#¢;,.„…‚» [ ™‹&›-–—]

INGLÊS

6 Estudo de Concepção

120

☞ ALINE TEXT KURSIV ☜

☞ ALINE TEXT BOLD ☜

☞ ALINE TEXT KURSIV ☜

Exemplos de textos em corpo 8/10

Exemplos de textos em corpo 8/10

Since the recognition of the innate dignity and equal and inalienable rights of all members of the community of human beings forms the basis of freedom, justice and peace in the world, since the non-recognition and contempt of human rights have led to acts of barbarism, the conscience of humanity to fulfill with indignation.

ALEMÃO

Da die Anerkennung der angeborenen Würde und der gleichen und unveräußerlichen Rechte aller Mitglieder der Gemeinschaft der Menschen die Grundlage von Freiheit, Gerechtigkeit und Frieden in der Welt bildet, da die Nichtanerkennung

Þar sem viðurkenning á meðfædda reisn og jafnan og óalgengan rétt allra manna í samfélagi manna byggir á frelsi, réttlæti og friði í heiminum, þar sem viðurkenning og fyrirlitning mannréttnda hefur leitt til barbarismanna, samvisk.

Da anerkjennelsen av menneskeverd og like og umistelige rettigheter for alle medlemmer av menneskeslekten er grunnlaget for frihet, rettferdighet og fred i verden, da tilsidesettelse av og forakt for menneskerettighetene har ført til

POLONÊS

Ponieważ uznanie wrodzonej godności i równych i niezbywalnych praw wszystkich członków społeczności ludzkiej stanowi podstawę wolności, sprawiedliwości i pokoju na świecie, ponieważ nieuznanie i pogarda praw człowieka doprowadziły do aktów barbarzyństwa, sumienia ludzkości do wypełnienia z oburzenia.

VIETNAMITA

Trong khi thừa nhận phẩm giá vốn có và những quyền bình đẳng và bất khả xâm phạm của tất cả các thành viên của gia đình nhân loại là nền tảng của tự do, công lý và hòa bình trên thế giới, trong khi coi thường và khinh đã dẫn nhân quyền trong hành vi man rợ mà.

INGLÊS

Since the recognition of the innate dignity and equal and inalienable rights of all members of the community of human beings forms the basis of freedom, justice and peace in the world, since the non-recognition and contempt of human rights have led to acts of barbarism, the conscience of humanity to fulfill with indignation.

ALEMÃO

Da die Anerkennung der angeborenen Würde und der gleichen und unveräußerlichen Rechte aller Mitglieder der Gemeinschaft der Menschen die Grundlage von Freiheit, Gerechtigkeit und Frieden in der Welt bildet, da die Nichtanerkennung

ISLANDÊS

Þar sem viðurkenning á meðfædda reisn og jafnan og óalgengan rétt allra manna í samfélagi manna byggir á frelsi, réttlæti og friði í heiminum, þar sem viðurkenning og fyrirlitning mannréttinda hefur leitt til barbarismanna, samvisku mannkynsins að uppfylla reiði.

NORUEGUÊS

Da anerkjennelsen av menneskeverd og like og umistelige rettigheter for alle medlemmer av menneskeslekten er grunnlaget for frihet, rettferdighet og fred i verden, da tilsidesettelse av og forakt for menneskerettighetene har ført til

POLONÊS

Ponieważ uznanie wrodzonej godności i równych i niezbywalnych praw wszystkich członków społeczności ludzkiej stanowi podstawę wolności, sprawiedliwości i pokoju na świecie, ponieważ nieuznanie i pogarda praw człowieka doprowadziły do aktów barbarzyństwa, sumienia ludzkości do wypełnienia z oburzenia.

VIETNAMITA

Trong khi thừa nhận phẩm giá vốn có và những quyền bình đẳng và bất khả xâm phạm của tất cả các thành viên của gia đình nhân loại là nền tảng của tự do, công lý và hòa bình trên thế giới, trong khi coi thường và khinh đã dẫn nhân quyền trong hành vi man rợ mà lương tâm của nhân loại để hoàn.

123

122

ISLANDÊS

NORUEGUÊS

6 Estudo de Concepção

6 Estudo de Concepção

INGLÊS

6 Estudo de Concepção

☞ APLICAÇÃO IPAD ☜

6 Estudo de Concepção

124

☞ APLICAÇÃO KINDLE ☜

125

7 Considerações Finais

O

7 Considerações Finais 127

desenho de tipografias de texto, por si só, já é bastante complicado, pois consiste em uma metodologia detalhada, e de várias etapas. Importante resaltar, que o produto deste projeto não somente será destinado à composição de textos, mas sim de textos que serão exibidos em telas, fazendo com que decisões específicas devam ser tomadas para esse meio digital.

Os estudos dos fundamentos teóricos sobre leitura, legibilidade, e leiturabilidade, contribuíram para definir o que o tipo da fonte seria com serifas. Isso baseado nos esclarecimentos entre as diferenças, vantagens e desvantágens das fontes serifadas em comparação às fontes sem serifas e o sua influência durante a leitura.

Os procedimentos metodológicos, serviram para sistematizar e dividir o processo de desenvolvimento da fonte em quatro diferentes etapas (pré-conceitual, de producão, pós-produção e finalização), as quais serão respeitadas durante a fase de produção deste projeto.

Já os resultados de pesquisa obtidos, foram essenciais e auxiliaram durante o processo de produção, pois servirão como guia e referência para detalhes relevantes, além de terem ajudado a prevenir erros no decorrer do projeto.

O levantamento e os estudos de casos das tipografias de texto serviram de base para os primeiros desenhos.

Através deles, foi possível selecionar algumas tipografias para servirem de inspiração.

As entrevistas com designers de tipos, por sua vez, contribuiram diretamente no processo, de desenvolvimento, pois ofereceram direcionamentos, sugestões, dicas e alertas para possíveis problemas.

129

7 Considerações Finais 128

7 Considerações Finais

A fonte resultante deste projeto no olhar do autor, conseguiu atender a todas necessidades dos requisitos do projeto. Mostrou-se com um ótimo rendimento e boa legibilidade em corpos pequenos, o que faz com que a Aline Text proporcione uma boa experiência de leitura.

Além dos requisitos mínimos, o projeto conseguiu ir além.

Fornecendo não apenas uma única versão romana (regular), mas duas outras comlementares (bold e kursiv), além de um set de caracteres muito maior do que o mínimo sugerido logo no inicio do projeto em meados de julho/2017.

Para dar continuidade ao que foi produzido até então, será necessário uma complementação da família desenvolvida, com a criação de versões intermediárias como light, book, medium e suas respectivas itálicas. No caso da versão itálica, por ser a mais recente, ela ainda não possui o mesmo número de caracteres, tão pouco a cobertura dos vários idiomas latinos como suas versões romanas. Além disso, também se viu necessário um refinamento do kerning e uma possível e desejada expansão do mapa de carateres para suportar idiomas com caracteres não latinos como o cirílico e grego. ▪

8 REFERÊNCIAS ADOBE, Systems Incorporated. In. POSTSCRIPT LANGUAGE REFERENCE. Decs. Disponível em: <https://www.adobe. com/products/postscript/pdfs/PLRM.pdf>. Acesso em: 23 abr. 2017.

AMAZON. In. NEW BOOKERLY FONT AND TYPOGRAPHIC FEATURES – READ FASTER WITH LESS EYESTRAIN. Decs. Disponível em: <https://www.amazon.com/Kindle-Paperwhite/b?ie=UTF8&node=11624010011. Acesso em: 19 abr. 2017.

BLACKWELL, Lewis. 20th Century Type Remix. Londres: Laurence King Publishing, 1998. 192 p.

CONSTANTIN, Jan. In. TYPOGRAPHIC DESIGN PATTERNS AND CURRENT PRACTICES (2013 EDITION). Decs. Disponível em: <https://www.smashingmagazine.com/2013/05/typographic-design-patterns-practices-case-study-2013/>. Acesso em: 2 de abril 2017.

E-INK. In. HOW OUR INK WORKS. Decs. Disponível em: <http://www.eink.com/how_e_ink_works.html>. Acesso em: 01 mar. 2017.

FIPE. Produção e vendas do setor editorial brasileiro. São Paulo: FIPE, 2015.

BRINGHURST, Robert. Elementos do estilo tipográfico. 2. ed.

São Paulo: Cosac Naify, 2011. 428 p.

GABRIEL, Sébastien. In. DESIGNER'S GUIDE TO DPI. Decs.

Disponível em: <http://sebastien-gabriel.com/designers-guide-to-dpi/>.

Acesso em: 30 abr. 2017.

BRODY, Neville. In. INKBOTDESIGN: NEVILLE BRODY. Decs.

Disponível em: <http://inkbotdesign.com/neville-brody/>.

Acesso em: 25 abr. 2017.

GROOT, Luc(as) de. In. LUCAS FONTS: INTERPOLATION THEORY. Decs. Disponível em: <http://www.lucasfonts.com/ about/interpolation-theory/>. Acesso em: 21 abr. 2017.

BURGOS, Carlos Luis. In. TV LCD 02 FUNCIONAMENTO DA TELA. Decs. Disponível em:<https://www.youtube.com/ watch?v=VDoy-IyT-5o&list=PLvD0xrLu8g8iay2lE9HQ4-clIxBAFcIe0&index=2>. Acesso em: 30 abr. 2017.

HARRIS, Tom. In: HOW PLASMA DISPLAYS WORK. Decs.

Disponível em: <http://electronics.howstuffworks.com/plasma-display. htm>. Acesso em: 01 mar. 2017.

131

130

BRADEN, Felix; RÜTTEN, Alex. In. TUNA TYPEFACE. Decs.

Disponível em: <http://tuna-typeface.com/>. Acesso em: 25 abr. 2017.

COLES, Stephen. In. IDENTIFONT. Decs. Disponível em: <http://www.identifont.com/find?font=Chicago&q=Go>.

Acesso em: 25 abr. 2017.

8 referências

8 referências

BILAK, Peter. In. FONT HINTING. Decs. Disponível em: <https://www.typotheque.com/articles/hinting>. Acesso em: 16 abr. 2017.

CHENG, Karen. Designing Type. Londres: Laurence King Publishing Ltd, 2005. 232 p.

HEITLINGER, Paulo. In. TIPÓGRAFOS: GLOSSARIO. Decs.

Disponível em: <http://www.tipografos.net/glossario/ fontes-digitais.html>. Acesso em: 25 abr. 2017.

MAGGIONI, Liane Regina. In. CURVAS DE BEZIER. Decs. Disponível em: <http://www2.ic.uff.br/~aconci/Bezier.htm/>.

Acesso em: 01 nov 2017.

HENESTROSA, Cristóbal; MESEGUER, Laura; SCAGLIONE, José. Como criar tipos: do esboço à tela. Brasília: Estereográfica, 2014. 152 p.

MICROSOFT. In. A BRIEF STORY OF TRUETYPE. Decs. Disponível em: <https://www.microsoft.com/typography/ TrueTypeHistory.mspx>. Acesso em: 27 abr. 2017.

HIDALGO, Jason. In. WHAT IS E INK AND HOW DOES IT WORK?. Decs. Disponível em: <https://www.lifewire.com/ what-is-e-ink-2740879>. Acesso em: 30 abril 2017.

MONOTYPE. In. 2016 ANNUAL REPORT. Decs. Disponível em: <http://s1.q4cdn.com/811528558/files/doc_financials/annual_reports/2016/Monotype-Imaging-Holdings-Inc.-2016-Annual-Report-on-Form-10-K.pdf>. Acesso em: 3 mai. 2017.

LICKO, Zuzana. In. EMIGRE: MATRIX II. Decs. Disponível em: <http://www.emigre.com/OT-Single/Matrix-II/Regular>.

Acesso em: 25 abr. 2017.

RHATIGAN, Dan. In. TYPECAST: Type on Screen. Decs.

Disponível em: <http://typecast.com/seminars/tailoring-type-for-screen/ screens>. Acesso em: 01 mar. 2017.

LIGATURE, Inc. TUNA TYPEFACE. Decs. Disponível em: <http://tuna-typeface.com/>. Acesso em: 6 abr. 2017.

TRACEY, Walter. Letters of Credit: A View of Type Design.

Londres: Bedford, 1986. 70-80 p.

LUPTON, Ellen. Tipos na tela: Um guia para designers, editores, tipógrafos, blogueiros e estudantes. São Paulo: Gustavo Gili, 2015. 208 p.

UNGER, Gerard. While you're reading. Nova Iorque: Mark Batty Publisher, 2007. 223 p.

MAAG, Dalton. In. AMAZON: KINDLE PAPER WHITE. Decs. Disponível em: <https://www.amazon.com/Kindle-Paperwhite/b?ie=UTF8&node=11624010011>. Acesso em: 25 abr. 2017.

MARTINS, Fábio Duarte. In. BEZIER CURVES AND TYPE DESIGN: A TUTORIAL. Decs. Disponível em: <http://learn. scannerlicker.net/2014/04/16/bezier-curves-and-type-design-a-tutorial/>. Acesso em: 5 de abril 2017.

UNGER, Gerard. In. GERARD UNGER. Decs. Disponível em: <http://www.gerardunger.com/allmytypedesigns/allmytypedesigns04.html>. Acesso em: 25 abr. 2017.

WIKIPEDIA. In. CURVAS BEZIER. Decs. Disponível em: <https://pt.wikipedia.org/wiki/Curva_de_B%C3%A9zier>.

Acesso em: 20 abr. 2017.

133

132

NOORDZIJ, Gerrit. The Stroke: Theory of writing. 3. ed.

Londres: Hyphen Press, 2009. 86 p.

8 referências

8 referências

IMPALLARI, Paulo. FAMILY STEM WEIGHTS CALCULATOR. Decs. Disponível em: <http://www.impallari.com/familysteps/>. Acesso em: 2 mai. 2017.

LISTA DE IMAGENS

134

135

Vendas de e-Books no Brasil 18 Fonte Chicago, criada por Susan Kare 26 Letra S da fonte Demos 27 Comparação entre fontes bitmap e PostScript 28 Exemplo de curvas Bézier 29 Caracteres da fonte Matrix, desenhada por Zuzana Licko em 1986 30 7. Capas da revista The Face, por Neville Brody 31 8. A fonte Template Gothic na capa da Emigre 32 9. Caixas altas e baixas 35 10. Versaletes 36 11. Números alinhados e desalinhados 36 12. Sinais de pontuação e símbulos não alfabéticos 37 13. Diacríticos e ligaturas 37 14. Exemplo de letras ornamentadas 38 15. Tipos com e sem serifa 38 16. Exemplo de diferentes tipos de serifas 39 17. Anatomia Tipográfica 40 18. Pixels e seus subpixels exibidos no MacBook Pro 42 19. Esquema de funcionamento de uma tela LCD 43 20. Evolução da resolução do iPhone 44 21. Funcionamento da tecnologia E-INK 45 22. Exibição em uma tela do Kindle 45 23. Comparativo da legibilidade 46 24. Exemplos de parágrafos com diferenças de largura e espaçamento 47 25. Comparação entre Frutiger e Swift 49 26. Resultado da pesquisa de Constantin sobre o uso de fontes serifadas 51 27. Exemplos de contrastes por translação e expansão 55 28. Exemplos de esboços de superfície 56 29. Exemplo de esboço de contorno 56 30. Exemplos de curvas Bézier quadráticas 57 31. Exemplo de curvas Bézier cúbicas 58 32. Quantidade de pontos de curva 59

9 Lista de Imagens

9 Lista de Imagens

1.

2.

3.

4.

5.

6.

33. Tipos de pontos de ancoragem 59 34. Retas, pontos de vértice 59 35. Segmento de curvas 60 36. Curvas que se conectam com e sem suavização 60 37. Afinidade morfológica das letras 61 38. Grupos morfológicos a partir da palavra “novia” 62 39. Ajustes visuais não sistematizados 62 40. Sequência para caixa alta 63 41. Exemplos de palavras de amostragem 64 42. Compensação óptica e overshoot 64 43. Divisão horizontal geométrica x com ajuste óptico 65 44. Ajustes ópticos para equilíbrio entre os caracteres 65 45. Divisão horizontal geométrica x com ajuste óptico 65 46. Ajustes ópticos de larguras entre metades superiores e inferiores 66 47. Diferenças de espessuras entre curvas e retas 66 48. Compensação ópticas em conexões entre reta e curva e diagonais 67 49. Compensação de altura entre regular e bold 67 50. Contraformas de acordo com o peso do tipo 68 51. Exemplos de espaçamentos de acordo com o peso do tipo horizontal 68 52. Comparação entre palavras bem e mal espaçadas 69 53. Exemplo de kerning 69 54. Porcentagem de valores na interpolação 70 55. Fórmula para interpolação e extrapolação 71 56. Exemplos de aplicação da fórmula de Groot 71 57. Diagrama dos eixos para o cubo de Noordzij 72 58. Versões com hinting da fonte Fedra Sans Screen 73 59. Adelle, José Scaglione e Veronika Burian, 2009, Typetogether 78 60. Chaparral, Carol Twombly, 1997, Adobe 78 61. Fedra Serif, Peter Bill’ak, 2003, Typotheque 78 62. Georgia, Metthew Carter, 1996, Microsoft 79 63. FF Meta Serif, Erick Spiekermann, 2007, Font Font 79 64. Skolar, David Brezina, 2008, Rosetta 80 65. Tisa, Mitja Miklavcic, 2010, Font Font 80

Altura-x: Distância da linha de base à linha mediana de um determinado tipo, que normalmente corresponde à altura da letra x minúscula. Âncoras: Pontos de referência para o posicionamento dos acentos em relação aos caracteres tomados como base.

137

9 Lista de Imagens — 10 Glossário 136

GLOSSÁRIO

Ascendente: Projeção de uma haste vertical acima da altura-x, como no b, d e h.

Bitmap: Imagem digital em formato não inteligente.

Caixa alta: Conjunto de letras maiúsculas de um alfabeto.

Caixa baixa: Conjunto de letras minúsculas de um alfabeto.

Caractere: É o menor componente de linguagem escrita com valor semântico.

Contra forma: Espaço em branco interno de uma letra.

Pode ser fechada ou aberta.

Contraste: É a diferença entre a espessura dos traços mais grossos e finos das letras Corpo: Medida vertical de um caractere tendo como referencia o retângulo no qual ele se inscreve, cuja dimensão se mede até o topo do acento das maiúsculas, independentemente de sua aparência impressa.

Curva: Traço curvo de um caractere.

Descendente: Projeção de um traço abaixo da linha de base, como no g, j e p.

Eixo: O eixo do traço de um tipo, derivado da inclinação da pena ou instrumento utilizado para desenhá-lo.

Eixo humanista: Eixo que retrata a inclinação natural da escrita manual.

Eixo racionalista: Eixo vertical, típico.

Eme: Em mensuração linear, é uma distância igual ao tamanho do tipo.

Entrelinha: Espaço entre duas linhas de um texto composto.

Família Tipográfica: É um conjunto de fontes.

Fonte: Conjunto de tipos ou glifos.

Fundição tipográfica (type foundry): Empresa que distribui e/ou produz tipos.

Glifo: A corporização de um caractere. A aparência gráfica de um caractere Hinting: Instruções enviadas aos softwares de renderização que se aplicam aos caracteres para melhorar a sua visualização em tela com baixa resolução.

10 Glossário

66. Bookerly, Dalton Maag, 2007, Dalton Maag para Amazon 80 67. Garibaldi, Henrique Beier, 2015, Harbor Type 81 68. Malabar eText, Dan Reynolds, 2011, Linotype 81 69. Tuna, Felix Braden, Alex Rütten, 2017, Ligature Inc. 82 70. Família Bookerly 83 71. Ligaturas da Bookerly 83 72. Capitular da Bookerly 84 73. Diferenças entre Bookerly e Caecillia 84 74. Eixo racionalista na Bookerly e Caecilla 85 75. Família Tuna 86 76. Opções OpenType disponíveis na Tuna 86 77. Características da Tuna 87 78. Eixos variado da Tuna 87 79. Processo de hinting manual 88 80. Utilização de ângulos racionais 88 81. Fotos dos primeiros esboços 90 82. Rafes com as definições de estilos 98 83. Primeira vetorização da letra n no Glyphs 98 84. Vetorização das letras h e p 99 85. Vetorização das letras a, s e g na 10ª versão 98 86. Alfabeto completo caixa alta e baixa 100 87. Todos os numerais desenhados 101 88. Principais pontuações utilizadas para textos 102 89. Sinais tipográficos, matemáticos e estilísticos 102 90. Exemplo de kerning entre as letras K e e 103 91. Alguns rafes para a versão itálica 105 92. Mapa de caracteres, especimem, versões e aplicações da Aline Text 108 - 125

10 Glossário 138

139

PostScript: Linguagem de descrição de página dentro da indústria gráfica atual.

Proteção lateral (sidebearing): Espaço em branco que se encontra, no sentido horizontal, antes e depois do glifo.

Renderizar: Renderizar é o processo pelo qual se obtém o produto final de um processamento digital qualquer.

Romana: (normal, redonda, regular): Variante de uso corrente de uma família tipográfica, sem inclinação, com espessura proporcionada.

Romana inclinada (Oblíqua): É uma letra com a mesma estrutura da romana, mas com inclinação.

Script: Arquivo de programação simples destinado a ações específicas, que complementa um programa de computador que o interpreta.

Sem Serifa (sans serif): Modelo tipográfico cuja principal característica é a ausência de serifas.

Serifa: Elemento terminal, não construtivo, do traçado, em certas famílias tipográficas. Geralmente, presente nos estilos que fazem referencia à sua origem caligráfica ou lapidar.

Terminal (remate): Acabamento na extremidade do traço Tipo¹: Na impressão tipográfica com tipos móveis, cada peça de metal utilizada para compor os textos.

Tipo² (typeface): Coleção de caracteres tipográficos que compartilham as mesmas características de design, como peso, largura, inclinação, modulação de traço.

Tipografia¹: Conjunto de práticas e processos envolvidos na utilização de símbolos visíveis relacionados aos caracteres ortográficos e para-ortográficos para fins de reprodução de textos.

Tipografia²: Disciplina dedicada ao estudo, ao uso e à criação de letras, alfabetos e sistemas de escrita.

Tipógrafo: Na impressão manual, o trabalhador que compõe com tipos de chumbo ou, por extensão, qualquer pessoa que utilize tipos para compor um texto.

Designer de tipos (Type Designer): Profissional da área de design que desenha tipos.

10 Glossário

Humanista: Modelo tipográfico que faz referencia aos tipos do renascimento italiano, procedentes da escrita carolíngia. Também chamado de veneziano ou garalde Itálica: Variante de uma família tipográfica, com forma e estrutura diferente da romana com certa inclinação natural, que faz referência à escrita cursiva ou contínua.

Crenagem (kerning): Compensação de espaçamento entre pares de caracteres específicos.

Legibilidade (legibility): Grau de reconhecimento dos caracteres de uma fonte.

Leiturabilidade (readability): Grau de conforto experimentado pelo leitor durante o processo de leitura.

Ligatura: Glifo resultante da união de, geralmente, dois caracteres.

Linha base: Linha sobre a qual se apoiam os caracteres do alfabeto, correspondente ao limite inferior da altura-x de uma fonte.

Mapa de caracteres: Conjunto de caracteres na codificação de uma fonte.

Negrito (preto, bold): Variante de uma família de tipos com mais peso do que a regular.

Númerais alinhados (lining figures): Aqueles que têm todos a mesma altura, como as letras de caixa alta.

Numerais desalinhados (proporcional figures): Numerais que se caracterizam por ter o espaçamento proporcional à largura de seu desenho.

OpenType: Formato vetorial de fontes tipográficas, essencialmente uma extensão do TrueType que permite maior flexibilidade e o armazenamento de curvas Bézier cúbicas e quadráticas Overshoot (compensação ótica): O grau em que traços curvos e diagonais se projetam além da linha de base ou altura-x, compensando o efeito óptico de encolhimento que resultaria se elas fossem da mesma dimensão.

Peso (weight): Expressão pela qual se denominam as variantes de espessura de uma família de fontes.

Ponto: Unidade de medida em sistema duodecimal.

Traço: Cada m dos elementos com os quais um caractere e construído TrueType: Formato de fontes digitais feito para competir com o PostScript.

Unicode: Consórcio que regulamenta e implementa a aplicação da norma ISO/IEC 10646 e que atribui um código único a cada um dos caracteres do mundo.

Versaletes (Small caps): Letras que tem a forma das maiúsculas, mas o tamanho das minúsculas.

Como forma de complementar este trabalho, o autor entrou em contato com designers de tipos brasileiros e internacionais e lhes fez algumas perguntas com relação aos seus processos de desenvlvimento de suas famílias tipográficas. As respostas recebidas até então foram transcritas assim como a troca de correspondências entre autor e entrevistados e seus textos integrais poderão ser lidos a seguir.

DANIEL SABINO (BLACKLETRA) Daniel Sabino para Julio Claudius – 20/05/2017 Oi Julio, acho que para te responder todas essas perguntas detalhadamente eu precisaria de um curso inteiro, me desculpe pelas respostas um tanto incompletas. Podemos aprofundar em uma outra oportunidade, mas espero que já ajude, um abraço!

2. Como costuma ser o seu processo de desenvolvimento de uma família tipográfica? Vc costuma pegar referên-

4. Quais letras vc costuma desenhar primeiro e por quê?

E de qual peso? plinova / HONDA, mas há muitas excessões a isso (regular).

5. Qual o processo que vc costuma utilizar para espaçar e depois fazer o kerning? Vc utiliza alguma ferramenta, que te auxilia nos pares e palavras em outros idiomas?

O espacejamento eu não uso nenhum site ou ferramenta, faço na unha. Kerning eu uso Met-ricsMachine.

6. Que eu me lembre naquela palestra que vc deu no SENAC, vc mencionou que contra-tava uma pessoa para fazer o hinting das suas fontes. Quanto em média custa em média um trabalho desse tipo?! Vc solicita esse serviço para todas as suas famílias? Não é possível fazer hinting manual em minhas fontes de varejo hoje em dia em função do alto custo. Se você encontrar alguém bom que tope fazer por R$ 2K cada peso, está um bom preço.

7. Vc se baseia em alguma teoria como a do Luc(as) de Groot para fazer as interpolações ou extrapolações?

Quantas masters vc costuma criar? Não uso nenhuma teoria antes de interpolar (e procuro evitar extrapolações).

O número de masters varia, o máximo que já trabalhei ao mesmo tempo foi 6 (na Gothiks).

141

140

1. Quando vc decidiu se tornar um Type Designer e por quê? Em 2011, ao fazer a Karol, percebi que era isso que eu amava fazer.

3. Se eu não me engano, vc utiliza o Glyphs para criar seus projetos, certo? Tem algum plug-in que vc costuma utilizar que te ajuda durante o desenvolvimento? A exemplo dos plug-ins space bar e speed punk. Uso Glyphs e Robofont, ambos tem vários plugins disponíveis (o speed punk especificamente eu não uso).

11 Apêndice - Entrevista com Type Designers

11 Apêndice - Entrevista com Type Designers

APÊNDICE - ENTREVISTAS COM TYPE DESIGNERS

cias, esboços a mão, ou vai direto para o computador?

Ou vc sempre parte de um briefing para iniciar qualquer projeto? Normalmente parto de um briefing, e gosto de ir direto para o computador.

8. Como está sendo a sua experiência com o Fontstand?

Essa plataforma está te dando o retorno esperado? Em termos financeiros não mas eu acredito no Fontstand para o futuro.

9. Para quem está iniciando a sua primeira fonte, qual dica vc daria? Precisa ter muita paciência, não se afobe e não ceda à tentação de publicar projetos prema-turos.

1. Quando vc decidiu se tornar um Type Designer e por que? Eu lembro do dia em que li um artigo que falava sobre um type designer, acho que era Fabio Haag. Eu estava em alguma sala da UFSM, ali por volta de 2007, 2008, e acho que era algo sobre uma fonte dele que havia sido premiada. Isso antes de ele ir pra Dalton Maag. Aquilo me impressionou profundamente. Eu tive uma convicção na mesma hora: "é isso que eu vou fazer pelo resto da vida".

O tipo de epifania por ter encontrado um propósito que transcende a própria existência.

Fora o devaneio filosófico, desde criança eu tinha uma atração por alfabetos. Criava minhas próprias línguas imaginárias e o ponto alto era a criação dos glifos dessas escritas. Mas naquele dia, na UFSM, foi a grande "queda da ficha". Depois, então, como TCC, eu fiz minha primeira família, a Basel Sans. Tosca, a princípio, pois nessa época não havia gente no curso como o Volnei Matté.

Fiz de modo totalmente independente, catando aqui e ali as poucas referências que podia, e não tinha ainda nenhuma experiência de mercado. Hoje já faz pelo menos uns 2 anos que eu vivo de fontes, algo que eu achava quase impossível no início.

3. Fontlab, Robofont ou Glyphs? Algum plug-in que vc costuma utilizar em algum desses programas? Já usei também aplicativos como FontMaker e Fontforge, por curiosidade. Mas ainda prefiro Fontlab. Conheço o Glyphs, mas mexo nele só de vez em quando. O Fontlab tem tudo o que eu quero, sem sobra nem excesso, e permite

143

142

Isac Corrêa para Julio Claudius – 23/05/2017

11 Apêndice - Entrevista com Type Designers

11 Apêndice - Entrevista com Type Designers

ISAC CORRÊA RODRIGUES (ISACO TYPE)

2. Como costuma ser o seu processo de desenvolvimento de uma família tipográfica?! Vc costuma pegar referências, sketchbook/ esboços a mão, ou costuma ir direto para o computador? Ou vc sempre parte de um briefing?

Bom, a minha "luta" com o processo de desenvolvimento já começou no TCC. Ali eu montei uma espécie de metodologia própria. Era um dos objetivos da pesquisa, porque não haviam metodologias pra isso. São muitos detalhes, e o método se aprimora sempre... cada vez surge um problema que pode se tornar uma rotina dentro da metodologia. A última novidade é que eu comecei a prestar ainda mais atenção a fontes históricas, provadas pelo tempo. Realmente quero entender o que faz elas funcionarem. E estou dando mais atenção ao desenho da fonte ainda no papel.

Por exemplo, como acontece com a Trinité, de Bram de Does. Nos desenhos dela vemos que a fonte inteira está ali, pronta no papel, muito antes de ser digitalizada. A Extrait tem muito disso. Quando eu comecei a desenhar no computador, o DNA dela já estava uns 80% pronto no papel. A Monarcha também teve muito desenho antes. E isso tem muitas vantagens.

Uma delas é a velocidade com que se pode desenhar a mão. Então você tem uma resposta muito mais rápida sobre o estilo que está procurando. Existe um certo mito de que o desenho em ambiente digital é rápido, mas não, ele só é rápido pra finalizações, não pra criar novos conceitos. A mão permite fazer muitos testes em pouco tempo.

Então, o segredo é achar o conceito no papel, e só quando este estiver ok, finalizar no computador.

11 Apêndice - Entrevista com Type Designers 144

7. Vc se baseia em alguma teoria como a do Luc(as) de Groot para fazer as interpolações ou extrapolações? Ou vai na raça/olho? Já me baseei na do Luc(as) de Groot mas hoje prefiro fazer interpolação 'simétrica' mesmo (200, 400, 600, etc), sem complicação. E não gosto muito de extrapolação, nem com ajuste posterior.

8. Como está sendo a sua experiência com o Typekit, Fontown? Essas plataformas estão te dando o retorno esperado? Acho que o Typekit é o novo MyFonts em vários aspectos. Nesse ponto a Adobe tem todos os elementos certos para o sucesso - faz os programas gráficos mais usados no mundo e vende as fontes para serem usadas neles, num modelo de distribuição sobre o qual eles tem todo o controle. Essa forma se baseia no uso remoto das fontes, a pessoa não fica com o arquivo. Essa combinação é genial. Por isso, apesar da burocracia, ter um contrato com o Typekit é muito gratificante.

Já a Fontown está no início, ainda não deu pra ver como será o retorno. Mas de modo geral acho que esse é o modelo do futuro do mercado tipográfico, citando tam-

145

5. Vc costuma já espaçar a fonte durante seu desenho ou apenas no final de ter todos os caracteres principais desenhados? Qual sua relação com o kerning?!

Eu costumo ir espaçando desde o início, mas só quando tenho um set satisfatório é que vou dar o espaçamento final. Enquanto esse momento não chega, vou espaçando pra poder ver as palavras se formarem. Acho que não é possível desenhar os caracteres sem ir espaçando desde o início. O vazio faz parte do desenho.

Kerning é uma das últimas coisas que eu faço, só quando a fonte está 100% espaçada.

Nesse ponto o espaçamento puro precisa funcionar, precisa estar bom de ler mesmo sem kerning. Quando chega o momento de fazer kerning, eu divido todo o character set em grupos, por exemplo, 'maiúsculas', 'sinais monetários', 'números', etc, lanço essas variáveis num

algoritmo bem simples que fiz em PHP e faço relações entre eles. Por exemplo, fazer os pares de maiúsculas com minúsculas. Esse programa gera os pares que preciso revisar. É a fase mais chata do desenvolvimento, por isso minha relação com kerning é meio conturbada. Preciso sempre revisar tudo que for possível, e é desgastante.

6. Como vc costuma fazer o hinting de suas fontes (automático, manual)? Já me aventurei com hinting manual no FontLab, mas chato demais. Tentei entender o Visual TrueType da Microsoft, mas continua grego pra mim.

Já fiz hinting semi-manual, onde você configura alguns parâmetros e automatiza o restante, mas ainda assim é demorado. Mas daí tem essas maravilhas de autohinting que estão cada vez melhores, que vem no AFDKO, ou o ttfautohint, e aí só uso essas.

11 Apêndice - Entrevista com Type Designers

fazer algumas configurações mais "internas" que eu acho importantes.

Já tentei usar plugins pra ver se atalhava certas coisas. Tem algumas coisas engraçadas também, como uma vez que escrevi um programa em Visual Basic, na total ignorância, pra me ajudar com interpolação... e só depois descobri que o Fontlab já fazia o que eu precisava.

Mas de uma forma geral não confio muito nessas automatizações. Prefiro fazer eu mesmo cada detalhe, pra ter a certeza do que estou produzindo.

4. Quais letras vc costuma desenhar primeiro e por que?

Em romanas começo com 'n' e 'o', do modo bem tradicional. Porque posso ver nesses glifos o 'espírito' da fonte, e já dá pra ter uma noção do espaçamento. Já em itálicas prefiro começar pelo 'a', antes de 'n' e 'o', pelo mesmo motivo. Exceções a isso ocorrem quando você tem uma inspiração do nada e quer desenhar um glifo totalmente diverso, como um "w" ou um "g" pra ver. Mas assim mesmo, logo depois será preciso recomeçar com 'n' e 'o' no mesmo estilo.

10. O que vc mais gosta e o que vc menos gosta dentro da área de type design? E do mercado de varejo? O que eu mais gosto é ver uma fonte minha funcionando. O processo em si é bom também, sobretudo o momento de formar

11 Apêndice - Entrevista com Type Designers

11. Fontes que disponibilizam um peso gratuitamente, ou aquelas que dão descontos enormes em toda a família?

Eu tenho famílias com pesos gratuitos, e acho que é uma ideia interessante pra chamar a atenção do comprador.

Já dei também descontos enormes, acho que até de 70%, algo assim. Mas estou deixando essa prática de lado. Nem descontos de 50% estou querendo oferecer mais. Porque é uma relação desgastante, fazer fontes não é fácil.

E nesse momento não vejo a possibilidade de oferecer fontes boas a preços muito baratos. Ou faço bem e cobro bem, ou terei que me forçar a fazer mais rápido, com menos reflexão, com menos glifos e testes, pra cobrar menos.

147

146

9. Poderia me contar um pouco mais sobre seu último projeto, a família Extrait? Como o nome sugere, Extrait é o "extrato" de diversas coisas que sempre me agradaram no type design. Nela dá pra ver referências ao estilo holandês, aspectos bem antigos como a inspiração na "cursiva humanistica" de Arrighi e outras características bem caligráficas. Tem alguns toques de Caslon, e outros componentes bem geometricos... Pode parecer estranho, mas desde o início penso na Extrait como um perfume, onde diversas notas se misturam num aroma exclusivo, que tem, nas romanas, seu aspecto masculino e nas itálicas o feminino. Essa brincadeira faz parte da divulgação da fonte, que é "for her" e "for him".

Enfim, creio que ela não se encaixa direito em uma época ou estilo definido. Foi o projeto mais divertido, mais animador que eu já fiz - antes tinha sido a Monarcha - e estou satisfeito com o resultado. Ela se comporta bem nos testes e espero que impressione a todos.

o conceito. Menos kerning, que eu acho meio entendiante.

Mas nada é melhor do que ver pessoas comprando, usando e dizendo que a fonte serviu para o que ela queria.

E se ganhar reconhecimento extra, melhor ainda! Desde o início a Isaco Type aparece em prêmios e eventos, como o Tipos Latinos, a Bienal Brasileira de Design e o Prêmio Bornancini, em cada um pelo menos umas 3 vezes.

O que mais admiro no mercado de varejo é que ele é baseado na confiança. Nada garante que uma pessoa que comprou uma licença não use em quantos locais quiser.

Mas frequentemente eu vejo pessoas adquirindo várias licenças em uma só compra. Isso mostra que o público que compra fontes respeita quem faz. E o mercado inteiro gira mais ou menos em torno disso. E o que menos gosto nesse mercado é, como disse, o crescente barateamento das fontes.

Tem outra coisa acontecendo nesse instante, que tem sido bastante animador, que é o formato OpenType Variations. Quando encontrar o mercado, ele vai mudar ainda mais o modo como vendemos fontes. É por isso que eu acredito que estamos vendo o fim de um capítulo da tipografia e o começo de outro.

11 Apêndice - Entrevista com Type Designers

bém o Fontstand (onde eu não estou). Minhas fontes estão em mais umas 10 distribuidoras tradicionais, mas não sei como elas irão sobreviver se não se renderem a esse novo modelo. O MyFonts, por exemplo, o querido de todos há muitos anos, se tornou uma imensa selva tipográfica com descontos violentos de 80-90%, além de bundles com 500 fontes custando quase nada. Por isso passei a chamar o Myfonts carinhosamente de MyBundles. É preciso muito malabarismo pra sobreviver nesse meio sendo uma foundry pequena. E ninguém ganha com isso. O usuário só ganha mais do mesmo em enormes quantidades, e quem desenvolve não vê seu esforço render financeiramente.

EDUARDO OMINE Eduardo Omine para Julio Claudius – 25/05/2017

2. Nas suas famílias como a Nabuco, Maest e a Beret, foi utilizado também algum tipo de automação para criar os diferentes pesos, como a teoria de Groot, Impallari ou outros? Ou foram desenhos separados? Não sei se entendi a questão da automação. Eu desenhava o peso mais leve e o peso mais pesado da família tipográfica. Depois, gerava os pesos intermediários usando a interpolação do software. Para o cálculo dos pesos intermediários, a princípio, eu usava a fórmula do de Groot, mas não era algo seguido à risca.

3. Qual foi o tempo que vc gastou em médias nesses projetos tipográficos? Tenho arquivos da Maest de março/2003 a abril/2005. Da Nabuco, de outubro/2004 até novembro/2006. Foram cerca de 2 anos desde a idéia inicial até a finalização. Mas não trabalhei direto nesses projetos nesses períodos.No caso da Beret, trabalhei mais focado, e o tempo de trabalho ficou concentrado entre setembro/2003 e dezembro/2003. Além disso, minha intenção era de mandar a Beret para o concurso da Linotype, e o concurso tinha um deadline. Isso contribuiu para que o tempo fosse mais curto.

5. Já ouviu falar de variable fonts ou fontes responsivas?

Sim. Se compararmos as Variable Fonts com as fontes Multiple Master, acredito que o contexto atual é bem mais favorável para que esse novo formato tenha sucesso.

6. O que vc mais te agradava quando trabalhava com type design? E o que menos te agradava? É difícil dizer algo específico que mais agradava. Acho que o processo todo, de construir uma família tipográfica a partir de uma idéia própria, era algo que me trazia bastante satisfação. Quanto às partes que menos me agradavam, como respondi na pergunta 4, eram os ajustes de espaçamento/ kerning e o desenho de small caps e indicadores ordinais.

7. Financeiramente, as fontes que vc disponibilizou para venda em sites como Myfonts, Linotype etc, trouxeram o retorno financeiro que vc imaginava? Não. Acho que não me dediquei o suficiente na divulgação e marketing das minhas fontes. Também poderia ter desenvolvido fontes em categorias mais "vendáveis", como as sem-serifas humanistas. Além disso, comecei a trabalhar com design e programação web, o que começou a dar retorno financeiro e satisfação pessoal/profissional mais imediatos, o que me levou a deixar de lado o type design.

149

148

1. Nas fontes que vc criou, como foi o processo de hinting (automático, manual)? Qual software vc utilizou, Fontlab, Robofont, glyphs? O processo de hinting foi automático, usando a ferramenta do AFDKO. Para o desenho das letras, eu usava o Fontlab mesmo. Se não me engano, o Robofont e o Glyphs não existiam na época (trabalhei com type design até mais ou menos 2007).

11 Apêndice - Entrevista com Type Designers

11 Apêndice - Entrevista com Type Designers

Boa tarde, Julio, seguem minhas respostas. Espero que sejam úteis. Abs!

4. Caso se lembre, quais foram as suas maiores dificuldades durante o desenvolvimento dessas fontes? Teve algum erro que te causou problemas numa etapa mais adiante do desenvolvimento? Não lembro de algum erro específico. Há muitos "problemas" que aparecem no processo de desenvolvimento de uma família tipográfica.

Mas não vejo essas questões como "erros". Fazem parte do trabalho. De qualquer forma, dois aspectos que considero bem difíceis de acertar em type design são: (1) espaçamento e kerning; e (2) peso das small caps e dos indicadores ordinais (ª, º, etc).

150

11 Apêndice - Entrevista com Type Designers

8. Na sua opinião, há muitas fontes a venda? Ainda precisamos de novas fontes? Há muitas fontes à venda no mercado sim. Certamente há mais fontes disponíveis hoje do que tínhamos antes. Mas isso não quer dizer que não precisamos de novas fontes. Precisamos de novas fontes sim, sempre precisaremos. Só que o grande número de fontes disponíveis no mercado significa que o mercado se torna mais exigente em relação à qualidade e à originalidade de novas fontes.

9. Qual dica vc daria para quem está querendo entrar nesse mercado de type design? Acho que não sou a pessoa mais indicada p/ esta pergunta, já que não atuo mais nesse mercado. De qualquer forma, vejo que hoje o type design envolve muitos processos, desde o próprio desenho das letras, passando pela produção das fontes, até a distribuição das fontes. Talvez uma dica seja buscar parcerias com outros profissionais e foundries para chegar num produto final com ▪

Este livro foi composto em Aline Text nas suas versões regular, bold e itálica, projetadas por Julio Claudius como produto de seu trabalho de conclusão de curso.

Impresso em papel offset 120g/m² e Papel couchê fosco 300 g/m², pela gráfica Printi, São Paulo, novembro 2017.

Tiragem de 5 exemplares