SlideShare uma empresa Scribd logo
Profa. Andrea Dalforno
Introdução
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.


Uma composição tipográfica deve
ser especialmente legível e
visualmente envolvente, sem
desconsiderar o contexto em que é
lido e os objetivos da sua publicação.
Terminologia tipográfica
Linha de base (baseline)                                                      Linha das descendentes (descender line)
Linha onde os corpos dos caracteres que não têm                               Linha paralela a linha de base onde a maioria das
descendentes se apoiam.                                                       descendentes (descenders) de um caractere
                                                                              alcançam. Nem todas as descendentes atingem esta
                                                                              linha, particularmente a subcategoria com cauda.
Main line
Linha paralela a linha de base onde a altura de x (x-
                                                                              Linha da caixa alta (cap line)
height) termina.
                                                                              Linha paralela a linha de base (baseline), alcançada
                                                                              pela maioria das letras maiúsculas em um typeface.
Altura de x (x-height)                                                        Pode ou não ser a mesma que a linha das
Distância entre a linha de base (baseline) e a main                           ascendentes.
line. Compreende a altura dos caracteres
minúsculos.
                                                                              Corpo (body)
                                                                              Altura máxima do conjunto dos caracteres de uma
Linha das ascendentes (ascender top line)                                     fonte, incluindo as áreas destinadas às ascendentes,
Linha paralela à linha de base (baseline) onde a                              descendentes, e, eventualmente, a acentuação ou
maior ascendente alcança. Pode ou não ser a mesma                             espaço de respiro, além das linhas descendentes,
linha da caixa alta (cap line ou cap height line).                            ascendentes e capitais.


ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
Terminologia tipográfica
Extenders                                                                     Eixo (eixo de estricção, axis ou stress)
São as ascendentes e as descendentes,                                         Efeito causado pela variação da espessura
compreendendo as partes estendidas                                            de strokes. Característicos nas letras b, c, e,
para cima e para baixo nos caracteres                                         g, o, p. O ângulo do stress pode ser
minúsculos.                                                                   determinado desenhando uma linha
                                                                              através das partes mais estreitas de um
                                                                              caractere no topo e na base. Fontes sem
                                                                              diferença na espessura de strokes não tem
                                                                              stress. O eixo definido pela inclinação
                                                                              resultante da escrita manual é chamado de
                                                                              eixo humanista e o eixo vertical é
                                                                              conhecido como racionalista.




ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
Terminologia tipográfica
Olho (counter)                                                                Terminal (terminal)
É o espaço interno de algumas letras do                                       São formas em semicírculos encontradas
alfabeto. Podem ser fechados como nas                                         nas extremidades superiores das letras a, c
letras a, d, o e b ou aberto como nas                                         e f e nas extremidades inferiores das letras
letras h, n, u e c.                                                           j, r e y. Podem assumir a forma de bola (ball
                                                                              terminal), de bico (beak terminal) ou de
                                                                              lágrima (teardrop ou lacrimal terminal).




ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
Terminologia tipográfica
Serifa (serif)
Traço colocado no início ou no final da
haste de uma letra. Podem ser unilaterais
ou bilaterais. Existem diversas formas de
serifa e entre elas temos:

 Curva (adnate ou brackted): que flui
    suavemente na junção com a haste.
   Reta (abrupt ou straight): sua junção
    com a haste é em ângulo de 90 graus.
   Slab serif: tem a mesma espessura da
    haste e pode ter junção em curva ou reta.
   Triangular (wedge): são serifas em forma
    de cunha ou triangulares.
   Hairline: tem a espessura fina em relação
    à haste.


ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
A classificação tipográfica proposta pelo grupo A CASA DO TIPO é estruturalmente derivada do modelo BS 2961 com
algumas adaptações decorrentes das necessidades verificadas durante o estudo.
A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
1 Serifadas
              1.1 Humanistas
              Forma arredondada das letras, traço modulado, eixo
              humanista, pouco contraste entre as variações de
              espessura, altura de x relativamente pequena, barra do
              caractere e levemente inclinada, serifas geralmente
              apoiadas e côncavas podendo apresentar extremidades
              com acabamento reto, arredondado ou em ângulo.



              1.2 Garaldes
              Eixo de estricção do o levemente inclinado, barra do
              caractere e paralela à linha de base, contraste acentuado
              entre as variações de espessura, altura de x levemente
              maior que nas humanistas.
1 Serifadas
              1.3 Transicionais
              Fortemente situadas entre as garaldes e as didones, eixo de
              estricção vertical ou suavemente inclinado, serifas mais
              finas e planas com acabamento agudo.



              1.4 Didones
              Desprovidas de características manuscritas, eixo de
              estricção racionalista (perpendicular à linha de base),
              contraste muito acentuado entre as variações de espessura,
              traços que emergem de formas abruptas, counters
              pequenos e terminais redondos.



              1.5 Mecânicas
              Ampla mancha gráfica, serifas espessas e horizontais (slab
              serif), desenhos simples, eixo de estricção racionalista.
2 Lineares (não serifadas)
             2.1 Grotescas
             Desenhos volumosos e pouco refinados, contrastes de
             espessura bem definidos, bastante usadas no século XIX
             para títulos, manchetes de jornais etc.




             2.2 Neo-Grotescas
             Sutis diferenças entre as grotescas. Desenhos mais
             projetados, minimização dos contrastes entre variação de
             espessura para tomar as formas mais elegantes. Seus
             projetos previam as distorções de impressão e o caractere g
             não apresenta barriga na parte inferior.
2 Lineares (não serifadas)
             2.3 Geométricas
             Inspirada nas formas geométricas, contrastes monolíneos,
             linhas e curvas modulares repetidas nos demais caracteres,
             expressão dos ideais modernistas, eixos racionalistas.




             2.4 Humanistas
             Contraste mais definido entre as variações de espessura,
             relacionadas às inscrições romanas e às minusculas das
             garaldes e venesianas.
3 Decorativas
            Desenhos originais, com fortes características ilustrativas,
            que não necessariamente resultam em famílias tipográficas
            completas.
4 Manuscritas
           Imitam ou sugerem desenhos feitos à mão, nesta categoria
           encontram-se também os tipos denominados caligráficos.
5 Símbolos
             Decorrentes principalmente do ambiente digital, essa
             categoria tipográfica é composta por fontes cujos
             caracteres originais são substituídos por ilustrações, ícones,
             símbolos, expressões, etc.
6 Não Latinas
            Representam línguas, cuja escrita não se apresenta por
            meio de caracteres latinos. Ex.: Chineses, Árabes,
            Japoneses, etc.
Legibilidade e Leiturabilidade
As letras maiúsculas e minúsculas tem
uma grande influência na legibilidade do
texto. Nossa leitura consiste em
reconhecer o formato geral das palavras.
 Textos em maiúsculos são retângulos
  monótonos pouco distintos que não
  atraem a atenção do olhar.
 Textos em minúsculo é mais legível
  porque exploramos a parte superior
  das palavras.
 A utilização de letras maiúsculas nas
  inicias de cada palavra quebra a
  exploração das formas das palavras.
 Legibilidade depende do topo das
  letras.
 Letras maiúsculas quebram a leitura .

Mais conteúdo relacionado

Mais procurados

Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.
Fabio Silveira: Designer | Professor
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
Fabio Silveira: Designer | Professor
 
Tipografia
Tipografia Tipografia
Tipografia
Tiago Santana
 
01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
Fabio Silveira: Designer | Professor
 
Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022
Renato Melo
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
Fabio Silveira: Designer | Professor
 
Tipografia
TipografiaTipografia
Tipografia
Odair Cavichioli
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
Fabio Silveira: Designer | Professor
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
Denise Lima
 
Aula01 prod grafica
Aula01 prod graficaAula01 prod grafica
Principi di grafica
Principi di graficaPrincipi di grafica
Principi di graficaDaniele Cogo
 
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
Renato Melo
 
Materiais e processos gráficos
Materiais e processos gráficosMateriais e processos gráficos
Materiais e processos gráficos
Patricia Prado
 
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
Cíntia Dal Bello
 
Como criar um Cartão de Visita - Computação Gráfica 2022
Como criar um Cartão de Visita - Computação Gráfica 2022Como criar um Cartão de Visita - Computação Gráfica 2022
Como criar um Cartão de Visita - Computação Gráfica 2022
Renato Melo
 
Aula 09 design gráfico na publicidade uso das cores
Aula 09   design gráfico na publicidade uso das coresAula 09   design gráfico na publicidade uso das cores
Aula 09 design gráfico na publicidade uso das cores
Elizeu Nascimento Silva
 
Aula 11 design gráfico na publicidade rough e layout
Aula 11   design gráfico na publicidade rough e layoutAula 11   design gráfico na publicidade rough e layout
Aula 11 design gráfico na publicidade rough e layout
Elizeu Nascimento Silva
 
Producao Grafica - Fundamentos
Producao Grafica - FundamentosProducao Grafica - Fundamentos
Producao Grafica - Fundamentos
dualpixel
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
Elizeu Nascimento Silva
 
Manual de identidade visual - Perfumaria linus
Manual de identidade visual -  Perfumaria linusManual de identidade visual -  Perfumaria linus
Manual de identidade visual - Perfumaria linus
Samuel Elias
 

Mais procurados (20)

Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
 
Tipografia
Tipografia Tipografia
Tipografia
 
01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
 
Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
 
Tipografia
TipografiaTipografia
Tipografia
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Aula01 prod grafica
Aula01 prod graficaAula01 prod grafica
Aula01 prod grafica
 
Principi di grafica
Principi di graficaPrincipi di grafica
Principi di grafica
 
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
All Type - Combinação de Cores e Fontes - Computação Gráfica 2022
 
Materiais e processos gráficos
Materiais e processos gráficosMateriais e processos gráficos
Materiais e processos gráficos
 
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
 
Como criar um Cartão de Visita - Computação Gráfica 2022
Como criar um Cartão de Visita - Computação Gráfica 2022Como criar um Cartão de Visita - Computação Gráfica 2022
Como criar um Cartão de Visita - Computação Gráfica 2022
 
Aula 09 design gráfico na publicidade uso das cores
Aula 09   design gráfico na publicidade uso das coresAula 09   design gráfico na publicidade uso das cores
Aula 09 design gráfico na publicidade uso das cores
 
Aula 11 design gráfico na publicidade rough e layout
Aula 11   design gráfico na publicidade rough e layoutAula 11   design gráfico na publicidade rough e layout
Aula 11 design gráfico na publicidade rough e layout
 
Producao Grafica - Fundamentos
Producao Grafica - FundamentosProducao Grafica - Fundamentos
Producao Grafica - Fundamentos
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 
Manual de identidade visual - Perfumaria linus
Manual de identidade visual -  Perfumaria linusManual de identidade visual -  Perfumaria linus
Manual de identidade visual - Perfumaria linus
 

Destaque

WorkShop de Produção Gráfica
WorkShop de Produção GráficaWorkShop de Produção Gráfica
WorkShop de Produção Gráfica
Carlos Martins
 
Safari Raphael
Safari RaphaelSafari Raphael
Safari Raphael
Raphael ComPh
 
Pg n12 tipografia criativa (1)
Pg n12 tipografia criativa (1)Pg n12 tipografia criativa (1)
Pg n12 tipografia criativa (1)
anabelaac
 
Aula 1 aldeci
Aula 1 aldeciAula 1 aldeci
Aula 1 aldeci
Aldeci Ferreira Costa
 
CRP0357-2014-12
CRP0357-2014-12CRP0357-2014-12
4 linguagem gráfica tipografia e cor
4 linguagem gráfica tipografia e cor4 linguagem gráfica tipografia e cor
4 linguagem gráfica tipografia e cor
Francisco Ferreira
 
Aula - RGB, CMYK e PANTONE - Produção Gráfica
Aula - RGB, CMYK e PANTONE - Produção GráficaAula - RGB, CMYK e PANTONE - Produção Gráfica
Aula - RGB, CMYK e PANTONE - Produção Gráfica
Gabriel Ferraciolli
 
A Tipografia como Retórica
A Tipografia como RetóricaA Tipografia como Retórica
A Tipografia como Retórica
jorgefred84
 
Aula02 editoracao eletronica
Aula02 editoracao eletronicaAula02 editoracao eletronica
Aula02 editoracao eletronica
IBMR Laureate International Universities
 
O Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneoO Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneo
Beto Lima Branding
 
Aula 04
Aula 04Aula 04
Aula 04
weca.lab
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráfico
Renato Melo
 
Produção Gráfica Aula 01 ementa produtor gráfico
Produção Gráfica Aula 01 ementa produtor gráficoProdução Gráfica Aula 01 ementa produtor gráfico
Produção Gráfica Aula 01 ementa produtor gráfico
Renan Junior
 
Aula01 produtor
Aula01 produtorAula01 produtor
Guia de tipos - Tipografia
Guia de tipos - TipografiaGuia de tipos - Tipografia
Guia de tipos - Tipografia
Elizabeth Fantauzzi
 
Aula básica sobre as cores
Aula básica sobre as coresAula básica sobre as cores
Aula básica sobre as cores
Céu Barros
 
Produção gráfica
Produção gráficaProdução gráfica
Produção gráfica
Sergio Ollandezos
 

Destaque (17)

WorkShop de Produção Gráfica
WorkShop de Produção GráficaWorkShop de Produção Gráfica
WorkShop de Produção Gráfica
 
Safari Raphael
Safari RaphaelSafari Raphael
Safari Raphael
 
Pg n12 tipografia criativa (1)
Pg n12 tipografia criativa (1)Pg n12 tipografia criativa (1)
Pg n12 tipografia criativa (1)
 
Aula 1 aldeci
Aula 1 aldeciAula 1 aldeci
Aula 1 aldeci
 
CRP0357-2014-12
CRP0357-2014-12CRP0357-2014-12
CRP0357-2014-12
 
4 linguagem gráfica tipografia e cor
4 linguagem gráfica tipografia e cor4 linguagem gráfica tipografia e cor
4 linguagem gráfica tipografia e cor
 
Aula - RGB, CMYK e PANTONE - Produção Gráfica
Aula - RGB, CMYK e PANTONE - Produção GráficaAula - RGB, CMYK e PANTONE - Produção Gráfica
Aula - RGB, CMYK e PANTONE - Produção Gráfica
 
A Tipografia como Retórica
A Tipografia como RetóricaA Tipografia como Retórica
A Tipografia como Retórica
 
Aula02 editoracao eletronica
Aula02 editoracao eletronicaAula02 editoracao eletronica
Aula02 editoracao eletronica
 
O Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneoO Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneo
 
Aula 04
Aula 04Aula 04
Aula 04
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráfico
 
Produção Gráfica Aula 01 ementa produtor gráfico
Produção Gráfica Aula 01 ementa produtor gráficoProdução Gráfica Aula 01 ementa produtor gráfico
Produção Gráfica Aula 01 ementa produtor gráfico
 
Aula01 produtor
Aula01 produtorAula01 produtor
Aula01 produtor
 
Guia de tipos - Tipografia
Guia de tipos - TipografiaGuia de tipos - Tipografia
Guia de tipos - Tipografia
 
Aula básica sobre as cores
Aula básica sobre as coresAula básica sobre as cores
Aula básica sobre as cores
 
Produção gráfica
Produção gráficaProdução gráfica
Produção gráfica
 

Semelhante a TIPOGRAFIA

Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1
Mariovski Sky
 
Palestra tipografia fernanda mujica
Palestra tipografia   fernanda mujicaPalestra tipografia   fernanda mujica
Palestra tipografia fernanda mujica
Doisnovemeia Publicidade
 
Tg Aula3 2008
Tg Aula3 2008Tg Aula3 2008
Tg Aula3 2008
Artur Araujo
 
[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2
Eduardo Novais
 
Tipografia final
Tipografia finalTipografia final
Tipografia final
Rafael Jannuzzi
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docx
FrancisTirso
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
A estrutura dos caracteres
A estrutura dos caracteresA estrutura dos caracteres
A estrutura dos caracteres
xtessarix
 
Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
Evandro Manara Miletto
 
Aestruturadoscaracteres
AestruturadoscaracteresAestruturadoscaracteres
Aestruturadoscaracteres
xtessarix
 
Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02
xtessarix
 
Anatomia Tipográfica
Anatomia TipográficaAnatomia Tipográfica
Anatomia Tipográfica
guest27bf18
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docx
FrancisTirso
 
Aula EE - tipografia
Aula EE - tipografiaAula EE - tipografia
Aula EE - tipografia
ProfVivianeLopes
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
Cristiano Pires Martins
 
O que significa comunicacao gráfica visual
O que significa comunicacao gráfica visualO que significa comunicacao gráfica visual
O que significa comunicacao gráfica visual
Andrea Castro
 
Tipografia
TipografiaTipografia
Graphics aspects of complex texts: Typography as macro-pontuation
Graphics aspects of complex texts: Typography as macro-pontuationGraphics aspects of complex texts: Typography as macro-pontuation
Graphics aspects of complex texts: Typography as macro-pontuation
Victor Nassar
 
Tipologia
TipologiaTipologia
Tipologia
renatamruiz
 
Tcco6
Tcco6Tcco6

Semelhante a TIPOGRAFIA (20)

Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1
 
Palestra tipografia fernanda mujica
Palestra tipografia   fernanda mujicaPalestra tipografia   fernanda mujica
Palestra tipografia fernanda mujica
 
Tg Aula3 2008
Tg Aula3 2008Tg Aula3 2008
Tg Aula3 2008
 
[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2
 
Tipografia final
Tipografia finalTipografia final
Tipografia final
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docx
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
Aula04 prod grafica
 
A estrutura dos caracteres
A estrutura dos caracteresA estrutura dos caracteres
A estrutura dos caracteres
 
Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
 
Aestruturadoscaracteres
AestruturadoscaracteresAestruturadoscaracteres
Aestruturadoscaracteres
 
Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02
 
Anatomia Tipográfica
Anatomia TipográficaAnatomia Tipográfica
Anatomia Tipográfica
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docx
 
Aula EE - tipografia
Aula EE - tipografiaAula EE - tipografia
Aula EE - tipografia
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
O que significa comunicacao gráfica visual
O que significa comunicacao gráfica visualO que significa comunicacao gráfica visual
O que significa comunicacao gráfica visual
 
Tipografia
TipografiaTipografia
Tipografia
 
Graphics aspects of complex texts: Typography as macro-pontuation
Graphics aspects of complex texts: Typography as macro-pontuationGraphics aspects of complex texts: Typography as macro-pontuation
Graphics aspects of complex texts: Typography as macro-pontuation
 
Tipologia
TipologiaTipologia
Tipologia
 
Tcco6
Tcco6Tcco6
Tcco6
 

Mais de Andrea Dalforno

MOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentasMOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentas
Andrea Dalforno
 
Mapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLSMapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLS
Andrea Dalforno
 
Gráfico de Gantt
Gráfico de GanttGráfico de Gantt
Gráfico de Gantt
Andrea Dalforno
 
Como elaborar um relatório técnico
Como elaborar um relatório técnicoComo elaborar um relatório técnico
Como elaborar um relatório técnico
Andrea Dalforno
 
Trabalho em Equipe
Trabalho em EquipeTrabalho em Equipe
Trabalho em Equipe
Andrea Dalforno
 
Gestão do Tempo
Gestão do TempoGestão do Tempo
Gestão do Tempo
Andrea Dalforno
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
Andrea Dalforno
 
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADEMÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
Andrea Dalforno
 
USABILIDADE
USABILIDADEUSABILIDADE
USABILIDADE
Andrea Dalforno
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
Andrea Dalforno
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
Andrea Dalforno
 
METODOLOGIA DE DESIGN
METODOLOGIA DE DESIGNMETODOLOGIA DE DESIGN
METODOLOGIA DE DESIGN
Andrea Dalforno
 
SEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNOSEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNO
Andrea Dalforno
 
PERCEPÇÃO VISUAL
PERCEPÇÃO VISUALPERCEPÇÃO VISUAL
PERCEPÇÃO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUALLINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUALLINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTELINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTE
Andrea Dalforno
 
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
Andrea Dalforno
 

Mais de Andrea Dalforno (20)

MOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentasMOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentas
 
Mapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLSMapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLS
 
Gráfico de Gantt
Gráfico de GanttGráfico de Gantt
Gráfico de Gantt
 
Como elaborar um relatório técnico
Como elaborar um relatório técnicoComo elaborar um relatório técnico
Como elaborar um relatório técnico
 
Trabalho em Equipe
Trabalho em EquipeTrabalho em Equipe
Trabalho em Equipe
 
Gestão do Tempo
Gestão do TempoGestão do Tempo
Gestão do Tempo
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADEMÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
 
USABILIDADE
USABILIDADEUSABILIDADE
USABILIDADE
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
 
METODOLOGIA DE DESIGN
METODOLOGIA DE DESIGNMETODOLOGIA DE DESIGN
METODOLOGIA DE DESIGN
 
SEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNOSEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNO
 
PERCEPÇÃO VISUAL
PERCEPÇÃO VISUALPERCEPÇÃO VISUAL
PERCEPÇÃO VISUAL
 
LINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUALLINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUAL
 
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
 
LINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUALLINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUAL
 
LINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTELINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTE
 
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
 

TIPOGRAFIA

  • 2. Introdução 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. Uma composição tipográfica deve ser especialmente legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objetivos da sua publicação.
  • 3. Terminologia tipográfica Linha de base (baseline) Linha das descendentes (descender line) Linha onde os corpos dos caracteres que não têm Linha paralela a linha de base onde a maioria das descendentes se apoiam. descendentes (descenders) de um caractere alcançam. Nem todas as descendentes atingem esta linha, particularmente a subcategoria com cauda. Main line Linha paralela a linha de base onde a altura de x (x- Linha da caixa alta (cap line) height) termina. Linha paralela a linha de base (baseline), alcançada pela maioria das letras maiúsculas em um typeface. Altura de x (x-height) Pode ou não ser a mesma que a linha das Distância entre a linha de base (baseline) e a main ascendentes. line. Compreende a altura dos caracteres minúsculos. Corpo (body) Altura máxima do conjunto dos caracteres de uma Linha das ascendentes (ascender top line) fonte, incluindo as áreas destinadas às ascendentes, Linha paralela à linha de base (baseline) onde a descendentes, e, eventualmente, a acentuação ou maior ascendente alcança. Pode ou não ser a mesma espaço de respiro, além das linhas descendentes, linha da caixa alta (cap line ou cap height line). ascendentes e capitais. ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 4. ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 5. Terminologia tipográfica Extenders Eixo (eixo de estricção, axis ou stress) São as ascendentes e as descendentes, Efeito causado pela variação da espessura compreendendo as partes estendidas de strokes. Característicos nas letras b, c, e, para cima e para baixo nos caracteres g, o, p. O ângulo do stress pode ser minúsculos. determinado desenhando uma linha através das partes mais estreitas de um caractere no topo e na base. Fontes sem diferença na espessura de strokes não tem stress. O eixo definido pela inclinação resultante da escrita manual é chamado de eixo humanista e o eixo vertical é conhecido como racionalista. ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 6. Terminologia tipográfica Olho (counter) Terminal (terminal) É o espaço interno de algumas letras do São formas em semicírculos encontradas alfabeto. Podem ser fechados como nas nas extremidades superiores das letras a, c letras a, d, o e b ou aberto como nas e f e nas extremidades inferiores das letras letras h, n, u e c. j, r e y. Podem assumir a forma de bola (ball terminal), de bico (beak terminal) ou de lágrima (teardrop ou lacrimal terminal). ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 7. Terminologia tipográfica Serifa (serif) Traço colocado no início ou no final da haste de uma letra. Podem ser unilaterais ou bilaterais. Existem diversas formas de serifa e entre elas temos:  Curva (adnate ou brackted): que flui suavemente na junção com a haste.  Reta (abrupt ou straight): sua junção com a haste é em ângulo de 90 graus.  Slab serif: tem a mesma espessura da haste e pode ter junção em curva ou reta.  Triangular (wedge): são serifas em forma de cunha ou triangulares.  Hairline: tem a espessura fina em relação à haste. ROCHA, Claudio. Projeto tipográfico. Análise e produção de fontes digitais. São Paulo: Rosari, 2002. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 8. A classificação tipográfica proposta pelo grupo A CASA DO TIPO é estruturalmente derivada do modelo BS 2961 com algumas adaptações decorrentes das necessidades verificadas durante o estudo. A Casa do Tipo. Morfologia e classificação tipográfica. www.acasadotipo.com.br. Versão 3.0, 2004.
  • 9. 1 Serifadas 1.1 Humanistas Forma arredondada das letras, traço modulado, eixo humanista, pouco contraste entre as variações de espessura, altura de x relativamente pequena, barra do caractere e levemente inclinada, serifas geralmente apoiadas e côncavas podendo apresentar extremidades com acabamento reto, arredondado ou em ângulo. 1.2 Garaldes Eixo de estricção do o levemente inclinado, barra do caractere e paralela à linha de base, contraste acentuado entre as variações de espessura, altura de x levemente maior que nas humanistas.
  • 10. 1 Serifadas 1.3 Transicionais Fortemente situadas entre as garaldes e as didones, eixo de estricção vertical ou suavemente inclinado, serifas mais finas e planas com acabamento agudo. 1.4 Didones Desprovidas de características manuscritas, eixo de estricção racionalista (perpendicular à linha de base), contraste muito acentuado entre as variações de espessura, traços que emergem de formas abruptas, counters pequenos e terminais redondos. 1.5 Mecânicas Ampla mancha gráfica, serifas espessas e horizontais (slab serif), desenhos simples, eixo de estricção racionalista.
  • 11. 2 Lineares (não serifadas) 2.1 Grotescas Desenhos volumosos e pouco refinados, contrastes de espessura bem definidos, bastante usadas no século XIX para títulos, manchetes de jornais etc. 2.2 Neo-Grotescas Sutis diferenças entre as grotescas. Desenhos mais projetados, minimização dos contrastes entre variação de espessura para tomar as formas mais elegantes. Seus projetos previam as distorções de impressão e o caractere g não apresenta barriga na parte inferior.
  • 12. 2 Lineares (não serifadas) 2.3 Geométricas Inspirada nas formas geométricas, contrastes monolíneos, linhas e curvas modulares repetidas nos demais caracteres, expressão dos ideais modernistas, eixos racionalistas. 2.4 Humanistas Contraste mais definido entre as variações de espessura, relacionadas às inscrições romanas e às minusculas das garaldes e venesianas.
  • 13. 3 Decorativas Desenhos originais, com fortes características ilustrativas, que não necessariamente resultam em famílias tipográficas completas.
  • 14. 4 Manuscritas Imitam ou sugerem desenhos feitos à mão, nesta categoria encontram-se também os tipos denominados caligráficos.
  • 15. 5 Símbolos Decorrentes principalmente do ambiente digital, essa categoria tipográfica é composta por fontes cujos caracteres originais são substituídos por ilustrações, ícones, símbolos, expressões, etc.
  • 16. 6 Não Latinas Representam línguas, cuja escrita não se apresenta por meio de caracteres latinos. Ex.: Chineses, Árabes, Japoneses, etc.
  • 17. Legibilidade e Leiturabilidade As letras maiúsculas e minúsculas tem uma grande influência na legibilidade do texto. Nossa leitura consiste em reconhecer o formato geral das palavras.  Textos em maiúsculos são retângulos monótonos pouco distintos que não atraem a atenção do olhar.  Textos em minúsculo é mais legível porque exploramos a parte superior das palavras.  A utilização de letras maiúsculas nas inicias de cada palavra quebra a exploração das formas das palavras.  Legibilidade depende do topo das letras.  Letras maiúsculas quebram a leitura .