Fontes
tipográficos
Uma introdução conceitual
Pré-história:Pré-história: a escrita e glifos fonéticosa escrita e glifos fonéticos
Originalmente, glifos (inscrições) era...
Pré-história:Pré-história: a escrita e glifos fonéticosa escrita e glifos fonéticos
– Diversas culturas ocidentais geraram...
História:História: a escrita impressaa escrita impressa
● Reprodutividade da comunicação escrita
– a partir da invenção do...
Linguagem escrita e grafemasLinguagem escrita e grafemas
● Grafema = conjunto de glifos, unidade mínima de um sistema
de e...
Estilos de escritaEstilos de escrita
● Linguas logográficas = menos variação de estilo
do que as alfabéticas,
● quantidade...
Que é um editorQue é um editor
de fontes?de fontes?
● Software para projetar ou editar (modificar)
fontes tipográficos
● S...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Fonte é uma c...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Caracteres x ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Tipos de Desi...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Renderização ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
– Fonte vetoria...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Caminhos e pr...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Métricas dos ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Coordenadas
–...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Coordenadas
–...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Componentes
–
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Mesmo tamanho...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Elementos
– N...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Fluidez das f...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Origem caligr...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Escape (espaç...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Harmonia da m...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Itálica X cur...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Serifa ou não...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Legibilidade ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Proporções
– ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Versalete
– C...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Capitulares
–...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Proporções de...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Contraste do ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Economia de p...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Ajuste de sim...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Equilíbrio en...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Kerning de pa...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Ligaduras de ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Legibilidade ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Classificação...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Blackletter
–...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Humanista
– T...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Old style ou ...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Transicional
...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Moderna (Dido...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Serifa chapad...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Sem-serifa
(g...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Serifa ou não...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Formatos de F...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Fontes digita...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Post Script T...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● True Type
● C...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● PS Type 2
– F...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Open type
– A...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● PS Type 3
– V...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Outros format...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Fonte SVG (de...
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Metadados par...
Renderização comRenderização com
resolução aparenteresolução aparente
● Anti aliasing
– Tonalidade variável
– Volume de ti...
Uso de fontes digitaisUso de fontes digitais
● Caracteres e glifos são formas repetitivas de
mapas de bit. A substituição ...
LinksLinks
http://www.typeworkshop.com/
http://www.rsub.com/typographic/
http://ilovetypography.com/
http://www.designadap...
Upcoming SlideShare
Loading in...5
×

Fontes tipograficos

2,261

Published on

Uma introdução conceitual a fontes.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,261
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fontes tipograficos

  1. 1. Fontes tipográficos Uma introdução conceitual
  2. 2. Pré-história:Pré-história: a escrita e glifos fonéticosa escrita e glifos fonéticos Originalmente, glifos (inscrições) eram pictogramas, evoluindo para ideogramas. Ideogramas permitem a povos de diferentes dialetos se comunicarem pela escrita Pictogramas e ideogramas foram se tornando mais abstratos e sofisticados. . Duas vertentes no ocidente – a egipcia e a suméria, com mais de mil glifos cada. Ocorreu uma adoção de subconjuntos cuneiformes para o suporte ao comércio. Supostamente isto (a negociação) causou a conversão para representação de fonemas.
  3. 3. Pré-história:Pré-história: a escrita e glifos fonéticosa escrita e glifos fonéticos – Diversas culturas ocidentais geraram linguagens escritas que se auto- influenciaram derivando do ideograma para representações de sílabas e fonemas. ● Egipcio hierático ● Egipcio demótico ● Cuneiforme ugaritico ● Fenício ........ ● Grego ● Etrusco ● Romano – No oriente, as escritas japonesa e coreana, derivadas de ideogramas chineses também evoluiram para representação silábica.
  4. 4. História:História: a escrita impressaa escrita impressa ● Reprodutividade da comunicação escrita – a partir da invenção do papel. – Antecedentes = pedra, madeira, metal, placas ceramicas, vasos ceramicos, folhas vegetais, papiro trançado, ● O papel foi inventado na China (Ts`ai Lun, 104 DC). ● A imprensa com típos móveis também (Bi Sheng 1040- DC). ● A imprensa com tipos metálicos foi inventada na Coréia (Choe Yun-ul - 1300DC) ● A impressão mecanizada com tipos móveis frente e verso foi inventada na Alemanha (Johannes Gutemberg, 1450 DC) – Todo o desenvolvimento da moderna tipografia se originou aqui. ● A evolução do projeto de tipos partiu da reprodução da escrita de pena para conceitos próprios.
  5. 5. Linguagem escrita e grafemasLinguagem escrita e grafemas ● Grafema = conjunto de glifos, unidade mínima de um sistema de escrita, pode representar: ● Um fonema (línguagens (1)alfabéticas, (2)abjads e (3)abujidas) ● (1) consoantes e vogais - latino, cirílico ● (2) consoantes com vogais implícitas - hebraico, árabe, indonésio / ● (3) consoantes com modificadores vocálicos - sânscrito, hindi, tibetano, ● Uma sílaba (linguagens silábicas) ● japonês, persa, ibérico ● Um ideograma (linguagens logográficas) ● chinês, maia, egípcio hieroglifico ● Considerações para a tipografia (e na construção de fontes), – Tanto faz se o glifo vai representar som ou idéiaTanto faz se o glifo vai representar som ou idéia – A linguagem associada ao fonte gera regras específicas – Regras de concatenação dos glifos e ortografia, formando grafemas, palavras, idéias..
  6. 6. Estilos de escritaEstilos de escrita ● Linguas logográficas = menos variação de estilo do que as alfabéticas, ● quantidade de grafemas muito grande. (mais de 5000 em chinês) ● Estilos se desenvolveram a partir da caligrafia e dos tipos de ferramenta de escrever – pincel, pena chata, pena redonda, cinzel. ● A reprodutividade técnica (impressão) fator gerador de: ● Necessidade de melhor legibilidade e identificação (reconhecimento) dos caracteres ● Projeto geométrico de diversos estilos ● inspirados inicialmente nos traços caligráficos ● Posteriormente assumindo outras prioridades de projeto.
  7. 7. Que é um editorQue é um editor de fontes?de fontes? ● Software para projetar ou editar (modificar) fontes tipográficos ● Similar ao Corel, Freehand, Illustrator, inkscape... trabalha com vetores ● permite desenhar letras. ● Orientado a conjuntos de desenhos e regras de disposição formando uma base de dados. ● Permite descrever como as imagens desenhadas vão interagir entre si. ● Duas imagens de letras justapostas devem ter uma distancia (a métrica do fonte) ou certa sequencia de 2 desenhos deve ser substituída por um terceiro (ligaduras, acentuações etc). ● O editor empacota todos os desenhos das letras e os metadados em um arquivo que o computador (softwares de texto) entenderá como arquivo de fonte para compor textos e títulos.
  8. 8. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Fonte é uma coleção de GLIFOS com um ENCODING e tabelas de substituições ● Glifos são imagens das letras ou dos ideogramas (Grego glifo – inscrição) usados na escrita. ● Encoding são regras de roteamento de cadeias de CARACTERES (bytes) para a saída em cadeias de Glifos, ● Caracteres são o conceito que representa as letras ou as partes dos ideogramas.. ● Existem outras regras sobre como glifos adjacentes ou caracteres adjacentes devem ser substituídos por outros caracteres ou outros glifos. ● No alfabeto latino, a acentuação é feita por substituição de caracteres - substituição de glifos é opcional. ● Em outras línguas como no script arábico, a substituição de glifos é obrigatória.
  9. 9. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Caracteres x glifos – Caractere.... “A” (línguas ocidentais) – Encoding US-ASCII #41 HEX (“A”= 065) – #61 HEX (“a”= 097) ● Glifos correspondentes – Línguas ocidentais tem glifos e caracteres correspondentes entre si admitindo estilos para o conjunto – Línguas orientais tem diversos glifos para cada caracter, selecionados conforme o contexto. Sheen - arábico (=s) A - ocidental
  10. 10. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Tipos de Design do fonte: ● Contorno (tamanho escalonável) – A imagem definida pelo contorno vetorial de curvas splines ou beziers, e o interior preenchido com cor na renderização. ● Bitmap (tamanho fixo) – Cada glifo corresponde a um tamanho do caractere representado.(requer pares para display e impressão). ● Traçado (tamanho escalonável) – Imagem definida vetorialmente por linhas de centro do caractere, espessura definida na renderização Saída BITMAPS - Alteração da resolução
  11. 11. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Renderização é o mesmo que INTERPRETAÇÃO – Alterações visando melhor resolução da imagem impressa – Fontes fotográficos = detalhes engrossados para adequar a limites de resolução da impressão – Fontes digitais = proporções modificadas para encaixar na resolução do dispositivo de saída (hinting, instructing). – A quantidade de bits (resolução aparente = redução de serrilhado) também influencia nos resultados (metadados). – Renderização com e sem HINTING
  12. 12. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos – Fonte vetorial (contorno ou traçado) = após a renderização é um bitmap, (no vídeo ou no papel). – Caminho vetorial é definido por segmentos de retas e curvas Spline. ● Curvas Spline do tipo Bezier podem ser quadráticas ou cúbicas. ● Fontes PS = beziers cúbicas, fontes True Type = beziers quadráticas, fontes SVG = ambas). – Retas tem pontos de controle nas extremidades do segmento – Splines cúbicas = 4 pontos, 2 de posição e 2 de controle – Splines cúbicas = 3 pontos, 2 de posição e 1 de controlei ● Outros tipos de de spline – lineares, – NURBS (quadráticas com diversos pontos de controle) – Clotóides (segmentos de raio constante entre pontos tangentes) ● O Fontforge converte clotóides em beziers para gerar fontes. A transformação de bezier cúbicas em quadráticas gera alguma perda de qualidade
  13. 13. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Caminhos e preenchimentos – O caminho vetorial não deve se auto-interceptar. – A direção do caminho deve ser definida (destrógira ou levógira) para preenchimento – Convenção – caminho externo destrógiro, internos levógiros (PS fonts) ● Coordenadas – locação dos pontos da spline – Todo software de desenho vetorial usa unidades adimensionais (números puros). – Diversos formatos requerem números inteiros entre -32768 e 32767 – Use limites grandes para maior exatidão nos corpos pequenos. – True type exige inteiros com limites na potencia de 2
  14. 14. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Métricas dos fontes fundidos – Paica = 1/6 de polegada = 12 pontos – Ponto = 1/72 de polegada ● Métricas do design de fontes – Tamanho M – altura do corpo – Unidades M – subdivisões do tamanho M – Fontes PS – 1000 unidades – True Type – 1024 ou 2048 unidades ● Exemplo – Um caracter barra tem 500 unidades de comprimento, em um fonte de tamanho M = 1000. – A tela mostra a barra em corpo 12, logo 500/1000*12 = 6 pontos; se o display tiver 72 ppi o tamanho da barra será de exatamente 6 pixels.
  15. 15. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Coordenadas – Linha base (apoio da linha escrita) usualmente vale 0 (zero) na direção vertical – Origem horizontal – ponto de origem do traçado vetorial do glifo. Pode ter distancia positiva ou negativa com relação ao ponto 0 do eixo x (origem coordenada) – Avanço – tamanho horizontal do glifo, distancia da origem do glifo à origem do próximo glifo na linha escrita. ● Caracteres chineses, japoneses e coreanos tem avanço horizontal e também vertical – Rolagem – distancia da origem coordenada à origem horizontal (esquerda) distancia da última coordenada do glifo à ordenada x da largura (direita)
  16. 16. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Coordenadas – Altura x = altura das minúsculas – Ascendente = altura das minusculas com haste superior – Descendente = altura abaixo da linha base das minúsculas com haste inferior – Altura Cap = altura das maiusculas ● Pode ser igual ou menor que a ascendente ● A soma das alturas ascendente e descendente determina o tamanho do fonte no conceito da fundição. – Fontes digitais não tem limitação de tamanho mas é conveniente manter o conceito.
  17. 17. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Componentes –
  18. 18. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Mesmo tamanho – Letras não podem ter a mesma altura para ter o mesmo tamanho. (áreas visuais) – Também não podem ficar apoiadas na mesma linha para ficarem ópticamente alinhadas. typeworkshop.com
  19. 19. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Elementos – Nomenclatura - componentes do fonte typeworkshop.com
  20. 20. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Fluidez das formas – Curvas tendem a angulos diferentes de 90 graus typeworkshop.com
  21. 21. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Origem caligráfica – Contraste obtido por pressão ou por formato da pena typeworkshop.com
  22. 22. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Escape (espaçamento) – O ritmo se refere aos espaços brancos dos glifos – coerente com o escape. typeworkshop.com
  23. 23. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Harmonia da mancha de texto – Equilibrar o branco e o preto typeworkshop.com
  24. 24. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Itálica X cursiva – O ângulo não define por si estas características, é um fator construtivo. typeworkshop.com
  25. 25. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Serifa ou não serifa? – A letra “e” do meio tem um contraste que a define mais provávelmente como tipo serifado. typeworkshop.com
  26. 26. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Legibilidade do texto – A linha superior tem menor legibilidade para texto corrido (condensado, contraste) typeworkshop.com
  27. 27. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Proporções – As alturas Cap e X tem que ter proporções para que maiusculas tenham o mesmo peso visual das minusculas typeworkshop.com
  28. 28. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Versalete – Caracteres devem poder funcionar visualmente bem em conjunto. typeworkshop.com
  29. 29. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Capitulares – Feitas para separar manchas de texto, não para escrever palavras. typeworkshop.com
  30. 30. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Proporções de negrito – Altura X do negrito impresso tem que ser maior para uniformidade do conjunto., – a diferença pode diminuir em fontes para video. typeworkshop.com
  31. 31. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Contraste do negrito – Nào se trata de apenas engrossar traços – o estilo pede pelo ajuste do contraste do fonte. typeworkshop.com
  32. 32. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Economia de pontos de bezier – Manter coordenadas na vertical e na horizontal simplifica o design typeworkshop.com
  33. 33. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Ajuste de simetrias – Alguns caracteres podem ser criados a partir de outros, mas o espaço branco deve apresentar harmonia no conjunto typeworkshop.com
  34. 34. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Equilíbrio entre formas – Alguns caracteres podem ser criados a partir de outros, mas o espaço branco deve apresentar harmonia no conjunto typeworkshop.com
  35. 35. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Kerning de pares – A manutenção visual do escape pode pedir pela aproximação de certos pares de caracteres (ritmo do texto) typeworkshop.com
  36. 36. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Ligaduras de tipos – Onde há interferencia visual entre pares, pode-se usar a substituição do par por um glifo especial. typeworkshop.com
  37. 37. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Legibilidade x Fluidez (readability x legibility) – Elementos subjetivos do projeto de um fonte, que diferenciam o design dos glifos e dos espaçamentos entre glifos. ● A fluidez descreve a rapidez de absorção pelo leitor do conteúdo do texto. ● A legibilidade descreve a capacidade de localizar uma palavra em meio a um texto. – Ambas as características se referem ao design do conjunto dos caracteres.
  38. 38. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Classificação histórica /cronológica – Blackletter – Humanista – Old style – Transicional – Moderna – Serifa chapada – Sem-serifa – Decorativas
  39. 39. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Blackletter – Também chamadas (inadequadamente) Góticas ou “Old english”. Permitiam uma escrita mais veloz por seu traço mais geométrico. Entretanto isto não permite destaques no texto. ● Evolução do estilo Carolíngeo (Carlos Magno) padronização internacional da escrita que introduziu as minúsculas ● Por sua vez evolução do Uncial, (escrita de maiúsculas usada em latim e grego) derivada das romanas cursivas e mais adequada para escrever em papel liso. ● A escrita uncial usava um caractere ampliado (capitulares) para separação de grupos de texto, de onde se derivou a forma com maiúsculas e minúsculas – ....(uncial)
  40. 40. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Humanista – Tipografia com traços mais organicos facilitam a leitura em comparação com o desenho blackletter ● Traços horizontais inclinados no “e” minusculo ● Altura da minuscula proporcionalmente pequena ● Pouco contraste entre traços “grossos” e “finos” (pequena variação de espessura de traços) ● Texto escuro (se refere à densidade da mancha de texto, a linha de texto forma traços se vista fora de foco).
  41. 41. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Old style ou Garalde – Refinamento do humanista, mostrando maior contraste pelo aperfeiçoamento técnico de entalhadores e fundidores de tipos. ● Etapas históricas – Fase italiana – 1495 – Aldus Manutius – Francesco Griffo (exemplo = monotype Bembo) – Fase Francesa – 1540 – Claude Garamond – Robert Granjon (exemplo = stempel Garamond) – Fase Holandesa – 1600 – Christofel Van Dijk – Miklos Kis (exemplo = monotype Ehrdardt) – Fase Inglesa – 1725 – Willian Caslon (exemplo = adobe Caslon)
  42. 42. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Transicional (neoclássica) – Estilo mecanicista, rompimento com a caligrafia. ● 1692 - Jacques Jaugeon - Gráfica Real de Luiz XIV, fonte “Romain du Roi” (Romana do Rei) - “tipologia “científica”. – Serifas retas e horizontais – Contraste exacerbado, ortogonalidade – 1o. livro somente em 1702 ● 1758 – John Baskerville e Benjamin Franklin – Criação do sistema de pontos (métricas) usado até hoje nos fontes digitais,
  43. 43. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Moderna (Didone) – Tipologia para compor manchetes, logotipos, tipologia com personalidade ● Firmin Didot (1784) Bodoni, diversas fonthouses como ITC, Adobe, etc.. – Contraste grande e abrupto entre as hastes finas e grossas – Serifas sem suporte de traços ultradelgados – Eixos verticais – Tensão na horizontal (condensado) – Abertura pequena ● Excelente para títulos, ruim para texto
  44. 44. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Serifa chapada (egípcia) – Fontes para anuncios e posters, caricaturas exacerbando características construtivas das modernas. – Chamadas egípcias por um modismo de 1800, expedições de Napoleão ao Egito. – A diferença com as modernas está nas variações (redução) de contraste e/ou no desenho marcado das serifas.
  45. 45. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Sem-serifa (grotesca) – Também chamadas Góticas, Suíças ou Dóricas (as serifadas chamadas Romanas) ● Primeiros modelos em 1800, contemporaneas das Slab serif usadas para o texto onde as outras ficavam nos títulos. ● Proposta em 1780 para estampa em relevo para acessibilidade aos cegos (Valentin Hauy, França) ● Preferidas para leitura em dispositivos de video ● Usadas combinando com serifadas para destaque de trechos de texto
  46. 46. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Serifa ou não? – A serifa tem como principal efeito visual alinhar a direção da leitura, em particular no uso de corpos pequenos de texto. – O uso da serifa como estilo remete ao neoclássico francês (mecanicista, um pouco mais leve que Blackletter) ou ao modernismo, onde esta função de legibilidade se perde. – Letras sem serifa tendem a ser mais “leves” para ler, mas os critérios de projeto gráfico do fonte passam a ser mais exigentes.
  47. 47. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Formatos de Fontes digitais – Type 1 – True Type – Type 2 – Open font – Type 3 – SVG – Outros... ● Renderização em corpos pequenos – PS – instructing – True type - hinting
  48. 48. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Fontes digitais = 1982 ● Impressoras matriciais criaram a possibilidade (através de comandos escape) de imprimir vetores rasterizados no momento da impressão (como as plotadoras de CAD). ● A linguagem PostScript (Xerox Interpress -1978 Adobe PS 1982) ampliou o conceito para imprimir a laser, ao custo de requerer processamento específico por um interpretador (RIP) ● Junto com a linguagem, um processamento específico para texto foi criado (ou terá sido o oposto...) A 1a, impressora desktop fornecida com PS embarcado foi a Apple Laser Writer, em 1985 ● Especificação PS - metadados para renderização em dispositivos de alta resolução (instructing) mantida proprietária pela Adobe..
  49. 49. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Post Script Type 1 – Subconjunto do Type 0 para fontes na linguagem PostScript (anos 85 a 90) Formato originalmente proprietário da Adobe, para fontes de alta qualidade gráfica. – Fonte composto por conjuntos de arquivos (.afm, .pfm, .pfb) – Em 1991 a Apple decidiu quebrar o monopólio desenvolvendo a True Type, e a Adobe abriu o sistema para softwares editores de fonte no mercado. – Fontes alternativos Bitstream e MetaFont foram propostos, mas sem um engine padrão.
  50. 50. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● True Type ● Criado pela Apple em 1991, lançado com o System 7 ● Licenciado para a Microsoft (lançado com Win 3.1) em troca de um processador compatível PS chamado TrueImage. ● Fontes e micro-resolução projetados pela Monotype Corp O formato True Type para MS-Windows é diferente daquele para o sistema MAC OS. ● Problemas iniciais de visualização na tela e dificuldade na adoção pelo mercado gráfico profissional. Em 1989 acordo entre Adobe e Apple com o Type Manager (ATM), permitindo renderização de tipos no vídeo. ● ATM Licenciado para a Microsoft em 1990, estratégia da Adobe para reverter o progresso do formato True Type ● Em 1996 em acordo com a Adobe, um novo formato permitiu mesclar True Type com Type 1 no Windows – o Open Type. ● A popularização teve o custo de desvalorizar a qualidade tipográfica na cultura da editoração. – Formatos (,ttf - fonte, .ttc - collection)..
  51. 51. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● PS Type 2 – Formato com extensão CFF (Compact Font Format) designado para fontes embutidos em arquivos PDF3 – Usado como base do Open Type
  52. 52. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Open type – Acordo entre Adobe e Microsoft compatibilizando os formatos Type2 e True Type. (extensão CFF – compact font format) – Os glifos podem ser definidoa tanto pela especificação Type 1 como True Type. – Formatos do arquivo .otf, ttf – Arquivos de características avançadas podem ser incorporados /compilados no arquivo OTF através de um editor como o FontForge, formato “.fea”.
  53. 53. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● PS Type 3 – Versão aberta de baixo custo lançado na época do Type 1 – sem instruções de “hint” (inadequado para texto miúdo). – Usa o conjunto completo de instruções PS no processamento do fonte, ao invés de um subconjunto como no Type 1. – Permite efeitos artísticos na renderização mas não compativel com o renderizador ATM
  54. 54. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Outros formatos Post Script – Type 4 – fontes de impressora para armazenamento em cartuchos – Type 5 – fontes de impressora para download em ROM – Types 9,10, 11 – coleções de glifos para chines, japones e coreano – Type 14 – (Camaleão) – proposta de fonte com modificadores de geometria. – Type 32 – conversão de fontes bitmap diretamente no interpretador PS – Type 42 – adaptação de True Type para imprimir em PS/
  55. 55. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Fonte SVG (derivado de XML) – Formato de desenho vetorial - proposto pelo W3C como futuro padrão para uso em páginas WEB = visualização de páginas com o estilo de texto definido pelo designer – A visualização de fontes nas páginas Web exige que estejam préviamente instaladas no sistema operacional. (download, reboot, carregar página novamente). ● O formato SVG pode ser renderizado diretamente no Browser. – Atualmente, Safari, Chrome, Opera, Android e outros “mobile” (ainda não IExplorer e Firefox)
  56. 56. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Metadados para renderização – A renderização de fontes de pequeno formato requer adequação à resolução para não desfigurar o design dos tipos. ● PS – instructing (patenteado) ● True type – hinting (patenteado) – Metadados criados para impressoras, com profundidade de cor de 1-bit – Para dispositivos com variação da intensidade da cor, o gerenciamento da renderização é definido no sistema ao invés do fonte. (Apple Quartz Type, Microsoft Clear Type).
  57. 57. Renderização comRenderização com resolução aparenteresolução aparente ● Anti aliasing – Tonalidade variável – Volume de tinta variável Vetor........ 1-bit ...... 2 bits (4 tons) O processamento com profundidade de bits depende do dispositivo de saída e esta informação é separada dos dados do fonte, porém considerando aspectos de compatibilidade
  58. 58. Uso de fontes digitaisUso de fontes digitais ● Caracteres e glifos são formas repetitivas de mapas de bit. A substituição feita em um subsistema do sistema operacional é uma necessidade para o tempo de processamento do arquivo. ● Spoolers, drivers e RIPs completos funcionando como servidores dedicados são usados para acelerar o processamento. – Antigamente era contraproducente embutir fontes no arquivo. Hoje o tamanho dos arquivos a processar reverteram esta tendencia. A disponibilidade online se tornou mais importante do que o tamanho e o tempo de processamento dos arquivos. ● A legibilidade sempre foi o problema do tipógrafo. Na minha opinião, a popularização dos fontes digitais, resultaram em fontes ruins, softwares inadequados para renderizar texto e a perda da qualidade da produção gráfica quanto a textos, por uma questão basicamente cultural.
  59. 59. LinksLinks http://www.typeworkshop.com/ http://www.rsub.com/typographic/ http://ilovetypography.com/ http://www.designadaptavel.com.br/artigos/ritmo-vertical-tipografia-e-musica http://en.wikipedia.org/wiki/Typography http://www.w3.org/TR/CSS2/fonts.html http://www.w3.org/TR/SVG/fonts.html http://www.fonts.com/ http://www.behance.net/?field=97 http://www.smashingmagazine.com/tag/typography/ http://www.microsoft.com/typography/default.mspx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×