Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

via Instagram http://instagram.com/p/ZE4ZwammN0/

Tipografia organização dos elementos

Publicado em , por , na categoria Elementos e técnicas, Webdesign

O motivo de voltar a escrever sobre assunto é porque não me senti satisfeita com a primeira parte, acho que faltou um pouco de teoria, então se este artigo estiver muito técnico para o seu gosto, sugiro que leia o primeiro artigo que trata mais da aplicação de fontes num projeto.

É muito interessante entender como as fontes são compostas e o que diferencia cada tipo, assim é possível compreender melhor porque uma certa fonte causa um resultado mais satisfatório do que outra, e conhecendo melhor os termos técnicos é mais fácil realizar pesquisas e se aprofundar no assunto.

Vamos começar com:

Classificação das fontes – Serifadas ou Sanserif

serifas.gifAs serifas são esses traços que encontramos nas extremidades de fontes como a Times News Roman, é o principal meio de classificar letras. Fontes serifadas possuem esse traço e as Sans-serif (expressão francesa para “sem serifa”) não possuem. Meio evidente né?

O que talvez você não saiba é que as serifas tendem a agrupar as letras de forma linear, ajudando a melhorar a leitura pois fica mais fácil identificar onde começa e termina um palavra. Dessa forma conseguimos destaque para cada palavra individualmente, isso é excelente para títulos.

A história da serifa é muito simples de compreender: na Roma Antiga, antes de esculpir as letras em pedra era preciso pintá-las para conseguir seguir o caminho com a talha. Qualquer pessoa que tenha pintado letras com tinta sabe que é comum que se acumule um pouco de tinta nas extremidade e esse traço era acompanhado no entalhe. Temos então a serifa.

Não foi encontrado um significado definitivo para a palavra Serifa, alguns acreditam que vêm do Holandês schreef significado “escreveu”, outros dizem que o termo “sanserif” vem de antes do termo “serifa” mas então de onde vem o “sanserif”? Ninguém sabe… adnate_abrupt.gif O equivalente em japonês é uruko (espinha de peixe) e em chines, a tradução ao pé da letra sai algo como “formas com pernas” Talvez seja o termo mais claro. Se aguém pedir “me dá uma perna” já sabemos que ele precisa de uma fonte serifada :).

Existem muitos tipos de serifa, os dois principais são: As curvas, conhecidas como “adnate” ou “bracket” e as retas, também chamadas “abrupt” ou “straight”.

As serifas do tipo Adnate são mais orgânicas, elas fluem das letras para suas extremidades de forma que fica quase impossível distinguir onde ela começa

Já as serifas do tipo Abrupt são mais quadradas, mais retas e mais rígidas, deixando bem visivel suas marcações.

megapolo.jpg

Tipografia na web.

O primeiro passo para ser bem sucedido no uso das fontes na web é nunca tentar imitar o que se faz nos impressos. A web é um meio muito diferente, com seus pontos fortes e fraquezas. A página impressa é rígida, nós não temos nenhum controle sobre o tamanho do texto e da página, enquanto que na web o visitante tem total controle e pode alterar o mode de visualização mesmo que o tamanho da fonte esteja pré-definido, além disso temos resoluções diferentes, com tamanhos de telas diferentes, definições de cor e contraste diferentes e logo fica bem evidente que o texto pra web e o texto impresso tem necessidades distintas.

É importante que as pessoas que vem até aqui entendam que esse blog trata principalmente da teoria do design pra web e por esse motivo, as definições que passo a seguir podem não ser aplicáveis ao design gráfico.

Vou usar como exemplo um site que desenvolvi recentemente: www.megapolomoda.com.br. Nesse projeto, algumas regras foram quebradas mas isso foi intencional para direcionar o visitante às áreas de maior interesse comercial.

Alturas, larguras e Espaçamentos

Kern

Kern é o espaço que existe entre as partes de um caracter tipográfico. Por exemplo: Av.

Nesse caso, o espaço entre o caracter v minúsculo e o caracter A maiúsculo precisa ser reduzido, para aproximar as letras. A essa redução de espaços chamamos Kern. O kern é definido pelo criador da fonte e pode ser alterado em qualquer programa de edição de fontes, mas não é fácil.

Quando o kern de uma fonte não está bem definido, pode haver confusão na separação das palavras, pode se tornar difícil saber onde começa uma palavra e termina a outra. Principalmente quando o tamanho da fonte é pequeno.

kern.jpg

Altura de x

alturadex.gif É a parte que se estende acima ou abaixo do caractere x minúsculo nas palavras. Pode ser Ascendente nas letras b, d, entre outras ou descendente nas letas p, q, entre outras. Quanto maior a altura de x maior o caracter em relação aos outros com o mesmo corpo.

Poque é importante entender isso? Porque quanto menor a altura de x menor a distinção entre caracteres como o “n” e o “h”, é o caso da fonte Impact que utilizo aqui nos títulos do blog, e isso pode gerar dificuldade na leitura.

Espaçamento entre linhas

Outra coisa que ajuda muito é o tamanho e o espaçamento entre linhas. Quanto mais espaçado maior a definição entre as linhas de texto, do mesmo jeito que o espaçamento entre letras e palavras também ajudam a agrupar a diferenciá-las.

Por outro lado, um espaçamento muito grande pode tornar o processo natural de percorrer a linha até o final e passar ao início da linha seguinte, mais longo do que o necessário tornando-se cansativo.

Nesse caso eu optei pela fonte verdana em tamanho 0.7em (equivale à 11px) e com o espaço entre linhas de 1.8em (equivale a 20px). Mas isso vai variar de acordo com a fonte escolhida.

Largura das linhas

Estando a uma distância de 50cm do monitor, o olho humano consegue focalizar uma área de apenas 5cm de diâmetro, o restante não passa de um borrão, e esse diâmetro se reduz a medida que nos aproximamos da tela. Isso justifica porque nos perdemos em textos com linhas muito longas quando nossos olhos alcançam o final e tentam passar para o início da linha seguinte. Por isso é preciso ter muito cuidado principalmente com layouts líquidos (que se adaptam à resolução do visitante), pois se a resolução for muito alta as linhas podem se tornar longas demais. E cuidado com linhas muito curtas pois isso também pode ser prejudicial já que força os olhos a se movimentem de um lado pra outro da tela muitas vezes seguidas provocando cansaço.largura_da_linha.jpg

Espaços em branco

Uma das coisas mais importantes quando falamos de tipografia é a quantidade de espaço em branco. No caso do MPM, ainda que a página seja longa e com muita informação, ela não parece sobrecarregada, isso acontece devido aos espaços que separam cada bloco de conteúdo, e também os títulos. Quando os espaços estão bem definidos tudo parece estar no lugar certo e a tipografia é utilizada para determinar a hierarquia, dando destaque as informações mais relevantes. Veja mais aqui.

Alinhamentos

É extremamente importante se preocupar com alinhamentos pois eles ajudam a definir a quantidade de esforço que será necessário para a leitura de um texto.

Talvez o padrão justificado seja o mais bonito e o mais fácil de trabalhar num layout, no entanto os navegadores compensam o espaço que sobraria num alinhamento normal à direita adicionando um espaço entre as letras ou palavras, gerando um problema bem parecido com o kern, dificuldade de agrupar os caracteres e compor as palavras. Além disso quando o espaço entre letras ou palavras aumenta abruptamente o cérebro precisa se adaptar à essa nova formatação e isso é ruim, mesmo que leve milésimos de segundo

kern2.gif

Organização dos elementos

Para que “a coisa Flua naturalmente” enquanto nossos olhos passeiam pelo layout não devemos nos preocupar apenas com alinhamento de texto (direita, esquerda, justificado, centro), mas com alinhamentos de todos os objetos. Chamamos isso de seguir um “Grid”.

megapolo3.jpg

Quando estamos lendo, ou apenas “scaneando” uma área do layout e chegamos ao final dela, procuramos imediatamente pelo inicio da próxima linha ou elemento, se ela não estiver posicionada exatamente no local onde o visitante espera que ela esteja, pode causa problemas na navegação, ainda que se leve um milésimo de segundo pra encontrar a proxima área a ser observada.megapolo3.jpg

Gestalt

É impossível falar de organização de elementos sem falar da Gestalt. Para quem não conhece a psicologia da Gestalt é uma corrente de pensamento dentro da psicologia moderna que surgiu no início do sec XX e foi defendida principalmente pelos teóricos Max Wertheimer, Christian von Ehrenfels, Felix Krüger, Wolfgang Köhler e Kurt Koffka. O termo Gestalt povem do alemão mas não tem uma tradução definida, normalmente e definido como “forma” ou “boa forma”

Segundo a teoria da Gestalt, não se pode ter reconhecimento do conjunto analisando-se as partes, mas sim das partes analisando o conjunto. Para que o cérebro consiga decodificar uma informação é preciso que uma série de elementos trabalhem harmoniosamente. Ela trata principalmente de como o homem percebe as coisas, e tendo os princípios básicos da gestalt na ponta da língua é muito difícil cometer erros na hora da organização dos elementos de um projeto.

São eles:

Semelhança

Ou “similaridade”, possivelmente a lei mais óbvia, que define que os objetos similares tendem a se agrupar. A similaridade pode acontecer na cor dos objetos, na textura e na sensação de massa dos elementos. Estas características podem ser exploradas quando desejamos criar relações ou agrupar elementos na composição de uma figura. Por outro lado, o mau uso da similaridade pode dificultar a percepção visual como, por exemplo, o uso de texturas semelhantes em elementos do “fundo” e em elementos do primeiro plano (wikpedia).

É o que faz com que um menu seja visto como um menu. Se vc define uma cor padrão para uma lista de links, ela pode ser vista como um menu.

É muito importante sempre ter cuidado para não permitir que ítens não relacionados seja formatados da mesma forma. Já ví muitos casos em que o webdesigner faz um menu vertival e logo abaixo dele coloca algum aviso ou elemento que mereça destaque usando a mesma textura de fundo, desse jeito pode parecer que o aviso é parte do menu.

PROXIMIDADE

Os elementos são agrupados de acordo com a distância a que se encontram uns dos outros. Logicamente, elementos que estão mais perto de outros numa região tendem a ser percebidos como um grupo, mais do que se estiverem distante de seus similares (wikpedia).

BOA CONTINUIDADE

Está relacionada à coincidência de direções, ou alinhamento, das formas dispostas. Se vários elementos de um quadro apontam para o mesmo canto, por exemplo, o resultado final “fluirá” mais naturalmente. Isso logicamente facilita a compreensão. Os elementos harmônicos produzem um conjunto harmônico. O conceito de boa continuidade está ligado ao alinhamento, pois dois elementos alinhados passam a impressão de estarem relacionados (wikpedia).

PREGNÂNCIA

A mais importante de todas, possivelmente, ou pelo menos a mais sintética. Diz que todas as formas tendem a ser percebidas em seu caráter mais simples: uma espada e um escudo podem tornar-se uma reta e um círculo, e um homem pode ser um aglomerado de formas geométricas. É o princípio da simplificação natural da percepção. Quanto mais simples, mais facilmente é assimilada: desta forma, a parte mais facilmente compreendida em um desenho é a mais regular, que requer menos simplificação (wikpedia).

CLAUSURA

Ou “fechamento”, o princípio de que a boa forma se completa, se fecha sobre si mesma, formando uma figura delimitada. O conceito de clausura relaciona-se ao fechamento visual, como se completássemos visualmente um objeto incompleto. Ocorre geralmente quando o desenho do elemento sugere alguma extensão lógica, como um arco de quase 360º sugere um círculo (wikpedia).

EXPERIÊNCIA PASSADA

Esta última se relaciona com o pensamento pré-Gestáltico, que via nas associações o processo fundamental da percepção da forma. A associação aqui, sim, é imprescindível, pois certas formas só podem ser compreendidas se já a conhecermos, ou se tivermos consciência prévia de sua existência. Da mesma forma, a experiência passada favorece a compreensão metonímica: se já tivermos visto a forma inteira de um elemento, ao visualizarmos somente uma parte dele reproduziremos esta forma inteira na memória (wikpedia).

Esses são principios que nós aplicamos todos os dias sem perceber. mas em alguns casos, são feitas relações entre elementos que não deveriam se relacionar e isso pode causar diversos problemas, como confundir o menu com elementos do design ou com outros textos do site.

Exemplos de Uso

16 opiniões sobre “Tipografia organização dos elementos”

  1. Claudete Tang disse:

    O seu trabalho e lindo!

  2. Tarc disse:

    Mto bom o blog, moça. No favoritos aqui agora.
    bj.

  3. Ta disse:

    show , nossa aprendi muita coisa aqui ! artigo interessant

  4. Adans disse:

    Gostei muito do seu site, e das informações que você dispôs aqui, você tem um tremendo bom gosto, parabéns! Seu site está em meus favoritos.

  5. rEGINALDO disse:

    add eu c quiser ok t+

  6. rEGINALDO disse:

    um humilde artefinalista legal seu blog gostei muito vlw

  7. Anibal Sólon disse:

    Artigo muito bom. Para leigos como eu, é ótimo conseguir um material assim, ajuda bastante na confecção de um layout. Vou ver se não mudo o meu hehe.

  8. Renan Lima disse:

    Excelente artigo.
    Gostei mtu do blog.

    []’s

  9. Tiago A. disse:

    Nossa. Cada vez melhor. Excelente artigo.

  10. Diego Novella disse:

    Legal meu site estar entre os exemplos eheheh gostei do post

  11. Não considero-me um bom conhecedor de design, mas já sei reconhecer algo verdadeiro, já escrevi manuais em LaTeX e ao ler os manuais descobri algumas regras, como não exceder 66 caracteres por linha, seu artigo está devidamente anotado nos meus favoritos –> ma.gnolia.com/people/voyeg3r/tags/design

  12. Marcos Malacarne disse:

    Muito interessante. Apesar de esses assuntos poderem ser mais aprofundados, um leigo qualquer que cair aqui terá uma base sólida, pois os assuntos selecionados são de primeira, e a maioria servem também pra design gráfico. Aproveito para elogiar seu trabalho, você tem talento. Já que foi falado de ilusões de ótica, só gostaria de fazer um adendo à parte que você fala da altura de x das letras: letras redondas, como a letra “O” precisam ser desenhadas com uma altura que ultrapasse a linha de x, senão teremos a sensação de que ela está menor que as outras, essa informação pode ser importante a quem pretende desenhar uma fam

  13. Olá Daniele!
    Obrigado por ter citado o site do Natal Luz!!!!
    Parabéns pelo artigo e seu trabalho!
    Muito bom!
    Abraços!

  14. Ramon Bispo disse:

    Oi Daniele,

    notei seu permalink em meu site e cheguei até aqui.

    Parabéns pelo artigo, muito elucidativo!

    []’s

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *