Sistemas para Internet Disciplina: Design Grfico UNIP tipografia Professor: Daniel Mental Tipografia: Est relacionada com o processo de impresso industrial Caligrafia: Caligrafia: Est relacionada com o processo de desenho manual Mas afinal o que a tipografia? Segundo o Collins Concise Dictionnary (1999), tipografia : 1. uma arte, um ofcio ou processo de compr texto e imprimir por meio de tipos; 2. o planejamento, seleo e composio de tipos para efetuar um trabalho Tipografia Como a linguagem desenhada. 2. o planejamento, seleo e composio de tipos para efetuar um trabalho impresso. Tipografia: Est relacionada com o processo de impresso industrial Fazendo uma adaptao letra do latim, tipografia a escrita com tipos. Um tipo um molde, um pequeno pedao de uma liga de chumbo e antimnio que contm na sua face, e em relevo, a forma espelhada de uma letra (mas tambm sinais de pontuao e outros smbolos tipogrficos), para que quando tintada e pressionada contra o papel resulte numa letra pressionada contra o papel resulte numa letra escrita ou impressa. - matriz de impresso. Este processo remonta poca de Johannes Gutenberg, perto do ano 1450, onde alegadamente se ter impresso pela primeira vez com caracteres mveis. Matriz de Impresso Matriz de Impresso Anatomia de um Tipo Contra-Forma (espao negativo) Ascendente Altura X (altura do x minsculo) Tipos sem serifa Descendente Linha de Base Tipos com Serifa Tipo ou Caractere: Letras, nmeros, smbolos ou sinais de pontuao, individualmente. tipo, caractere: & T Termos Tcnicos tipo, caractere: & @ T Caixa alta: Maisculas. Caixa baixa: Minsculas. Versalete: Caixas altas com altura semelhante altura mdia das minsculas. Espcies de Caracteres CAIXA ALTA caixa baixa ERSALET V E Medidas Corpo: Dimenso pela qual medimos e especificamos o tipo, que medido em pontos. corpo: 18pt 25pt 6pt 8pt 9pt 12pt 14pt 18pt 25pt 30pt 36pt 48pt Classificao do Tipo Serifas Serifa uma haste perpendicular que termina os principais traos de algumas letras. Este recurso facilita a leitura de textos impressos, aglutinando as letras em palavras (idela para textos longos - impressos). Podem ser divididas em: Serifada Antiga Fontes com Serifas Fontes sem Serifas Serifada Antiga Serifada Moderna Revistas impressas, geralmente usam fontes COM SERIFA para grandes oraes de texto Sem Serifa Com Serifa Web sites geralmente usam fontes SEM SERIFA para grandes oraes de texto Com Serifa Sem Serifa Serifada Antiga Tem por caracterstica a variao entre traos finos e grossos. Estas caractersticas transformaram esta categoria de tipos elegantes, srios e clssicos. So os tipos indicados a textos longos (impressso), pois so mais confortveis e facilitam a leitura. Exemplos de tipos antigos: Goudy, Garamond e Times. Serifada Moderna A serifa mais delicada, com traos retos,horizontais e finos, e as transies entre traos finos e grossos so muito mais acentuadas. Os tipos modernos tem uma caracterstica elegante, fria, mecnica e menos potica. Devem ser utilizados com moderao e cuidado em textos longos, pois podem prejudicar a leitura, graas grande variao entre traos grossos e serifas finas. Exemplos: Tiffany, Bodoni e Times Bold. Sem Serifa So tipos uniformes, em que as transies de traos grossos e finos quase no existem. Uma boa soluo utilizar o contraste de peso, que quando bem combinado podem resultar numa pea harmoniosa. So normalmente tipos frios e mais pesados. Exemplos: Futura, Helvtica e Impact. Famlias Agrupamento de todos os tamanhos (corpos) e estilos de um desenho de tipo: - itlico, - negrito, - largo, - condensado, - etc. Classificao das Famlias BSICAS: Com Serifa Sem Serifa Exemplos de fontes BSICAS / Sem Serifa Classificao das Famlias MANUAIS: Caligraphy School Handwritten Brush Trash Graffiti Exemplos de fontes MANUAIS / Caligrficas: Classificao das Famlias GTICAS: Medieval Modernas Celtas Exemplos de fontes GTICAS / Medievais: FANTASIA (FANCY): Cartoon Comic Groovy Old School Curly Western Classificao das Famlias Exemplos de fontes FANTASIA / Cartoon: Eroded Distorted Destroy Horror Classificao das Famlias DINGBATS: Desenhos, cones ou pictogramas em geral. Exemplos de fontes DINGBATS Classificao das Famlias BITMAP: Projetadas especialmente para uso na internet. Geralmente a legibilidade ideal conseguida com um nico tamanho de corpo da fonte (entre corpo Exemplos de fontes BITMAP corpo da fonte (entre corpo 10 e 12). Outros tamanhos distorcem a leitura. Como Ns Lemos? Lemos a metade superior de uma linha de caracteres com mais facilidade que a metade inferior. tudo entendido? tudo entendido? Palavras escritas em caixa baixa, apresentam um reconhecimento mais fcil que as palavras escritas em caixa alta. tudo entendido? tudo entendido? TUDO ENTENDIDO? Legibilidade Tamanho dos Caracteres Letras excessivamente pequenas tornam a leitura difcil ou impossvel. Para impresso de texto corrido (grandes oraes), aconselha-se utilizar no mnimo corpo 8 para o leitor adulto. utilizar no mnimo corpo 8 para o leitor adulto. Para crianas, o tamanho mnimo depende da idade: 10 anos acima: corpo 10-12, 9 anos: corpo 12, 7 e 8 anos: corpo 14-16, 6 anos: corpo 14-18. Legibilidade Estilo dos Caracteres Texto composto de caixa baixa mais legvel do que em caixa alta. TEXTO COMPOSTO DE CAIXA ALTA MENOS LEGVEL DO QUE EM CAIXA ALTA. LEGVEL DO QUE EM CAIXA ALTA. Itlico e os estilos de destaque em geral so menos legveis do que o texto Negrito e os estilos de destaque em geral so menos legveis do que o texto regular. Contrastes de Caracteres Tamanho Um contraste de tamanho torna-se bvio, tipo grandes versus tipo pequeno. Porm para utiliz-lo o contraste deve ser bem visvel e perceptvel (pois diferenas pequenas podem dar a sensao de erro). Contrastes de Caracteres Peso Refere-se espessura dos traos. A maioria das famlias contm tipos de diferentes pesos. Na combinao de pesos enfatize o contraste. O contraste por peso torna a pgina mais interessante e auxilia na organizao da informao. Contrastes de Caracteres Estrutura Refere-se maneira pela qual o tipo construdo (antiga, moderna, sem serifa, manuscrita e decorativa). Evite colocar duas fontes diferentes, porm similares, na mesma pgina, pois a sensao de distrao e erro. Contrastes de Caracteres Direo a inclinao do tipo, mas evite este recurso de forma desnecessria, pois normalmente no melhora a esttica visual da composio. Um direcionamento vertical pode criar um impacto dramtico, justificando seu uso. Bom exemplo de inverso de direo (depende do contexto) Fontes mais presentes nas Mquinas de usurios Windows e Mac Referncia: http://www.codestyle.org/css/font-family/sampler- CombinedResultsFull.shtml Exemplos do BOM uso da Tipografia Herb Lubalin, 1965 Herb Lubalin, 1965 Links Interessantes www.dafont.com www.woww.com.br Baixar fontes grtis: Diversidade em design e tipografia: www.woww.com.br http://sdr-designer.blogspot.com/ Tipografia, design, refexo: