SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Tipografia II
Prof. Gabriel Arroyo
Tanto no meio digital como no meio impresso, a
tipografia tem as mesmas características de uso e são
regidas pelas mesmas regras.
Tipografia, legibilidade e formatos
Legibilidade e contraste

O tipo de letra que utilizamos deve ser visualizado com
clareza pelos usuários em tela, ou seja; computadores,
celulares, tablets, e-books, displays entre outros, deve
estar evidente e dispor de espaço entre linhas para uma
boa leitura.

O controle de contraste entre as formas e os espaços
vazios é também fundamental para obter-se uma boa
legibilidade.
Hierarquia de informação

Os títulos, subtítulos, notas explicativas de desenhos e
fotos ou outros tipos de textos precisam ter outras
configurações para que o leitor possa distinguir
facilmente um texto de outro.
Coordenação gráfica ou consistência

Se os textos de uma plataforma digital mantêm uma
aparência integrada ao sistema (o mesmo tamanho, cor
etc.) o usuário terá uma maior sensação de controle ao
navegar/operar determinado meio.
História da tipografia no meio digital

No princípio, a internet e o ciberespaço, foram
desenvolvidos por engenheiros e especialistas em
informática, e o objetivo era o de fazer funcionar as
máquinas, sob o ponto de vista deles. Nada mais.
História da tipografia no meio digital
Desenvolveram aplicações informáticas que somente os
engenheiros e técnicos eram capazes de entender e
usar. No início a interface gráfica era uma tela cheia de
texto com a qual se interagia também através de
comandos de texto.
História da tipografia no meio digital

Na ânsia do objetivo de fazer as máquinas
funcionarem, Segundo a visão dos tecnólogos, jamais
se pensou que a tecnologia seria utilizada
posteriormente por usuários inexperientes.

Pode-se imaginar que naquele momento os
engenheiros jamais pensariam no design visual de uma
interface e muito menos em obter os gráficos e letras
aparecerem no meio impresso.
História da tipografia no meio digital
História da tipografia no meio digital

A representação tipográfica na tela nasceu prejudicada
desde o primeiro momento, com uma tela de 72 dpi,
continua sendo na visão tipográfica uma tecnologia
pobre, se comparada com outras tecnologias de
representação.

E, assim, visando uma melhor legibilidade foram
desenvolvidas fontes específicas / exclusivas para o
meio digital.
Exemplo tela de 72 dpi
História da tipografia no meio digital

Num primeiro momento para o design de textos e
documentos Web foram criadas fontes compatíveis,
que poderiam ser encontradas tanto no sistema PC
quanto Macintosh. Isso resultou em uma pequena
variedade de fontes, entre elas a Times (times New
Roman do PC), que era a mais utilizada, apesar de não
oferecer uma boa leitura na tela, mas produzia
melhores resultados na impressão de textos sobre
papel.

Times New Roman, Georgia, Verdana, Arial e
Trebuchet.
História da tipografia no meio digital

O grande problema (limitação) das fontes digitais é que
se o usuário não tiver as fontes instaladas em seu
computador, o sistema automaticamente a substituirá
pela que tiver.

Ao invés de adaptar as tipografias do meio impresso à
Web, foram projetadas fontes que se ajustam a retícula
de pixels, desenvolvidas especificamente para uso no
ciberespaço.
História da tipografia no meio digital

Essas fontes têm o pixel como unidade de medida e, ao
contrario das tipográficas para o meio impresso, elas
não são escalonáveis (também chamadas de fontes com
contorno).

Zuzana Licko desenvolveu a família Emigre para uso
em tela, que como outras fontes desenvolvidas
especialmente para tela como as famílias Emperor,
Universal, Oakland. São Famílias que oferecem uma
compatibilidade total entre a tela e a impressora,
solucionando essa dupla necessidade atual de trabalhar
a tipografia a 72 dpi.
Emigre
Emperor


          Oakland
História da tipografia no meio digital

Também, outra tipografia (ou conjunto de fontes) para
tela baseada no pixel, foi a criada por Joe Gillespie, sua
contribuição para o design de tipos para a tela foi por
meio da Mini 7, uma tipografia pata ser utilizada com 7
pixels e que possui uma família muito grande.
Mini 7

Weitere ähnliche Inhalte

Andere mochten auch

WebMarketing Mídia Digital e Onlene 1 Bimestre
WebMarketing Mídia Digital e Onlene 1 BimestreWebMarketing Mídia Digital e Onlene 1 Bimestre
WebMarketing Mídia Digital e Onlene 1 BimestreDESIGN DIGITAL UNIARA 2012
 
ZL Vórtice - platform development
ZL Vórtice - platform developmentZL Vórtice - platform development
ZL Vórtice - platform developmentAdeline Gil
 
Explicando Estruturas/Registros no C#
Explicando Estruturas/Registros no C#Explicando Estruturas/Registros no C#
Explicando Estruturas/Registros no C#Denis Fernandes Gomes
 
Design Digital Percepção e Comunicação Visuaç
Design Digital Percepção e Comunicação VisuaçDesign Digital Percepção e Comunicação Visuaç
Design Digital Percepção e Comunicação VisuaçDESIGN DIGITAL UNIARA 2012
 

Andere mochten auch (20)

Design Digital Técnicas Visuais
Design Digital Técnicas VisuaisDesign Digital Técnicas Visuais
Design Digital Técnicas Visuais
 
WebMarketing Mídia Digital e Onlene 1 Bimestre
WebMarketing Mídia Digital e Onlene 1 BimestreWebMarketing Mídia Digital e Onlene 1 Bimestre
WebMarketing Mídia Digital e Onlene 1 Bimestre
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Programacao para Web I 01 a Historia
Programacao para Web I 01 a HistoriaProgramacao para Web I 01 a Historia
Programacao para Web I 01 a Historia
 
Programacao para Web I 02 Internet
Programacao para Web I 02  InternetProgramacao para Web I 02  Internet
Programacao para Web I 02 Internet
 
Design Digital Tipografia II
Design Digital Tipografia IIDesign Digital Tipografia II
Design Digital Tipografia II
 
Processador 32 x 64bits
Processador 32 x 64bitsProcessador 32 x 64bits
Processador 32 x 64bits
 
ZL Vórtice - platform development
ZL Vórtice - platform developmentZL Vórtice - platform development
ZL Vórtice - platform development
 
07 trabalho 7pontos
07 trabalho 7pontos07 trabalho 7pontos
07 trabalho 7pontos
 
Horario 2012
Horario 2012Horario 2012
Horario 2012
 
Programacao para Web I Projeto do site
Programacao para Web I Projeto do siteProgramacao para Web I Projeto do site
Programacao para Web I Projeto do site
 
Percepcao e comunicacao_visual
Percepcao e comunicacao_visualPercepcao e comunicacao_visual
Percepcao e comunicacao_visual
 
Design digital i_exercicio_tipografia
Design digital i_exercicio_tipografiaDesign digital i_exercicio_tipografia
Design digital i_exercicio_tipografia
 
Design digital i_fundamentos
Design digital i_fundamentosDesign digital i_fundamentos
Design digital i_fundamentos
 
Explicando Estruturas/Registros no C#
Explicando Estruturas/Registros no C#Explicando Estruturas/Registros no C#
Explicando Estruturas/Registros no C#
 
Oracle 11g
Oracle 11gOracle 11g
Oracle 11g
 
Explicando Vetores - Algoritmos
Explicando Vetores - AlgoritmosExplicando Vetores - Algoritmos
Explicando Vetores - Algoritmos
 
Planos de Ensinos de Design Digital 2012
Planos de Ensinos de Design Digital 2012Planos de Ensinos de Design Digital 2012
Planos de Ensinos de Design Digital 2012
 
Design Digital Percepção e Comunicação Visuaç
Design Digital Percepção e Comunicação VisuaçDesign Digital Percepção e Comunicação Visuaç
Design Digital Percepção e Comunicação Visuaç
 
Design Digital I Psicologia das Cores
Design Digital I Psicologia das CoresDesign Digital I Psicologia das Cores
Design Digital I Psicologia das Cores
 

Ähnlich wie Tipografia II: História e aplicação no meio digital

Ähnlich wie Tipografia II: História e aplicação no meio digital (20)

10 revisao producao_grafica
10 revisao producao_grafica10 revisao producao_grafica
10 revisao producao_grafica
 
Apostila d moda
Apostila d modaApostila d moda
Apostila d moda
 
Sm C1
Sm C1Sm C1
Sm C1
 
07 pre impressao
07 pre impressao07 pre impressao
07 pre impressao
 
Informática
InformáticaInformática
Informática
 
Especificacoes graficas web
Especificacoes graficas webEspecificacoes graficas web
Especificacoes graficas web
 
trabalho de tic
trabalho de tic trabalho de tic
trabalho de tic
 
Biblioteca de interface grafica
Biblioteca de interface graficaBiblioteca de interface grafica
Biblioteca de interface grafica
 
Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1
 
Design Gráfico
Design GráficoDesign Gráfico
Design Gráfico
 
ATIVIDADE HARDWARE E SOFTWARE
ATIVIDADE HARDWARE E SOFTWAREATIVIDADE HARDWARE E SOFTWARE
ATIVIDADE HARDWARE E SOFTWARE
 
Apresentação final
Apresentação finalApresentação final
Apresentação final
 
Apresentação final
Apresentação finalApresentação final
Apresentação final
 
Interface web
Interface webInterface web
Interface web
 
Texto Digital
Texto DigitalTexto Digital
Texto Digital
 
Operação e manutenção de impressoras
Operação e manutenção de impressorasOperação e manutenção de impressoras
Operação e manutenção de impressoras
 
Softwares - Computação
Softwares - ComputaçãoSoftwares - Computação
Softwares - Computação
 
Produção gráfica
Produção gráficaProdução gráfica
Produção gráfica
 
O Computador Stc,Clc
O Computador Stc,ClcO Computador Stc,Clc
O Computador Stc,Clc
 

Mehr von DESIGN DIGITAL UNIARA 2012

Mehr von DESIGN DIGITAL UNIARA 2012 (8)

Programação para Web I Calendario 2012
Programação para Web I Calendario 2012Programação para Web I Calendario 2012
Programação para Web I Calendario 2012
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 
Design Digital I Anatomia da Mensagem Visual respresentação, simbolismo, abst...
Design Digital I Anatomia da Mensagem Visual respresentação, simbolismo, abst...Design Digital I Anatomia da Mensagem Visual respresentação, simbolismo, abst...
Design Digital I Anatomia da Mensagem Visual respresentação, simbolismo, abst...
 
Design Digital Fundamentos do Design Equilibrio x Tensão
Design Digital Fundamentos do Design Equilibrio x TensãoDesign Digital Fundamentos do Design Equilibrio x Tensão
Design Digital Fundamentos do Design Equilibrio x Tensão
 
Design Digital I Percepção e comunicação visual
Design Digital I Percepção e comunicação visualDesign Digital I Percepção e comunicação visual
Design Digital I Percepção e comunicação visual
 
Design Digital I Anatomia Mensagem Visual
Design Digital I Anatomia Mensagem VisualDesign Digital I Anatomia Mensagem Visual
Design Digital I Anatomia Mensagem Visual
 
01 percepcao comunicacao_visual
01 percepcao comunicacao_visual01 percepcao comunicacao_visual
01 percepcao comunicacao_visual
 
01 cores
01 cores01 cores
01 cores
 

Tipografia II: História e aplicação no meio digital

  • 2. Tanto no meio digital como no meio impresso, a tipografia tem as mesmas características de uso e são regidas pelas mesmas regras. Tipografia, legibilidade e formatos
  • 3. Legibilidade e contraste O tipo de letra que utilizamos deve ser visualizado com clareza pelos usuários em tela, ou seja; computadores, celulares, tablets, e-books, displays entre outros, deve estar evidente e dispor de espaço entre linhas para uma boa leitura. O controle de contraste entre as formas e os espaços vazios é também fundamental para obter-se uma boa legibilidade.
  • 4.
  • 5.
  • 6.
  • 7. Hierarquia de informação Os títulos, subtítulos, notas explicativas de desenhos e fotos ou outros tipos de textos precisam ter outras configurações para que o leitor possa distinguir facilmente um texto de outro.
  • 8.
  • 9. Coordenação gráfica ou consistência Se os textos de uma plataforma digital mantêm uma aparência integrada ao sistema (o mesmo tamanho, cor etc.) o usuário terá uma maior sensação de controle ao navegar/operar determinado meio.
  • 10.
  • 11. História da tipografia no meio digital No princípio, a internet e o ciberespaço, foram desenvolvidos por engenheiros e especialistas em informática, e o objetivo era o de fazer funcionar as máquinas, sob o ponto de vista deles. Nada mais.
  • 12. História da tipografia no meio digital Desenvolveram aplicações informáticas que somente os engenheiros e técnicos eram capazes de entender e usar. No início a interface gráfica era uma tela cheia de texto com a qual se interagia também através de comandos de texto.
  • 13. História da tipografia no meio digital Na ânsia do objetivo de fazer as máquinas funcionarem, Segundo a visão dos tecnólogos, jamais se pensou que a tecnologia seria utilizada posteriormente por usuários inexperientes. Pode-se imaginar que naquele momento os engenheiros jamais pensariam no design visual de uma interface e muito menos em obter os gráficos e letras aparecerem no meio impresso.
  • 14. História da tipografia no meio digital
  • 15. História da tipografia no meio digital A representação tipográfica na tela nasceu prejudicada desde o primeiro momento, com uma tela de 72 dpi, continua sendo na visão tipográfica uma tecnologia pobre, se comparada com outras tecnologias de representação. E, assim, visando uma melhor legibilidade foram desenvolvidas fontes específicas / exclusivas para o meio digital.
  • 16. Exemplo tela de 72 dpi
  • 17. História da tipografia no meio digital Num primeiro momento para o design de textos e documentos Web foram criadas fontes compatíveis, que poderiam ser encontradas tanto no sistema PC quanto Macintosh. Isso resultou em uma pequena variedade de fontes, entre elas a Times (times New Roman do PC), que era a mais utilizada, apesar de não oferecer uma boa leitura na tela, mas produzia melhores resultados na impressão de textos sobre papel. Times New Roman, Georgia, Verdana, Arial e Trebuchet.
  • 18. História da tipografia no meio digital O grande problema (limitação) das fontes digitais é que se o usuário não tiver as fontes instaladas em seu computador, o sistema automaticamente a substituirá pela que tiver. Ao invés de adaptar as tipografias do meio impresso à Web, foram projetadas fontes que se ajustam a retícula de pixels, desenvolvidas especificamente para uso no ciberespaço.
  • 19. História da tipografia no meio digital Essas fontes têm o pixel como unidade de medida e, ao contrario das tipográficas para o meio impresso, elas não são escalonáveis (também chamadas de fontes com contorno). Zuzana Licko desenvolveu a família Emigre para uso em tela, que como outras fontes desenvolvidas especialmente para tela como as famílias Emperor, Universal, Oakland. São Famílias que oferecem uma compatibilidade total entre a tela e a impressora, solucionando essa dupla necessidade atual de trabalhar a tipografia a 72 dpi.
  • 21. Emperor Oakland
  • 22. História da tipografia no meio digital Também, outra tipografia (ou conjunto de fontes) para tela baseada no pixel, foi a criada por Joe Gillespie, sua contribuição para o design de tipos para a tela foi por meio da Mini 7, uma tipografia pata ser utilizada com 7 pixels e que possui uma família muito grande.