SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
TIPOGRAFIA
DIGITAL
AULA T14 LABM1
Mário Vairinhos
Leonardo Pereira
Andreia Sousa
Fontes:
- Design for the Web, Parte 3
- https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/
- http://tipografos.net/
- https://www.thoughtco.com/typeface-anatomy-basics-explore-parts-of-letters-
1074901?utm_source=Pinterest
- https://typedecon.com/blogs/type-glossary/
- Treasury of Alphabets and lettering, Jan Tschichold
COLUNA TRAJANA
FINAL DO SÉCULO I AC
Após evolução ao longo de 100 anos,
no final do século I AC, as letras
romanas atingem o nível mais alto de
perfeição
COLUNA TRAJANA
LETRAS CAPITAIS
Devido à sua elegância e cuidado
na proporcionalidade serviu de
matriz de inspiração às fontes
desenhadas pela cultura ocidental.
ESCRITA CURSIVA
ROMANA
É uma escrita à mão usada no
período romano até à idade
média.
MINÚSCULA
CAROLÍNGIA
Século XIX
Desenvolvida pelos monges
benedictinos (Alcuin de Iorque), na
Abadía de corbie, região de Paris,
é um marco importante na
tipografia ocidental. Define a
matriz do sistema de minúsculas
usadas atualmente no mundo
ocidental.
Baseia-se no alfabeto cursivo
romano.
CARACTERES MÓVEIS
Imprensa de Gutenberg
CARÁTER E GLIFO
- O Caráter é definido pela sentido da linguagem enquanto que o
glifo é definido pela sua aparência.
- É o elemento ou unidade da linguagem escrita, possui um valor
semântico o qual é independente do modo particular que pode
ser grafado.
- O glifo é uma representação gráfica (desenho) de um caráter ( ou
mais).
a a a a
Exemplos de vários glifos
do caráter a do alfabeto
latino
A FONTE
A fonte (ou tipo) é um conjunto de glifos necessários à escrita
contendo todas as letras do alfabeto, números e marcas, os quais
possuem um peso, estilo, largura, postura ornamentação únicos.
FAMÍLIA DE TIPOS
TYPEFACE
Um família de tipos é um conjunto de fontes que partilham um estilo
gráfico comum e um conjunto de características de design.
PRINCIPAIS ATRIBUTOS
Corpo size designa a dimensão (1pt = 1/72DPIs)
peso weigth
designa o rácio entre a largura do traço
(espessura) e a sua altura.
Uma fonte de peso médio possui um rácio
de aproximadamente 15%, uma fonte light
cerca de 10%, enquanto que uma fonte a
negrito (bold) tem um rácio superior a
20%.
largura width ou strech designa
o rácio entre a largura e a altura
da fonte.
ANATOMIA DO TIPO
Conjunto de conceitos e propriedades que constituem a fonte
tipográfica.
Linha das ascendentes
a linha horizontal onde todas
as ascendentes das letras
terminam. Ascendentes designam os
traços verticais que nas minúsculas
sobressaem em altura relativamente
à linha de base. As letras
ascendentes são: t d f h k l b
Linha das descendentes
a linha horizontal onde todas
as descendentes das letras
terminam (descendente são os
traços verticais que nas minúsculas
se prologam abaixo da linha de
base). As letras descendentes são:
q y p g j
Linha média (altura-x)
a linha horizontal que define a altura
normal da fonte.
Tipicamente as letras seguintes têm
a mesma altura:
w e r u i o a s z x c v n m
haste
stem
O principal traço
vertical da letra maiúscula.
Existem duas hastes na
letra H e na letra V. Define
o corpo da letra.
espora
spur
pequena projeção
curvas dos braços do
final letra.
Ápice
apex
O topo do caráter onde se
encontram as hastes
verticais. Pode ter um estilo
arredondado ou aguçado.
serifa
serif
Pequnos traços
projetados para fora da
fonte.As fontes com
serifas dizem-se serifadas
em contraponto com as
fontes sem serifas,
góticas ou grotescas
(sans serifs).
barriga
bowl
Linha curva que delimita as
partes curvas das letras. Por
exemplo, está presente nas
letras: D p q a b B.
O espaço interior da curvatura
dá pelo nome Counter ou em
português Bojo.
serifa
serif
variações
cauda
tail
Traço decorativo
descendente do Q, K e R.
Em geral, o estilo das
partes descendentes das
letras minúsculas são
também apelidadas de
cauda.
espinha
spine
Traço curvo característico
das letras S e s.
descendentes
descenders
são os traços verticais que
nas minúsculas se prologam
abaixo da linha de base). As
letras descendentes são:
q y p g j
bojo
counter
O espaço interior da
curvatura dá pelo nome
Counter ou em português
Bojo.
terminal
terminal
Também conhecido por
Remate, o terminal designa o
estilo do traço com que
termina a letra. Pode assumir
vários estilos, consoante o
tipo: Arredondado, rectilíneo
ou curvo.
ascendentes
ascenders
Designam os traços verticais que nas
minúsculas sobressaem em altura
relativamente à linha de base. As letras
descendentes são: t d f h k l b
orelha
ear
Pequeno traço projetado no
canto superior direito da letra
g. Surge também no remate
horizontal da letra r.
ligação
link
Refere a ligação entre os dois
bojos da letra g.
trace
croossbar
Barra horizontal que une duas
hastes verticais (A ,H), ou
noutros casos cruza apenas
uma única haste (letras f,e,t)
braço
arm
Traço horizontal ou diagonal que
é aberto numa ou em ambas as
extremidades, como visto em T,
F, E e o traço ascendente do K.
laço
loop
Traço curvo que encerra
parcialmente a parte
descendente da letra g.
GLOSSÁRIO DE TERMOS
ALTERNATIVO
Fonte: https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/
Fonte: https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/
Fonte: https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/
Fonte: https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/
CONTRASTE
TIPOGRÁFICO
Diferença entre a expessura máxima e
mínima da fonte

Mais conteúdo relacionado

Semelhante a Tipografia Digital

Aula 6 - Comunicação Gráfica e Design
Aula 6  - Comunicação Gráfica e DesignAula 6  - Comunicação Gráfica e Design
Aula 6 - Comunicação Gráfica e DesignCíntia Dal Bello
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxFrancisTirso
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxFrancisTirso
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografiaDenise Lima
 
tipologiacores
tipologiacorestipologiacores
tipologiacorespedruga
 
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas Vídeo Aulas Apoio
 
Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Martoso2013
 
Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Katia Maria
 
Texto, Hipertexto e Hipermédia
Texto, Hipertexto e HipermédiaTexto, Hipertexto e Hipermédia
Texto, Hipertexto e Hipermédiagasparlanca
 

Semelhante a Tipografia Digital (18)

Aula EE - tipografia
Aula EE - tipografiaAula EE - tipografia
Aula EE - tipografia
 
Tipografia
TipografiaTipografia
Tipografia
 
Aula 6 - Comunicação Gráfica e Design
Aula 6  - Comunicação Gráfica e DesignAula 6  - Comunicação Gráfica e Design
Aula 6 - Comunicação Gráfica e Design
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docx
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docx
 
Tipografia
Tipografia Tipografia
Tipografia
 
Palestra tipografia fernanda mujica
Palestra tipografia   fernanda mujicaPalestra tipografia   fernanda mujica
Palestra tipografia fernanda mujica
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Tipologia
TipologiaTipologia
Tipologia
 
Tcc_linkedin
Tcc_linkedinTcc_linkedin
Tcc_linkedin
 
tipologiacores
tipologiacorestipologiacores
tipologiacores
 
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas
www.CentroApoio.com - Geometria - Ponto, Reta e Plano - Vídeo Aulas
 
Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01
 
Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01Apostila desenho técnico_parte_01
Apostila desenho técnico_parte_01
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Apostila Normas ABNT
Apostila Normas ABNTApostila Normas ABNT
Apostila Normas ABNT
 
Texto, Hipertexto e Hipermédia
Texto, Hipertexto e HipermédiaTexto, Hipertexto e Hipermédia
Texto, Hipertexto e Hipermédia
 
Aula03 tipografia
Aula03 tipografiaAula03 tipografia
Aula03 tipografia
 

Tipografia Digital

  • 1. TIPOGRAFIA DIGITAL AULA T14 LABM1 Mário Vairinhos Leonardo Pereira Andreia Sousa Fontes: - Design for the Web, Parte 3 - https://clube.design/2015/tipografia-basica-5-a-anatomia-dos-tipos/ - http://tipografos.net/ - https://www.thoughtco.com/typeface-anatomy-basics-explore-parts-of-letters- 1074901?utm_source=Pinterest - https://typedecon.com/blogs/type-glossary/ - Treasury of Alphabets and lettering, Jan Tschichold
  • 2. COLUNA TRAJANA FINAL DO SÉCULO I AC Após evolução ao longo de 100 anos, no final do século I AC, as letras romanas atingem o nível mais alto de perfeição
  • 3. COLUNA TRAJANA LETRAS CAPITAIS Devido à sua elegância e cuidado na proporcionalidade serviu de matriz de inspiração às fontes desenhadas pela cultura ocidental.
  • 4.
  • 5. ESCRITA CURSIVA ROMANA É uma escrita à mão usada no período romano até à idade média.
  • 6. MINÚSCULA CAROLÍNGIA Século XIX Desenvolvida pelos monges benedictinos (Alcuin de Iorque), na Abadía de corbie, região de Paris, é um marco importante na tipografia ocidental. Define a matriz do sistema de minúsculas usadas atualmente no mundo ocidental. Baseia-se no alfabeto cursivo romano.
  • 8.
  • 9. CARÁTER E GLIFO - O Caráter é definido pela sentido da linguagem enquanto que o glifo é definido pela sua aparência. - É o elemento ou unidade da linguagem escrita, possui um valor semântico o qual é independente do modo particular que pode ser grafado. - O glifo é uma representação gráfica (desenho) de um caráter ( ou mais).
  • 10. a a a a Exemplos de vários glifos do caráter a do alfabeto latino
  • 11. A FONTE A fonte (ou tipo) é um conjunto de glifos necessários à escrita contendo todas as letras do alfabeto, números e marcas, os quais possuem um peso, estilo, largura, postura ornamentação únicos.
  • 12. FAMÍLIA DE TIPOS TYPEFACE Um família de tipos é um conjunto de fontes que partilham um estilo gráfico comum e um conjunto de características de design.
  • 14. Corpo size designa a dimensão (1pt = 1/72DPIs)
  • 15. peso weigth designa o rácio entre a largura do traço (espessura) e a sua altura. Uma fonte de peso médio possui um rácio de aproximadamente 15%, uma fonte light cerca de 10%, enquanto que uma fonte a negrito (bold) tem um rácio superior a 20%.
  • 16.
  • 17. largura width ou strech designa o rácio entre a largura e a altura da fonte.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. ANATOMIA DO TIPO Conjunto de conceitos e propriedades que constituem a fonte tipográfica.
  • 26. Linha das ascendentes a linha horizontal onde todas as ascendentes das letras terminam. Ascendentes designam os traços verticais que nas minúsculas sobressaem em altura relativamente à linha de base. As letras ascendentes são: t d f h k l b Linha das descendentes a linha horizontal onde todas as descendentes das letras terminam (descendente são os traços verticais que nas minúsculas se prologam abaixo da linha de base). As letras descendentes são: q y p g j Linha média (altura-x) a linha horizontal que define a altura normal da fonte. Tipicamente as letras seguintes têm a mesma altura: w e r u i o a s z x c v n m
  • 27. haste stem O principal traço vertical da letra maiúscula. Existem duas hastes na letra H e na letra V. Define o corpo da letra. espora spur pequena projeção curvas dos braços do final letra.
  • 28. Ápice apex O topo do caráter onde se encontram as hastes verticais. Pode ter um estilo arredondado ou aguçado. serifa serif Pequnos traços projetados para fora da fonte.As fontes com serifas dizem-se serifadas em contraponto com as fontes sem serifas, góticas ou grotescas (sans serifs). barriga bowl Linha curva que delimita as partes curvas das letras. Por exemplo, está presente nas letras: D p q a b B. O espaço interior da curvatura dá pelo nome Counter ou em português Bojo.
  • 30. cauda tail Traço decorativo descendente do Q, K e R. Em geral, o estilo das partes descendentes das letras minúsculas são também apelidadas de cauda. espinha spine Traço curvo característico das letras S e s.
  • 31. descendentes descenders são os traços verticais que nas minúsculas se prologam abaixo da linha de base). As letras descendentes são: q y p g j bojo counter O espaço interior da curvatura dá pelo nome Counter ou em português Bojo. terminal terminal Também conhecido por Remate, o terminal designa o estilo do traço com que termina a letra. Pode assumir vários estilos, consoante o tipo: Arredondado, rectilíneo ou curvo.
  • 32. ascendentes ascenders Designam os traços verticais que nas minúsculas sobressaem em altura relativamente à linha de base. As letras descendentes são: t d f h k l b orelha ear Pequeno traço projetado no canto superior direito da letra g. Surge também no remate horizontal da letra r. ligação link Refere a ligação entre os dois bojos da letra g. trace croossbar Barra horizontal que une duas hastes verticais (A ,H), ou noutros casos cruza apenas uma única haste (letras f,e,t) braço arm Traço horizontal ou diagonal que é aberto numa ou em ambas as extremidades, como visto em T, F, E e o traço ascendente do K. laço loop Traço curvo que encerra parcialmente a parte descendente da letra g.
  • 38. CONTRASTE TIPOGRÁFICO Diferença entre a expessura máxima e mínima da fonte