The Book of Typographic Species

•

O livro das Espécies Tipográficas é um aplicativo para iPad desenvolvido como Trabalho de Conclusão de Curso em Desenho Industrial - Programação Visual, na UFSM, sob orientação de Volnei Matté, em 2012.

Nesse projeto, a tipografia cinética - animações com tipografia - foi explorada como principal recurso na transmissão de um conteúdo didático sobre tipografia.

O aplicativo é composto por 11 animações e 8 telas com textos e elementos interativos. Todos os textos e imagens são de autoria própria, elaborados com base no conteúdo do referencial teórico do TCC.

The Book of Typographic Species is an app for iPad developed as Final Graduation Work in Graphic Design at UFSM, under the supervision of Volnei Matté in 2012.

In this project, kinetic typography - typography animations - was explored as its main feature in the transmission of educational content about typography.

The app consists in 11 animations and 8 screens with text and interactive elements. All text and images are of own making, prepared based on the content of the theoretical part of Final Graduation Work.

TEMÁTICA/ THEME

Dessa forma de ver e falar dos tipos como seres vivos, surgiu a temática "Livro das espécies Tipográficas".

Inspirado no livro "A Origem das Espécies" de Darwin, esse aplicativo usa a metáfora de livro de ciências para discorrer sobre a Evolução, Anatomia, Classificações e Relações entre as Espécies Tipográficas.

“Letters have tone, timbre and character” (BRINGHURST, 2005)

From this way of seeing and speaking of the types as living beings, emerged the theme "Book of Typographic Species".

Inspired by the Darvin's book" The Origin of Species", this app uses the science book metaphor to talk about the evolution, anatomy, classifications and relations between Typographic Species.

CONCEITO VISUAL/ VISUAL CONCEPT

Para dar um visual de livro antigo ao conteúdo, outros elementos do livro de Darwin foram utilizados como referência, tais como a textura do papel, as cores e as formas.

Outra referência visual são os pôsters tipográficos vitorianos - século XIX, período da Revolução Industrial - os quais misturavam tipos de tamanhos, estilos e espessuras diferentes para separar o conteúdo e utilizavam linhas para quebrar o texto ou enfatizar algum aspecto.

To give a visual of old book, elements of Darwin's book were used as a visual reference, such as the texture of the paper, the colors and shapes.
Another visual reference are the victorians typographic posters - nineteenth century, during the Industrial Revolution - which mixed types of different sizes, styles and thicknesses to separate content and used lines to wrap text or emphasize some aspects.

Para os textos, foram escolhidas duas tipografias diferentes: A Adelle Basic Bold, da Type Together (2010), e a Lora, da Cyreal (2011). Ambas são tipografias contemporâneas de personalidade forte, que funcionam tão bem na tela quanto em impressos e possuem detalhes que as fazem únicas, mas trazem características que remetem às tipografias do século XIX. A Adelle - uma egipciana - por suas serifas pesadas, fortes e resistentes. A Lora, por apresentar características das Neo Transicionais, tais como o contraste entre traços grossos e finos, as serifas quase quadradas, os terminais em círculo, o eixo quase vertical.

For texts, two different types were chosen: The Type Together’s Adelle Basic Bold (2010), and the Cyreal’s Lora (2011). Both are contemporary types with strong personality, which work so well on screen and print and have details that make them unique. In addiction, bring characteristics that refer to types of the nineteenth century. The Adelle - A egyptian typeface - by his heavy, strong and resistent serifs. The Lora, for presenting characteristics of Neo Transitional such as the contrast between thick and thin strokes, the almost square serif, terminals in a circle, the almost vertical axis.

CONTEÚDO/ CONTENT

O aplicativo, dividido em 4 capítulos, aborda os seguintes tópicos:

• Evolução da Tipografia
• Anatomia dos Tipos
• Classificação dos Tipos
• Espacejamentos

Todo o material de tipografia foi reescrito de forma a se adequar à temática escolhida. Portanto, foram criadas diversas analogias entre seres humanos e tipografia para explicar o conteúdo didático de forma divertida. Cada capítulo possui uma animação de introdução, uma tela com elementos interativos e uma animação de conteúdo.

The app is divided into four chapters, about the following topics:

• Typography Evolution
• Type Anatomy
• Type Classification
• Spacing and kerning

All the typography content was rewritten in order to fit the chosen theme. So many analogies were created between humans and typography to explain the educational content in a fun way. Each chapter has an intro animation, a screen with interactive elements and animated content.

CAPÍTULO I: Evolução das Espécies Tipográficas

O capítulo sobre a Evolução das Espécies Tipográficas é um registro de como a escrita ocidental foi mudando ao longo do tempo, dando origem às letras nas formas como conhecemos hoje.

CHAPTER I: Evolution of Typographic Species

The chapter about Evolution of Typographic Species is a demonstration of how the western writing has changed over time, resulting in letters in the forms we know today.

Tela da animação de introdução ao conteúdo sobre Evolução das Espécies Tipográficas/
Printscreen of intro animation to the content about Evolution of Typographic Species.

Tela da animação de conteúdo. Nessa animação, uma longa linha do tempo vai passando enquanto as formas

das letras vão se modificando até se tornarem o que conhecemos hoje/
Printscreen of animated content. In this animation, a long timeline passes while forms of letters are modified to become what we know today.

Por fim, a animação aborda as variações ou parâmetros tipográficos (Peso, Postura, Largura e Estilo) de forma bem humorada/

Finally, the animation talks about variations or typographical parameters (weight, posture, width and style) in a fun way.

CAPÍTULO 2: Anatomia e Fisiologia das Espécies Tipográficas

O termo anatomia, em livros de ciências, aparece quase sempre ao lado de fisiologia. Isso porque, enquanto a anatomia estuda as partes do corpo, a fisiologia estuda as funções dos sistemas que o compõem. Em tipografia, utiliza-se o termo anatomia para estudar as partes básicas que compõem cada letra. Aqui, utilizou-se também o termo fisiologia, valendo-se da analogia com o corpo humano para explicar a parte estrutural necessária para o funcionamento dos tipos.

CHAPTER 2: Anatomy and Physiology of Typographic Species

The term anatomy, on science books, appears almost always beside physiology. This is because while the anatomy studies the parts of the body, physiology studies the functions of the systems that compose it. In typography, it uses the term anatomy to study the basic parts that compose each letter. Here, also was used the term physiology, in analogy to the human body, to explain the structural part required for the functioning of types.

Tela da animação de introdução ao conteúdo de Anatomia e Fisiologia das Espécies Tipográficas/

Printscreen of intro animation to the content about Anatomy and Physiology of Typographic Species.

Tela da animação de conteúdo sobre a Anatomia dos Tipos/

Printscreen of animated content about Type Anatomy.

Tela da animação do conteúdo sobre Fisiologia dos Tipos/

Printscreen of animated content about Type Physiology.

CAPÍTULO 3: Taxonomia das Espécies Tipográficas

Na ciência, a área que estuda a classificação dos seres vivos é denominada Taxonomia. Dessa forma, adaptou-se o sistema de classificação tipográfica para as classes taxonômicas dos seres vivos, mantendo termos como "classe" para classes tipográficas e "família" para famílias tipográficas.

CHAPTER 3: Taxonomy of Typographic Species

In science, the area that studies the classification of living beings is called taxonomy. So, we adapted the typographic classification system for taxonomic classes of living beings, keeping terms like "class" for typographic classes and "family" to type families.

Tela da animação de introdução ao conteúdo sobre a Taxonomia das Espécies Tipográficas/

Printscreen of intro animation to the content about Taxonomy of Typographic Species.

Tela da animação de conteúdo sobre a Classificação Taxonômica dos Tipos/

Printscreen of animated content about Taxonomic Classification of Types.

Características das espécies de diferentes Classes do Filo Góticas/

Characteristics of species of Filo Gothic different classes.

CAPÍTULO 4: Organizações Sociais das Espécies Tipográficas

Sobre o relacionamento entre os tipos, buscou-se analogias com as relações e formas de vida em sociedade dos seres vivos. Assim como os seres humanos, as organizações entre seres tipográficos da mesma espécie se estabelecem em quatro níveis diferentes: pares (kerning), grupos (letras em uma palavra/ tracking), comunidades (palavras em uma frase; grupos que convivem em um mesmo espaço) e sociedades (entrelinhas) onde diversas comunidades convivem juntas obedecendo a um alinhamento.

CHAPTER 4: Social Organizations of Typographic Species

About the types relationship, we seek analogies with living beings relations and ways of life in society. Just like human beings, the organizations between types of the same species are established at four different levels: pairs (kerning), groups (letters in a word / tracking), communities (words in a sentence; groups that coexist in the same space) and societies (leading) where different communities live together following an alignment.