SlideShare uma empresa Scribd logo
1 de 59
Baixar para ler offline
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) 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.
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.
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.
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..
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.
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.
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.
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
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
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
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
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
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.
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)
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.
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
– 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
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Elementos
– Nomenclatura - componentes do fonte
typeworkshop.com
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
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
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
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
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
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
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
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
Conceitos introdutóriosConceitos introdutórios
● Fontes
● Splines
● Métricas
● Design
● Estilos
● Formatos
● Versalete
– Caracteres devem poder funcionar
visualmente bem em conjunto.
typeworkshop.com
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
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
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
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
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
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
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
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
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.
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
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)
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).
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)
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,
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
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.
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
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.
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
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..
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.
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)..
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
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”.
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
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/
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)
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).
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
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.
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

Mais conteúdo relacionado

Destaque

Introducción a la tipografía
Introducción a la tipografíaIntroducción a la tipografía
Introducción a la tipografíaOmar Sosa-Tzec
 
Conceitos básicos sobre tipografia.
Conceitos básicos sobre tipografia.Conceitos básicos sobre tipografia.
Conceitos básicos sobre tipografia.Wunderman
 
Teoria Super Básica de Tipografia
Teoria Super Básica de TipografiaTeoria Super Básica de Tipografia
Teoria Super Básica de TipografiaFábio Gonçalves
 
Apresentação do Curso Técnico em Informática para Internet
Apresentação do Curso Técnico em Informática para InternetApresentação do Curso Técnico em Informática para Internet
Apresentação do Curso Técnico em Informática para InternetProfessor Samuel Ribeiro
 
Programação Visual - Comunicação Visual - Design Gráfico
Programação Visual - Comunicação Visual - Design Gráfico Programação Visual - Comunicação Visual - Design Gráfico
Programação Visual - Comunicação Visual - Design Gráfico Flávia Santos
 
Apostila Linguagem C
Apostila Linguagem CApostila Linguagem C
Apostila Linguagem Cinfo_cimol
 
Produção Gráfica - Breve história das artes gráficas
Produção Gráfica - Breve história das artes gráficasProdução Gráfica - Breve história das artes gráficas
Produção Gráfica - Breve história das artes gráficasOdair Cavichioli
 
Anatomia Tipográfica
Anatomia TipográficaAnatomia Tipográfica
Anatomia Tipográficaguest788d5c4
 
Produção gráfica - Foco em fechamento de arquivo
Produção gráfica - Foco em  fechamento de arquivoProdução gráfica - Foco em  fechamento de arquivo
Produção gráfica - Foco em fechamento de arquivoEduardo Sully
 
2б космос
2б космос2б космос
2б космосZoyaSGT
 
Delivering Excellent Support Customer Experiences in Marketing
Delivering Excellent Support Customer Experiences in MarketingDelivering Excellent Support Customer Experiences in Marketing
Delivering Excellent Support Customer Experiences in MarketingDavid Loia
 

Destaque (19)

Introducción a la tipografía
Introducción a la tipografíaIntroducción a la tipografía
Introducción a la tipografía
 
Pré história da linguagem escrita
Pré história da linguagem escritaPré história da linguagem escrita
Pré história da linguagem escrita
 
Conceitos básicos sobre tipografia.
Conceitos básicos sobre tipografia.Conceitos básicos sobre tipografia.
Conceitos básicos sobre tipografia.
 
Teoria Super Básica de Tipografia
Teoria Super Básica de TipografiaTeoria Super Básica de Tipografia
Teoria Super Básica de Tipografia
 
Apresentação do Curso Técnico em Informática para Internet
Apresentação do Curso Técnico em Informática para InternetApresentação do Curso Técnico em Informática para Internet
Apresentação do Curso Técnico em Informática para Internet
 
Programação Visual - Comunicação Visual - Design Gráfico
Programação Visual - Comunicação Visual - Design Gráfico Programação Visual - Comunicação Visual - Design Gráfico
Programação Visual - Comunicação Visual - Design Gráfico
 
Apostila Linguagem C
Apostila Linguagem CApostila Linguagem C
Apostila Linguagem C
 
Produção Gráfica - Breve história das artes gráficas
Produção Gráfica - Breve história das artes gráficasProdução Gráfica - Breve história das artes gráficas
Produção Gráfica - Breve história das artes gráficas
 
Guia de tipos - Tipografia
Guia de tipos - TipografiaGuia de tipos - Tipografia
Guia de tipos - Tipografia
 
Anatomia Tipográfica
Anatomia TipográficaAnatomia Tipográfica
Anatomia Tipográfica
 
Tipografia
TipografiaTipografia
Tipografia
 
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.
 
BITS Y QBITS
BITS Y QBITSBITS Y QBITS
BITS Y QBITS
 
Produção gráfica - Foco em fechamento de arquivo
Produção gráfica - Foco em  fechamento de arquivoProdução gráfica - Foco em  fechamento de arquivo
Produção gráfica - Foco em fechamento de arquivo
 
Tipografia
TipografiaTipografia
Tipografia
 
Brin 3 q12
Brin   3 q12Brin   3 q12
Brin 3 q12
 
2б космос
2б космос2б космос
2б космос
 
easy Vocabulary
easy Vocabulary easy Vocabulary
easy Vocabulary
 
Delivering Excellent Support Customer Experiences in Marketing
Delivering Excellent Support Customer Experiences in MarketingDelivering Excellent Support Customer Experiences in Marketing
Delivering Excellent Support Customer Experiences in Marketing
 

Mais de Ary Luiz

Palestra uv tec screen
Palestra uv tec screenPalestra uv tec screen
Palestra uv tec screenAry Luiz
 
Charla uv
Charla uv Charla uv
Charla uv Ary Luiz
 
Qadrinholandia
QadrinholandiaQadrinholandia
QadrinholandiaAry Luiz
 
Guido balão 5
Guido balão 5Guido balão 5
Guido balão 5Ary Luiz
 
Colorimetria na impressão digital
Colorimetria na impressão digitalColorimetria na impressão digital
Colorimetria na impressão digitalAry Luiz
 
A cor na serigrafia
A cor na serigrafiaA cor na serigrafia
A cor na serigrafiaAry Luiz
 

Mais de Ary Luiz (6)

Palestra uv tec screen
Palestra uv tec screenPalestra uv tec screen
Palestra uv tec screen
 
Charla uv
Charla uv Charla uv
Charla uv
 
Qadrinholandia
QadrinholandiaQadrinholandia
Qadrinholandia
 
Guido balão 5
Guido balão 5Guido balão 5
Guido balão 5
 
Colorimetria na impressão digital
Colorimetria na impressão digitalColorimetria na impressão digital
Colorimetria na impressão digital
 
A cor na serigrafia
A cor na serigrafiaA cor na serigrafia
A cor na serigrafia
 

Último

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...AnnaCarolina242437
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAnnaCarolina242437
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfAnnaCarolina242437
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024CarolTelles6
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAnnaCarolina242437
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Érica Pizzino
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfCharlesFranklin13
 

Último (8)

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdf
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdf
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdf
 

Fontes tipográficos: uma introdução conceitual

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Componentes –
  • 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. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Elementos – Nomenclatura - componentes do fonte typeworkshop.com
  • 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. 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. 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. 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. 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. 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. 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. 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. Conceitos introdutóriosConceitos introdutórios ● Fontes ● Splines ● Métricas ● Design ● Estilos ● Formatos ● Versalete – Caracteres devem poder funcionar visualmente bem em conjunto. typeworkshop.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.