Noções de layout Texto e tipografia Sistema Tipográfico de Grelha.

Noções de layout Texto e tipografia Sistema Tipográfico de Grelha

Princípios tipográficos elementares
De um modo geral, independentemente do suporte utilizado, a apresentação de um conteúdo na forma de texto implica opções tipográficas e gráficas que permitam a leitura do texto favoreçam a transmissão da mensagem desejada ESLC

A legibilidade tipográfica pode ser assegurada mediante uma combinação eficaz e funcional de diversas variáveis a legibilidade de um texto corresponde à facilidade de leitura das palavras, frases e blocos de texto ESLC

A legibilidade tipográfica depende: dos destaques hierárquicos atribuídos ao texto (título principal, subtítulos, corpo de texto, etc.); Design | princípios Contraste Os objectivos básicos do contraste são criar um interesse na página e ajudar na organização da informação constante numa página (web ou impressa). Um leitor deve ser capaz de entender instantaneamente a forma como a informação está organizada, assim como o fluxo lógico de um elemento para o outro. Devemos evitar elementos na página que sejam similares. Se os elementos (tipos, cores, tamanhos, espessuras de linhas, formas, espaços, etc) não são os mesmos, então torne-os bastante diferentes. Para o contraste ser eficaz tem de ser forte! […] O contraste é criado quando dois elementos são diferentes. Se os dois elementos apenas parecem diferentes , mas não o são, não temos contraste mas sim conflito. ESLC Design, princípios (2006). Scripto, Textos de Apoio. M.C.E.M. Lisboa: Univ. Aberta, p.1.

do nível de legibilidade da “família” (tipo de letra) utilizada no corpo do texto, bem como da variante e tamanho dos caracteres o tipo de letra utilizado não deve dificultar ou inibir a leitura o tipo de letra escolhido deve dispor de variações de peso e estilo que permitam enfatizar partes da informação ESLC

os tipos (fontes) de fantasia, decorativos e muito elaborados, e os tipos muito densos são mais adequadas para títulos e subtítulos (texto de apresentação), ou outros destaques, do que para o corpo do texto (texto corrido) As fontes decorativas podem ser legíveis em pequenos fragmentos de texto, mas em textos mais extensos podem resultar num “exagero” que apenas servirá para desanimar e cansar o leitor. As fontes muito densas e pesadas podem ser legíveis em pequenos fragmentos de texto, mas em textos mais extensos podem resultar num “exagero” que apenas servirá para desanimar e cansar o leitor. Note-se que a utilização exclusiva de letras maiúsculas em grandes blocos de texto corrido dificulta a leitura ESLC

da adequação do tipo de letra utilizado face ao modo como vai ser apresentada a informação ao leitor / utilizador as caraterísticas das fontes podem torná-las mais adequadas a um determinado suporte por exemplo, as fontes Georgia (serif) e Verdana (sans serif) foram desenhadas por Matthew Carter especificamente para os écrans digitais ESLC

geralmente é aceite que uma fonte com serifa tem mais legibilidade, já que as serifas contribuem para fazer a ligação entre as várias letras de um palavra para leitura num ecrã de computador, segundo vários especialistas, são mais apropriados os tipos de letra sem serifa, por disporem de uma aparência mais simples verifica-se que não há uma regra fixa, contudo é consensual que algumas fontes são muito legíveis em suportes não digitais mas funcionam menos bem, por exemplo, na Internet ESLC

do peso, proporção e largura dos caracteres e do peso do texto considerado no seu conjunto o peso das manchas de texto depende do peso e da forma dos caracteres e, em geral, da densidade do texto o peso do texto pode ser alterado pelas operações de compressão e expansão digital das fontes normalizadas as fontes pesadas, quando utilizadas em texto corrido, são muito intrusivas ESLC

do espaçamento entre letras, palavras e linhas do texto, designadamente do espaçamento entre as letras e entre as palavras – tracking do espaçamento entre pares específicos de letras – kerning do espaçamento vertical (entre linhas) – entrelinha ESLC

Exemplos de aplicação do tracking Exemplo de aplicação do kerning ESLC

o espaço entre letras (tracking) pode favorecer ou limitar a legibilidade do texto Este parágrafo com o tamanho de letra a 14 pontos e um tracking muito aberto tem uma aparência bastante espaçada, o que num texto longo pode cansar os olhos do leitor e fazê-lo abandonar a leitura. O mesmo tracking com um tamanho de letra de 10 pontos pode ser demasiado exagerado (ou apenas adequado a um texto curto). Quando se reduziu o tracking do texto para normal ,com um tamanho de letra a 10 pontos , obteve-se uma mancha mais “convencional”., o que num texto longo pode facilitar a leitura. ESPAÇAMENTO Com o uso de maiúsculas, um tracking médio, ou superior , pode facilitar a leitura ESLC

além do tracking e do kerning, há que considerar a adequação do espaço entre as linhas (entrelinha) O espaço entre as linhas de texto pode aumentar ou limitar a legibilidade, tornando-se mais ou menos adequado consoante a relação do seu valor com o valor dado pelo espaço entre letras + tamanho da letra, e ainda em função do tipo de letra utilizado. O espaço entre as linhas de texto pode aumentar ou limitar a legibilidade, tornando-se mais ou menos adequado consoante a relação do seu valor com o valor dado pelo espaço entre letras + tamanho da letra, e ainda em função do tipo de letra utilizado. O espaço entre as linhas de texto pode aumentar ou limitar a legibilidade, tornando-se mais ou menos adequado consoante a relação do seu valor com o valor dado pelo espaço entre letras + tamanho da letra, e ainda em função do tipo de letra utilizado. ESLC

do alinhamento e do espaço entre parágrafos e dos demais destaques que visem facilitar a leitura ou enfatizar partes do texto a separação dos parágrafos pode ajudar o leitor na interpretação de um texto extenso, ao organizar visualmente o texto em blocos de informação mais curtos ESLC

do contraste tipográfico, sobretudo do que resulta do contraste cromático entre a cor dos caracteres e a cor dos fundos em que estes são colocados o contraste preto/branco é o mais frequente e bastante eficaz: capta a atenção e garante legibilidade ESLC

o fundo em que o texto se insere pode facilitar a leitura ou, pelo contrário, ser um fator de perturbação ou saturação visual ESLC

a utilização de fundos escuros em textos muito longos pode produzir saturação visual no leitor A letra a preto sobre fundo branco tem boa leitura A aplicação da letra a preto sobre fundo cinzento reduz a legibilidade A letra em negativo é legível, mas a sua utilização não é aconselhável em textos muito extensos, pois exige mais esforço visual (fundo negro) ESLC

note-se que ao ser reduzido o contraste entre a frente e o fundo, o fundo pode passar para “primeiro plano” ESLC

o uso da cor é de grande importância em muitas composições no trabalho com cor deve existir suficiente contraste entre a letra e o fundo para que a legibilidade não seja prejudicada a localização do texto sobre uma imagem (fotografia) pode constituir uma solução harmoniosa e legível, desde que haja suficiente contraste entre cada elemento (sobretudo entre os valores relativos a cor e textura) ESLC

O azul sobre o verde amarelado não põe em causa a legibilidade, mas a utilização de uma tonalidade mais clara no fundo facilita a leitura do texto O azul sobre o verde amarelado não põe em causa a legibilidade, mas a utilização de uma tonalidade mais clara no fundo facilita a leitura do texto A utilização de cores muito próximas na paleta de cores não oferece contraste suficiente; a utilização de um outro matiz melhora a legibilidade A utilização de cores muito próximas na paleta de cores não oferece contraste suficiente; a utilização de um outro matiz melhora a legibilidade ESLC

a legibilidade aumenta quando se aumenta o contraste entre a cor da letra e a do fundo ESLC

em alguns casos, os efeitos produzidos nas letras podem causar efeitos indesejáveis por exemplo, atribuir contorno à letra e suprimir o preenchimento para tornar a palavra mais “clara” pode produzir uma vibração visual indesejável entre letras neste caso, usar um preenchimento da letra mais claro poderia ser mais eficaz ESLC

O processo de composição implica um conjunto de outras opções tipográficas, designadamente, relativas a consistência da forma e proporção dos caracteres regras subjacentes à organização do texto relativamente aos restantes elementos presentes aplicação no conjunto da composição de diferentes elementos visuais (cor, textura, etc.) e dos valores que lhes estão associados ESLC

As alterações produzidas na forma (outline) dos caracteres, ou em outras caraterísticas distintivas, podem permitir efeitos visuais e estéticos interessantes estas alterações devem ser efetuadas apenas quando se justifiquem e não resultem num “efeito de estilo” apenas pelo estilo a distorção (por alongamento, encurtamento das letras) prejudica a proporção dos caracteres, pelo que deve ser evitada ESLC

A economia de meios é, na maior parte das situações, um bom princípio contudo há contextos em que se justificam soluções com recurso a grande diversidade de meios, pelo que a aplicação deste principio deve ser considerada caso a caso No caso da concepção de um website, há que ter em conta que a diversidade de tipos de letra (fontes) é mais limitada ESLC

Em particular nos produtos destinados à Internet, o excesso de texto pode ser desmotivador para o utilizador os tipos de letra usados, a hierarquia do texto, o contraste tipográfico, o espaço entre texto e imagem, a densidade visual e o equilíbrio dos elementos, as margens, etc. devem ser cuidadosamente considerados, de modo a que seja assegurada uma comunicação eficaz da informação ESLC

O destaque de palavras ou blocos de texto (através do contraste tipográfico, da orientação do texto, da utilização de fundos cromáticos, etc.) ajuda a criar centros de interesse no texto, dando ênfase ao que tem mais importância e orientando a leitura ESLC

Sistema tipográfico de grelha (grid)
No design tipográfico é possível identificar diferentes sistemas estruturais nos modos de organização do texto numa dada área um dos mais frequentes é o sistema de grelha: sistema que envolve a aplicação de uma quadrícula (grelha) este sistema surge por vezes associado ao sistema modular ESLC

A aplicação de um sistema tipográfico – neste caso, do sistema de grelha (grid) – tem como principal finalidade criar uma “ordem” que ajudará a compor a informação repetir os elementos que se mantêm constantes em cada secção ou página comunicar a informação ESLC

A utilização de uma grelha orientadora permite criar regras de organização da informação que ajudem o leitor / utilizador a encontrar mais facilmente a informação pretendida estabelecer uma “identidade” que se mantenha reconhecível e consistente ao longo do documento ou produto - layout criar alinhamentos que reforcem a unidade visual da composição (sem prejuízo da variedade) ESLC

Dadas as suas funções orientadoras, as grelhas constituem-se, assim, como um meio de apoio à concepção de produtos eficazes do ponto de vista da comunicação um auxiliar de legibilidade, reconhecimento e compreensão da informação, por parte do utilizador ESLC

As grelhas devem ser usadas como “ferramenta” para relacionar os elementos visuais entre si sendo que, em nenhum caso, devem ser entendidas como uma limitação à criatividade e à originalidade da solução ESLC

As grelha utilizadas no design tipográfico são definidas em função: do tipo de documento e da respetiva forma de apresentação (websites, revista ou jornal impressos, etc.) de outros parâmetros específicos (que neste contexto não se justifica aprofundar) ESLC

Podem ser usados diferentes tipos de grelha (grelha em colunas, grelha modular, grelha curva, grelha hierárquica, etc.) ESLC Adaptado de Grelhas e Estrutura do Design Gráfico

a grelha hierárquica tem módulos desenhados especificamente para se adaptarem ao conteúdo Por exemplo, na maioria dos websites, a informação surge organizada em blocos distintos: cabeçalho, navegação, navegação secundária, corpo, rodapé ESLC In

esquema de paginação Exemplos em que predomina a mancha de texto Exemplos que privilegiam o “espaço em branco” enquanto elemento compositivo A coluna da esquerda indica a área a utilizar (área de impressão) nos esquemas exibidos na respetiva linha; esta área não tem necessariamente de ser toda ocupada Adaptado de Grelhas e Estrutura do Design Gráfico ESLC

esquema de paginação Exemplo de localização do “espaço em branco” junto da margem o espaço vazio tem um papel muito importante na composição em geral, tem mais impacto quando usado nas margens do que quando distribuído na página ou área de design Adaptado de Grelhas e Estrutura do Design Gráfico ESLC

o alinhamento do texto com os restantes elementos presentes na página ou área favorece a conexão visual entre as partes e dá unidade à composição contudo são igualmente válidas as soluções que tiram partido do desalinhamento visual de alguns dos elementos ESLC

As relações espaciais e visuais entre os elementos que integram a composição influenciam o equilíbrio e harmonia do resultado final ESLC In Grelhas e Estrutura do Design Gráfico

A inserção de fotografias, imagens e gráficos diversos, fundos (de cor plana ou texturados) pode ocupar o espaço entre colunas ou parte do espaço destinados às margens, excedendo os limites da grelha em qualquer caso, os elementos presentes na composição devem manter uma relação visual entre si ESLC

In Grelhas e Estrutura do Design Gráfico ESLC

Sistemas tipográficos / Layout
A definição do layout permite estruturar o modelo de página ou área de design, implicando um conjunto de opções iniciais (relativas aos elementos que se pretenda manter constantes ao longo do documento ou produto) o trabalho com páginas ou áreas múltiplas beneficia da existência de um modelo de base (template) em que se estabeleceram as regras subjacentes a cada página ESLC

Sistemas tipográficos / Layout
A definição do layout contribui para aumentar a funcionalidade de um documento ou produto (documento impresso ou digital, produto multimédia, etc.) as regras destinadas à repetição de elementos têm aqui papel muito importante: por exemplo, num website ajudam o utilizador a encontrar a informação no local previsto (cabeçalho, menus, colunas de texto, rodapé, etc.) ESLC

Sistemas tipográficos
Os contrastes, as dissonâncias ou o desequilíbrio podem ter um papel muito importante na qualidade gráfica dos resultados obtidos, independentemente do sistema utilizado tais efeitos visuais devem ser aplicados de forma deliberada, visando obter um determinado resultado (e não apenas para “parecer diferente”) ESLC

Bibliografia Carter, Rob (1996). Tipografia de computador, cor e tipo. Lisboa: Destarte. Cos, Jesus, Valles, Alícia (trad.). Typo, forma y función. Barcelona: Promopress. Heitlinger, Paulo (s/d). Tipografia. Acedido em Setembro de Disponível em Jute, André (1999). Grelhas e estrutura do design gráfico. Lisboa: Destarte. Ribeiro, Nuno (2004). Multimédia e Tecnologias Interactivas. Lisboa: FCA. Silva, C.Pixeis (2010, 19 de Outubro). Legibilidade. Pixeis: a tua revista online de arte digital. Acedido em Setembro de Disponível em Stolfi, A. (2002). Legibilidade e evolução dos mídias. Finetanks.com. Acedido em Setembro de Disponível em Vários (2002). O Guia Completo do Design Gráfico Digital. Livros e Livros. os exemplos apresentados foram adaptados da bibliografia de referência. ESLC

Noções de layout Texto e tipografia Sistema Tipográfico de Grelha.

Apresentações semelhantes

Apresentação em tema: "Noções de layout Texto e tipografia Sistema Tipográfico de Grelha."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Noções de layout Texto e tipografia Sistema Tipográfico de Grelha.

Apresentações semelhantes

Apresentação em tema: "Noções de layout Texto e tipografia Sistema Tipográfico de Grelha."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback