Aula Tipografia Libre

Anatomia do TipoComposição Tipográfica

Tipografia Digital

EBA - UFBA | Profª Erica Ribeiro de Andrade | 2009

FonteConjunto completo de sinais alfabéticos e para-alfabéticos que integram um determinado alfabeto em um dos corpos disponíveis.

Tipografia Digital

FamíliaVariações pertencentes a uma fonte:

*Exemplo fonte LT Aroma

Light, Regular,

SemiBold, Bold etc

*Exemplo fonte Myriad Pro

Largura:

Condensada, Normal,

Expandida** etc

**variação não disponível

DicaBons exemplos emLUPTON p.45, 46 e 47.

Tipografia Digital

Altura-x = corpo principal da letra minúscula sem as ascendentes e as descendentes.

Altura de Versal = distância da linha de base ao topo da maiúscula.

Linha de Base = onde as letras repousam. Letras de base curva ultrapassam levemente a linha de base para garantir estabilidade à palavra

Tipografia Digital

Arial 139pt Garamond 139pt

Sistema de medidas: Altura e Entrelinha (leading) > Sistema de Pontos1pt = 1/72 polegadas ou 0,35mm12pts = 1paica

unidade normalmente usada para medir colunas.

Dica - Abreviações:8 paicas = 8p8 pontos = p8, 8 pt8 paicas, 4 pontos = 8p4corpo de 8 pt e entrelinha de 9pt = 8/9

Tipografia Digital

“Após longa prática, seu trabalho [o dos escribas] ganhou uma textura tão homogênea e lexível que a página escrita passou a ser chamada de textus

(tecido, em latim).”

“O instrumento tipográico, seja ele um computador ou uma régua de composição, funciona como um tear. E o tipógrafo, assim como o escriba, procura tecer o texto da maneira mais homogênea possível. Do mesmo modo, os bons tipos são desenhados para produzir uma textura vivaz e homogênea, mas o espacejamento descuidado de letras, linhas e palavras pode rasgar esse tecido.”

“Uma vez satisfeitas as demandas de legibilidade e de ordenação lógica,a homogeneidade da cor é o objetivo mais comum almejado pelo tipógrafo. E isso depende de quatro fatores: o desenho do tipo, o espacejamento das letras, das palavras e das linhas. Nenhum é independente do outro”

[BRINGHURST, p.32]

Tipografia Digital

TextoSequência contínua de palavras, distinta de legenda ou títulos mais curtos - corpo, texto corrido, massa de texto - íntegro, sólido ou lúido, consistente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Vestibu-lum viverra aliquam lectus. Aliquam erat volutpat. Vivamus at urna sit amet urna scelerisque venenatis. Aenean velit lorem, ullamcorper eu, elementum quis, feugiat at, nisi. Maecenas eu elit. Proin et lorem

Amostra de texto na fonte Gentiumfonte: http://www.lipsum.com/

Tipografia Digital

Composição TipográicaPode-se deinir como a organização do conteúdo dentroda estrututura da página - grade, espaços verticais, espaços

horizontais - conferindo segurança na leitura ~ conforto.

Tipografia Digital

Profundidade de Coluna = altura da coluna (pontos, paicas, mm)

- Quantidade de linhas:. acima de 96 linhas = grande profundidade: jornais, dicionários, enciclopédias... -> textos entrecortados por títulos; leitura não linear e descontínua; o leitor seleciona o texto.. entre 40 e 48 linhas = livros, romances... -> leitura linear e contínua; texto denso.

DicaAcrescentar entrelinha facilita a leitura de colunas densas (aproximadamente2 pts acima da medida automática)

Tipografia Digital

- Espacejamento: espaço (global) entre letras- Kerning (ou crenagem): ajuste entre pares de letras especíicas

DicaVeja exemplos emLUPTON p.80 e 81.

D’alva

Tábua

Kerning suprimido

com Kerning

Amostra em Palatino Linotype (Regular e Itálico)

Tipografia Digital

- Espacejamento mecânico: letras equidistantes entre si (desconfortável)- Espacejamento óptico: área proporcional de espaço branco entre as letras.

Letras regulares: E, H, I, M, N, U

Letras irregulares: A, F, J, K, L, P, R, S, T, V, W, X, Y, Z

Letras circulares: B, C, D, G, O, (P), Q, (R)

Tipografia Digital

Espacejamento óptico

DicaSugestão de leitura:RIBEIRO, p.217 à 231.

Tipografia Digital

- Entrelinhamento: distância de uma linha de base para a outra.

Esse exemplo vai mostraro que é entrelhinha

Gentium Basic Bold 36/45pt

DicaVeja exemplos emLUPTON p.82 e 83.

Tipografia Digital

ParágrafoQuebra de linha, marcas de parágrafo - §, ¶

entrada de parágrafo (endentação) parágrafo avançado

Tipografia Digital

continuidade com símbolos (origem: Grécia) linhas recuadas

DicaVeja exemplos emHASLAM p.73 à 75.

Tipografia Digital

Fluxo orgânico da linguagem.Excesso de irregularidade pode ser atenuada com hifenização cautelosa

Alinhamento

à esquerda:

Início do texto quebrado diiculta a leitura, principalmente para leitores inexperientes (Ex.: crianças).USO: legendas, textos curtos.

à direita:

Tipografia Digital

Impróprio para textos longos;Usado em folhas de rosto tradicionais e poesias;Considerado clássico e formal;Ênfase com quebras de linhas propositais;Destaque de frases importantes.

Alinhamento

centralizado:

centralizado afunilado

Tipografia Digital

Forma espaços irregulares entre as palavras (rios). Requer atenção.

Alinhamento

justiicado:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Tipografia Digital

Justiicado forçado.Gentium Basic Bold 24/28pt.

Alinhado à esquerda.Gentium Basic Bold 24/28pt.

Tipografia Digital

Justiicado forçado.Gentium Basic Bold 24/28pt.

Justiicado.Gentium Basic Bold 24/28pt.

Tipografia Digital

Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Aliquam in tortor sed elit aliquam accu-msan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Aliquam in tor-tor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Justiicado forçado hifenizado.Gentium Basic Bold 24/28pt.

Justiicado hifenizado.Gentium Basic Bold 24/28pt.

Tipografia Digital

Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Aliquam in tor-tor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Justiicado forçado hifenizado.Gentium Basic Bold 24/28pt.

Alinhado à esquerda hifenizado.Gentium Basic Bold 24/28pt.

Tipografia Digital

Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Alinhado à esquerda.Gentium Basic Bold 24/28pt.

Alinhado à esquerda hifenizado.Gentium Basic Bold 24/28pt.

Tipografia Digital

Espaço Horizontal:- Comprimento ou medida da linha: largura da coluna (exceto títulos, subtítulos, legenda...)Caracteres por linha:

. leitura contínua = 65. Variação = 45-75 (10 a 11 palavras em português).Linhas longas pedem entrelinha maior.Linhas curtas: jornais, celulares... - prejudicam o fraseado.

Tipografia Digital

Espaço Horizontal:- Espaço entre palavras: quadratim eme = espaço da letra M = distância equivalente ao tamanho do tipo (Ex.: tipo de 12pts, eme mede 12pts); Ene = 1/2 quadratim eme; espaço largo = 1/3 eme etc.*A tipograia digital permitiu outras medidas -> divisão do quadratim eme em unidades. Possibilidade de medidas quebradas (Ex.: 13pts, 15pts...).

Tipografia Digital

Espaço Horizontal:- Hifenização:. não relete a maneira como falamos;. força o leitor a suspender a interpertação entre as passagens de linhas;. não é indicado para leitores pouco experientes;. deve ser usada com cautela e atenção para leitores experientes;. ajuda a suavizar problemas com alinhamento justiicado e à esquerda;. pode ser conigurada nos programas de editoração. Dica

Sugestão de leituraHASLAM p.79 à 82.

Tipografia Digital

Alinhamento Vertical

centralizar pode ajudar

Caixa-alta e caixa-baixa empilhadas: baixíssima velocidade de leitura.

letras romanas foram feitas para icarem uma ao lado da outra.

Tipografia Digital

Alinhamento Verticallinhas de base verticais:preserva a ainidade natural das letras.

Lombad

as LIVR

Tipografia Digital

Hierarquiasistema que organiza o conteúdo, enfatizando dados e preterindo outros.- listas, endentações, VERSAIS, sublinhado, negrito, outra cor,

itálico, outra fonte, elementos gráicos

DicaDê uma olhadaLUPTON p.94 à 99.

Tipografia Digital

DicaBons exemplos no capítulo DIAGRAMA emLUPTON p.112 à 161.

DiagramaOs diagramas servem para organizar o conteúdo no espaço, seja de forma rígida ou lexível, simples ou complexa. Seu objetivo é o controle a partir da pressão interna do conteúdo (texto, ima-gens etc) e da pressão externa (da margem, da moldura etc).

Tipografia Digital

Fontes Escaláveis: vetoriais -> podem ser ampliadas e reduzidas sem perda de qualidade. São deinidas pelo contorno.

Fontes ixas: bitmap ou pixel fonts -> estruturadas pela grade de pixels da tela. Projetadas para serem usadas em um tamanho especíico.

Tipografia Digital

Uso:Programas gráicos: ferramentas de texto -> título (s/quebra de linha) e parágrafo (c/quebra de linha, hifenização...)

InDesign, Page Maker, Scribus, Quark Xpress = programas de paginação. São projetados para diagramar textos e inalizar arquivos.

Tipografia Digital

Problemas comuns em impressão:1. Textos com fontes e caracteres trocados;2. Estilo de fonte trocado;3. Falta de acentos ou caracteres especiais4. Baixa qualidade de impressão (facetamento ou serrilhamento);5. Reluxo de texto.

Causa:- Uso de fontes incompatíveis com a linguagem Post Script (RIPs)

Tipografia Digital

Padrões de fontesTrue Type (Apple)usadas como fontes de sistema pela Microsoft.- originalmente, não compatíveis com a linguagem PS;- quando exportadas em PS, são adaptadas pelo S.O.;- geram excesso de nós quando convertidas em curvas;- são muito difundidas porque são mais baratas.

No Windows = 1 arquivo .TTF

Tipografia Digital

Padrões de fontesPost Script (Adobe)também conhecidas como Type 1.- totalmente compatíveis com a linguagem PS;- mais caras;

No Windows = 2 arquivos - .PFB(impressão) e .PFM (tela)

Tipografia Digital

Padrões de fontesOpen Type (Microsoft e Apple)também conhecidas como True Type 2.- compatíveis com as linguagens PS e PCL;- junção dos fundamentos dos formatos Type 1 e True Type em um único arquivo = lexibilidade;- suporte para grande número de línguas em um único arquivo;

Tipografia Digital

Padrões de fontesOpen Type (Microsoft e Apple)

- centenas de glifos (caracteres);- ligaturas automáticas + elementos decorativos + caracteres numéricos antigos + sobrescritos e subscritos adaptados + frações;- precisão na coniguração do texto

Gera 1 arquivo multiplataforma: .OTF ou .TTF

Bibliografia

BRINGHURST, Robert. Elementos do Estilo Tipográico. versão 3.0, Cosac Naify. São Paulo, 2005.

FARIAS, Priscila Lena. Tipograia digital: o impacto das novas tecnologias. Editora 2AB. Rio de Janeiro. 2000.

HASLAM, Andrew. O Livro e o Designer II: como criar e produzir livros. Edições Rosari. São Paulo, 2007.

HORIE, Ricardo Minoru. Preparação e Fechamento de Arquivos para Artes Gráicas. Ed. Érica. São Paulo, 2005.

LUPTON, Ellen. Pensar com tipos: um guia para designers, escritores, editores e estudantes. Tradução: André Stolarski. Cosac Naify, 2006.

RIBEIRO, Milton. Planejamento Visual Gráico. Linha Gráica e Editora. 2ª ed. 1987.

Aula Tipografia Libre

Documents

Transcript of Aula Tipografia Libre

JSV Piscaglia Libre

Tecnológico Nacional De México atletico.pdf · 16- -19 aÑos 18 19 aÑos 18- libre libre crÉditos crÉditos libre libre -19 aÑos 18 19 aÑos 18- -17 aÑos 16 17 aÑos 16- 15 aÑos

Flora Magica Africana-libre

software libre

Cours Dalle V2.0-Libre

Cappozzo Libre

Por Un Tibet Libre

Arsenale Libre

Lez tipografia

Automata1 Libre

Spazio e Misura-libre

Geometria Tutorial Libre

Zenit tipografia

Area libre

02 Marco Valenti-libre

Sistema - Turno: LIBRE GENERAL · DNI/NIF Nombre Centro Edificio Aula 14/04/2018 (11:00 horas) MATRONA Sistema - Turno: LIBRE GENERAL PROCESOS SELECTIVOS PARA PERSONAL ESTATUTARIO

Affondamento Del Monge-libre

2003 Studi Storici-libre

2014. Sicilia Libre

Aruspice Contro Donne-libre