{"id":449,"date":"2019-01-08T14:34:47","date_gmt":"2019-01-08T14:34:47","guid":{"rendered":"https:\/\/minerva-online.pt\/2019\/01\/08\/6-elementos-de-tipografia\/"},"modified":"2025-04-08T09:33:58","modified_gmt":"2025-04-08T09:33:58","slug":"6-elementos-para-uma-boa-tipografia","status":"publish","type":"post","link":"https:\/\/minerva-online.pt\/en\/6-elementos-para-uma-boa-tipografia\/","title":{"rendered":"The 6 elements of typography, all designers need to consider"},"content":{"rendered":"
Uma boa tipografia envolve mais do que escolher uma fonte \u2013 \u00e9 a garantia de que o seu trabalho \u00e9 bem interpretado e que atrai a aten\u00e7\u00e3o do utilizador. Veja como!<\/strong><\/h5>\n\n\n\n

J\u00e1 alguma vez olhou para um design aparentemente simples e pensou: \u201cEu conseguia fazer isso!\u201d?<\/p>\n\n\n\n

Mas, quando se senta \u00e0 frente do computador para tentar, fica sem perceber porque \u00e9 que a sua tentativa em nada se assemelha \u00e0 vers\u00e3o profissional.<\/p>\n\n\n\n

O que faz a diferen\u00e7a \u00e9 o know-how basilar necess\u00e1rio para criar um bom design. Hoje listamos alguns princ\u00edpios b\u00e1sicos da arte invis\u00edvel da tipografia<\/strong> (dentro do vasto universo que \u00e9 a disciplina de design), que ajudam a garantir que o seu trabalho seja corretamente compreendido, e que desperte a aten\u00e7\u00e3o!<\/p>\n\n\n\n

1. Elementos de tipografia \u2013 Hierarquia<\/h2>\n\n\n\n

A fun\u00e7\u00e3o da hierarquia \u00e9 ajudar a organizar o conte\u00fado, de forma a que o p\u00fablico consiga facilmente identificar a informa\u00e7\u00e3o que procura. Reveste-se ainda de maior import\u00e2ncia no caso de trabalhos com grandes quantidades de texto, como revistas ou livros.<\/p>\n\n\n\n

Por exemplo, se algu\u00e9m est\u00e1 a ler uma revista sobre culin\u00e1ria, mas apenas est\u00e1 interessado em pratos de peixe, \u00e9 importante dar ao leitor uma forma r\u00e1pida e f\u00e1cil de encontrar essa sec\u00e7\u00e3o, em vez de o \u201cobrigar\u201d a percorrer grandes blocos de texto.  Assim, o recomend\u00e1vel seria organizar os tipos de prato com uma tipografia<\/strong> mais proeminente, recorrendo, por exemplo, \u00e0 cor, espa\u00e7o branco, tamanho, entre outros.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

2. Elementos de tipografia \u2013 Espa\u00e7o branco<\/h3>\n\n\n\n

Se os diferentes conte\u00fados estiverem muito pr\u00f3ximos entre si, ser\u00e3o mais dif\u00edceis de ler. \u00c9 aqui que o espa\u00e7o em branco entra.<\/p>\n\n\n\n

Ainda que os clientes pe\u00e7am, muitas vezes, para preencher o espa\u00e7o em branco para n\u00e3o desperdi\u00e7ar oportunidades de introduzir informa\u00e7\u00e3o, a verdade \u00e9 que a exist\u00eancia de espa\u00e7o em branco \u00e9 intencional \u2013 \u00e9 um elemento ativo de design, que cria equil\u00edbrio e concede respira\u00e7\u00e3o ao texto.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

3. Elementos de tipografia \u2013 Cor<\/h3>\n\n\n\n

Um dos erros mais frequentes (e mais f\u00e1ceis de corrigir) \u00e9 a utiliza\u00e7\u00e3o de texto preto sobre fundo branco.<\/p>\n\n\n\n

Se reparar em algumas das revistas ou websites com bom design, ver\u00e1 que o texto preto em fundo branco n\u00e3o \u00e9 mesmo preto \u2013 \u00e9 cinzento. Esta t\u00e9cnica reduz o contraste de cores e facilita a leitura.<\/p>\n\n\n\n

No que diz respeito a outras cores, uma forma de verificar se t\u00eam o n\u00edvel de contraste desejado \u00e9 fazer a convers\u00e3o para \u201cgrey scale\u201d no respetivo software de edi\u00e7\u00e3o (em trabalhos web, poder\u00e1 usar a ferramenta checkmycolours.com). No exemplo em baixo, as cores da imagem \u00e0 esquerda t\u00eam pouco contraste, resultando numa combina\u00e7\u00e3o a evitar.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

4. Elementos de tipografia \u2013 Kerning<\/h3>\n\n\n\n

Kerning designa o processo de ajustar o espa\u00e7o entre os caracteres, e tem como objetivo conseguir um tipo de letra mais equilibrado \u2013 uniformizando o espa\u00e7o branco entre caracteres.<\/p>\n\n\n\n

Este processo \u00e9 particularmente importante em cabe\u00e7alhos e em grandes tipos de letra, evitando, por exemplo, que duas letras juntas se assemelhem a uma outra letra.<\/p>\n\n\n\n

\u00c9 tamb\u00e9m importante em par\u00e1grafos para evitar quebras de linha indesejadas \u2013 sem d\u00favida que \u00e9 desagrad\u00e1vel imprimir um documento e verificar que a \u00faltima p\u00e1gina tem apenas uma linha ou uma palavra.<\/p>\n\n\n\n

Poder\u00e1 encontrar uma ferramenta interessante (e divertida!) para praticar o Kerning aqui<\/a>.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

5. Elementos de tipografia \u2013 \u00canfase<\/h3>\n\n\n\n

Criar \u00eanfase num texto \u00e9 eficaz se n\u00e3o interromper o fluxo de leitura.<\/p>\n\n\n\n

Algumas das formas ideais mais usadas s\u00e3o o it\u00e1lico, negrito, sublinhado ou mai\u00fasculas \u2013 mas quanto tiver que o fazer, escolha apenas uma. Um texto que esteja, simultaneamente, em it\u00e1lico, negrito e sublinhado \u00e9 tosco, disruptivo e amador.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

6. Elementos de tipografia \u2013 Alinhamento<\/h3>\n\n\n\n

O alinhamento centrado e justificado \u00e9 frequentemente utilizado \u2013 \u00e9 tentador, mas pode parecer confuso e desequilibrado; al\u00e9m de que este \u00faltimo pode criar espa\u00e7os irregulares e aleat\u00f3rios, transmitindo um aspeto descuidado e dificultando a leitura ao utilizador.<\/p>\n\n\n\n

Por exemplo, o alinhamento justificado pode gerar os chamados \u201cdentes de cavalo\u201d (texto excessivamente espa\u00e7ado), ou \u201crios\u201d (conjunto de linhas com dentes de cavalos).<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

Por isso, se optar pelo alinhamento justificado, programas de pagina\u00e7\u00e3o, como o QuarkXPress ou InDesign, permitem evitar estes percal\u00e7os, ativando a op\u00e7\u00e3o de hifeniza\u00e7\u00e3o e configurando de antem\u00e3o algumas regras de pagina\u00e7\u00e3o.<\/p>\n\n\n\n

Um outro fen\u00f3meno tipogr\u00e1fico muito frequente \u00e9 a exist\u00eancia de \u201cvi\u00favas\u201d e \u201c\u00f3rf\u00e3os\u201d. Uma vi\u00fava, em tipografia, designa uma linha ou uma palavra que se situa no final de um par\u00e1grafo, e que passa para a p\u00e1gina seguinte, por falta de espa\u00e7o na p\u00e1gina anterior. Um \u00f3rf\u00e3o designa uma linha ou uma palavra que se situa no in\u00edcio de um par\u00e1grafo, que v\u00ea as restantes linhas ou palavras passarem para a p\u00e1gina seguinte, pelo mesmo motivo.<\/p>\n\n\n\n

\"6<\/figure>\n\n\n\n

Sem d\u00favida que \u00e9 desagrad\u00e1vel imprimir um documento e verificar que a \u00faltima p\u00e1gina tem apenas uma linha ou uma palavra.<\/p>\n\n\n\n

Contudo, estas duas situa\u00e7\u00f5es podem ser resolvidas controlando o tamanho da fonte, o espa\u00e7amento entre letras ou entre linhas. Al\u00e9m disso, alguns softwares de pagina\u00e7\u00e3o permitem evitar automaticamente a ocorr\u00eancia de vi\u00favas ou \u00f3rf\u00e3os.<\/p>","protected":false},"excerpt":{"rendered":"

Uma boa tipografia envolve mais do que escolher uma fonte \u2013 \u00e9 a garantia de que o seu trabalho \u00e9 … <\/p>\n

Ler mais <\/i><\/a><\/p>","protected":false},"author":2,"featured_media":400,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/posts\/449"}],"collection":[{"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":1,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/posts\/449\/revisions"}],"predecessor-version":[{"id":8329,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/posts\/449\/revisions\/8329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/media\/400"}],"wp:attachment":[{"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/categories?post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/minerva-online.pt\/en\/wp-json\/wp\/v2\/tags?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}