anatomia dos tipos - josewilker.com · linha de fonte 1. linha da ascendente (ascender top line) ou...

20
21/08/2013 1 Prof. José Wilker 1 Classificação e Anatomia dos Tipos 2 O que é Tipografia? 3 Tipografiaconceito 1 A tipografia (do grego typos — “forma” — e graphein — “escrita”) é a arte e o processo de criação na composição de um texto, física ou digitalmente. 4 Tipografiaconceito 2 O objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa ou digital. A tipografia é a arte de selecionar o tipo de fonte ideal para os projetos

Upload: lebao

Post on 24-Nov-2018

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

1

Prof. José Wilker

1

Classificação e Anatomia dos Tipos

2

O que é Tipografia?

3

Tipografiaconceito 1

A tipografia (do grego typos —

“forma” — e graphein — “escrita”) é

a arte e o processo de criação na

composição de um texto, física

ou digitalmente.

4

Tipografiaconceito 2

O objetivo principal da tipografia é

dar ordem estrutural e forma à

comunicação impressa ou digital. A tipografia é a arte de selecionar

o tipo de fonte ideal para os

projetos

Page 2: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

2

5

Tiposconceito 1

Tipo na área da tipografia, refere-

se aos tipos móveis das prensas

mecânicas para impressão de

textos. Podem ser feitos de dois

materiais: os tipos de metal (ou

tipos fundidos) e de madeira.

Tipo é , também, o termo referente

aos caracteres das letras. 6

Tiposconceito 1

Prof. José Wilker

7

Classificação e Anatomia dos Tipos

10

Classificação das Fontes

Com serifa

Sem Serifa (Sans-Serif)

Cursiva (script)

Modernas

Display

Page 3: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

3

11

Classificação das Fontes

Com serifa

Ex: Times new roman, Garamond, Bodoni, Didot e Caslon

12

Classificação das Fontes

Com serifa

13

Classificação das Fontes

Sem serifa

Ex: Helvética, Arial, Eurostile, Franklin, Optima, Univers, Kabel, Futura, Gill Sans,

Avantgarde, Optima, Fruitiger.

14

Classificação das Fontes

Cursiva (Script)

Ex: English111 Vivace BT, TypoUpringht BT e Amazone BT

Page 4: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

4

15

Classificação das Fontes

Modernas

Ex: East Side, Elif.

16

Classificação das Fontes

Display

Ex: East Side, Elif.

17

Classificação das Fontes

Legibilidade e Leiturabilidade

maria das carnes

maria das carnes

18

Classificação das Fontes

Legibilidade e Leiturabilidade

maria das carnes

maria das carnes

Page 5: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

5

19

Linha de Fonte

1. Linha da ascendente (ascender top line) ou linha de topo

2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

3. Altura-de-x (h-height ou middleline) ou linha mediana

4. Linha da Base (baseline)

5. Linha da descendente (descender line ou beardline) ou linha de

fundo 20

21 22

Page 6: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

6

23

Aplicação da Tipografia

Em marcas: Logotipos

24

Exemplos de Logotipos

25

Exemplos de Logotipos

26

Exemplos de Logotipos

Page 7: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

7

27

Exemplos de Logotipos

28

Exemplos de Logotipos

29

Exemplos de Logotipos

30

Exemplos de Logotipos

Page 8: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

8

31

Exemplos de Logotipos

32

Tipografia Urbana

33

Tipografia Urbana

34

Alfabeto da Pichação

Page 9: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

9

35

Tipografia Urbana

36

Tipografia Urbana

37

Tipografia Urbana

38

Tipografia Urbana

Page 10: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

10

39

Tipografia Urbana

40

Tipografia Urbana

41

Tipografia Urbana

42

Tipografia Urbana

Page 11: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

11

43

Tipografia Urbana

44

Tipografia Urbana

45

Desenhos com Tipos

46

Outros exemplos de Tipografia

Author: Luke Lucas

Page 12: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

12

47

Outros exemplos de Tipografia

48

Outros exemplos de Tipografia

Author: Alex Trochut

49

Outros exemplos de Tipografia

50

Outros exemplos de Tipografia

Page 13: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

13

51

Outros exemplos de Tipografia

52

Aplicação em projetos

53

Aplicação em projetos

54

Aplicação em projetos

Page 14: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

14

55

Aplicação em projetos

56

Aplicação em projetos

57

Aplicação em projetos

58

Aplicação em projetos

Page 15: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

15

59

Aplicação em projetos

60

Aplicação em projetos

61

Aplicação em projetos

62

Aplicação em projetos

Page 16: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

16

63

Aplicação em projetos

64

Aplicação em projetos

65

Aplicação em projetos

66

Aplicação em projetos

Page 17: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

17

67

Aplicação em projetos

68

Aplicação em projetos

69

Aplicação em projetos

70

Aplicação em projetos

Page 18: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

18

71

Aplicação em projetos

72

Aplicação em projetos

73

Aplicação em projetos

74

Aplicação em projetos

Page 19: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

19

75

Aplicação em projetos

76

Aplicação em projetos

77

Aplicação em projetos

78

Aplicação em projetos

Page 20: Anatomia dos Tipos - josewilker.com · Linha de Fonte 1. Linha da ascendente (ascender top line) ou linha de topo 2. Linha da caixa-alta (cap line ou cap height) ou linha de versalet

21/08/2013

20

79

Aplicação em projetos