Guia Tipográfico para a Web by Jéssica Boesing

Tipografia na Web |

SUMÁRIO

14. ES

16. L 18. A 20. L 26. F 28. Q 30. M

4. INTRODUÇÃO

6. PRINCÍPIOS TIPOGRÁFICOS 08. Anatomia 10. Classificação

SCOLHA TIPOGRÁFICA

32. APLICAÇÃO TIPOGRÁFICA

Licenciamento Adequação ao contexto Legibilidade e leiturabilidade Flexibilidade Quantas fontes usar Misturando tipos

34. Tamanho da fonte 36. Hierarquia visual 44. Alinhamento 46. Viúvas e órfãs 48. Entrelinha 50. Kerning e tracking 56. Responsividade

62. SUGESTÕES

66. BIBLIOGRAFIA

INTRODUÇÃO Boa tipografia, como um bom design, é invisível. O objetivo principal da tipografia é comunicar uma mensagem escrita. O tipo deve ser projetado para ser legível e fornecer uma experiência de leitura agradável. Fatores como tamanho do tipo, altura da linha e comprimento da linha são elementos de tipografia que sempre devem ser considerados. Neste guia você aprenderá alguns princípios básicos sobre tipografia, como escolher uma fonte eficaz para o seu projeto e como aplicá-la no seu layout.

AAAAAA aaaaaaa AAAAAA aaaaaaa

PRINCÍPIOS TIPOGRÁFICOS Neste capítulo serão comentados alguns assuntos introdutórios da tipografia, servindo de base para quem desconhece o tema e precisa aprender em pouco tempo. É de suma importância conhecer os princípios tipográficos antes de escolher a fonte adequada para o seu projeto.

ASCENDENTE

LINHA DE BASE

Type Anatomy DESCENDENTE

ALTURA DE X

Anatomia Altura de x : Diz respeito à altura das letras

minúsculas de uma fonte, desconsiderando suas ascendentes e descendentes. O website Canva alerta sobre cuidados com a altura x nas fontes: “Uma altura de x relativamente proporcional às letras maiúsculas melhora a qualidade e mantém a legibilidade“.

Linha de base : Segundo Mark Schenker (2018), a linha de base é a linha imaginária onde a maior parte dos caracteres de uma composição tipográfica se apoiam e é a partir dela que os descendentes se estendem.

Descendente : SCHENKER (2018) ainda define

o descendente como sendo uma parte de uma letra que fica abaixo de sua altura x. E exemplifica mostrando como a letra y minúscula é a letra v com um descendente, conforme mostrado no exemplo ao lado.

Ascendente : De acordo com SCHENKER (2018), a

ascendente corresponde à parte de uma letra que se localiza acima da altura x. Segundo ele, o objetivo de uma ascendente é aumentar a legibilidade das palavras formadas pelas letras, tornando-as mais legíveis.

Classificação Existem milhões de fontes no mundo, mas o que faz com que elas se diferenciam entre si? Além de fatos relacionados a anatomia, outro aspecto que influencia na aparência de uma fonte é o seu estilo. Existem 5 tipos básicos de classificação:

Serifadas (Serif): Segundo SÁNCHEZ (2016) as

fontes serifadas são mais detalhadas, pois possuem pequenos traços anexados nas extremidades de cada letra. Por ser um estilo tradicional e antigo, fontes com serifa são consideradas mais sérias e têm seu uso mais frequente em projetos em papel, por conta da legibilidade. Pode ser utilizada para a web se o designer souber como aplicá-la de maneira eficaz.

Não serifadas (Sans-serif): KLIEVER (2018)

definiu o estilo não serifado como sendo a falta de serifas anexadas às letras e que por essa razão são mais modernas comparadas à tradicionalidade das serifadas. SÁNCHEZ (2016) acrescenta que as fontes não serifadas são a opção mais comum para web por serem consideradas “mais fáceis” de renderizar no browser.

COM TRAÇOS ANEXOS

I am Serif. Serif I am Sans. SEM TRAÇOS ANEXOS

Decorativas (Display): São fontes que não foram

projetadas tendo como foco a legibilidade, ou seja, não são recomendadas para corpo de texto. SÁNCHEZ (2016) afirma que o uso das fontes decorativas na web se encontra frequentemente em elementos mais visuais como logos, botões e se integra mais ao design do site. Ainda diz que, por sua legibilidade, ela não é propícia para textos longos na interface gráfica.

Fontes Script: Segundo KLIEVER (2018), as fontes

Script são “fontes no estilo cursivo”, em que as letras se conectam umas às outras, representando um aspecto mais humanista. É um estilo bem expressivo e geralmente é utilizada em situações mais pessoais, como convites de casamentos e logos.

Monoespaçadas: Para SÁNCHEZ (2016), as monoespaçadas são simétricas e a largura de suas letras é padronizada. Um bom exemplo do uso de fontes espaçadas é a fonte utilizada nas placas de carro, em que, para seguir um padrão, ela têm a mesma largura.

LEGIBILIDADE PREJUDICADA

Display [sCRIPT IDEIA DE ESCRITA À MÃO

Mono

MESMA LARGURA DE LETRAS

ESCOLHA TIPOGRÁFICA A fonte que será aplicada no seu projeto é tão importante quanto o conteúdo em si, pois se critérios como expressão visual, legibilidade do texto e leiturabilidade não forem satisfatórios, o leitor pode desistir de ler antes mesmo de tentar. Nesse capítulo serão listados e exemplificados alguns tópicos cruciais no processo de escolha tipográfica.

Licenciamento Antes de iniciar qualquer processo de seleção de uma fonte, é necessário compreender que cada uma possui um tipo de licença que determina o que você pode ou não fazer com ela. Na hora da seleção, devem ser considerados fatores como: você está disposto a pagar pelo uso da fonte ou precisa que ela seja gratuita? Essa fonte será usada futuramente para um fim comercial ou é para um projeto sem lucros? Geralmente as licenças são divididas em: uso pessoal, educacional e comercial, então é de suma importância que você saiba a finalidade do seu projeto desde agora. Mas mesmo com fontes não pagas você precisa ter cuidado! Não significa que só porque a fonte é gratuita que você pode fazer o que quiser com ela. Algumas licenças (mesmo que de fontes gratuitas) impedem que você faça qualquer tipo de alteração na fonte, que distribua ela sem permissão ou que utilize em elementos específicos do seu layout. Por isso, é sempre bom ler os fatores de licenciamento da fonte antes de escolhê-la. Se você não está disposto a pagar por uma fonte, veja a seguir a lista de alguns sites indicados por KLIEVER (2018) que possuem fontes gratuitas.

Google Fonts

1001 Fonts

Possui muita qualidade nas fontes.

Qualidade pode variar.

Elas são otimizadas para web.

Fontes gratuitas.

Todas as fontes são gratuitas.

Nem todas são para uso comercial.

DaFont

Font Squirrel

Varia em questão de qualidade.

Qualidade pode variar.

Mais de 25.000 fontes gratuitas

Fontes gratuitas.

Possui fontes licenciadas.

Nem todas são para uso comercial.

Se coloque n suas necessid

Adequação ao contexto Geralmente quando estamos desenvolvendo um projeto precisamos limitar desde o começo para quem, onde e como vamos projetar. Esse briefing pode ser seu critério eliminatório para a escolha tipográfica. Caso não tenha esse briefing, comece determinando quem vai ler essa fonte, onde ela será apresentada, a que distância a peça estará do seu leitor, etc… A partir desses dados você poderá fazer uma análise de fora para dentro, pensando em quais são as dificuldades oferecidas e de que maneira você pode solucionar isso com a sua tipografia.

Nem toda fo vai servir par toda fonte q ser boa para

Faça uma pe entender sua atenção espe crianças, ido

Listamos ao lado algumas perguntas para escolher sua fonte com base nos critérios do seu briefing:

Também se adeq rápida e para aux exemplo

no lugar do seu público-alvo e entenda dades e (principalmente) suas limitações.

onte que é boa para um adolescente ra pessoas de idade, assim como nem que é boa para uma pessoa de idade vai a uma pessoa de idade com catarata.

esquisa com o seu público para as necessidades, prestando uma ecial quando seu público-alvo for osos, pessoas com baixa visão, etc...

Leve em consideração o local em que seu texto se apresentará. Por mais que você esteja projetando para web vale a pena lembrar que geralmente estamos projetando tanto para desktop quanto para mobile. Na hora de escolher a fonte se pergunte se a espessura de contraste da sua fonte, a sua altura de x, seus pesos e serifas funcionariam bem na tela de um celular ou se só de adaptam em um monitor grande.

m é necessário ter pré-estabelecidas as funções que essa fonte deve cumprir, a fim de que ela que no que se pretende usá-la. Por exemplo, se você precisa de um bloco de texto com leitura e intuitiva, não deve usar uma fonte display, e sim uma fonte de texto. A tipografia está ali xiliar o leitor, então tome medidas que facilitem ao máximo o processo de leitura, como por o usar tamanhos grandes para fontes display.

Nem tudo que

legível é

necessariamente fácil

de ler

Legibilidade e leiturabilidade

Apesar de parecidos no nome, cada um esses critérios possui um foco diferente. A legibilidade diz respeito à facilidade que o leitor tem de reconhecer determinada letra dentro de uma tipografia, ou seja, tem relação direta com o desenho dos tipos e independe da maneira em que o tipo será diagramado. Já a leiturabilidade diz respeito à compreensão do leitor em relação do texto, levando em conta se a maneira que esse conteúdo está exposto facilita ou não a leitura. Ela está diretamente relacionada ao conforto visual do leitor, questão essa que vem sendo cada vez mais explorada em pesquisas de UX design para web. Ter um texto legível não significa que temos uma boa leiturabilidade. Nesse tópico você vai aprender a reconhecer melhor questões que influenciam na leiturabilidade e na legibilidade dos seus textos.

Uma boa legibilidade: Considerando que a

fonte mais legível é aquela em que seus caracteres são reconhecidos com facilidade, existem algumas características no desenho das fontes que nos permitem saber se a legibilidade será boa ou não. Um dos principais critérios para uma fonte legível é que a altura de x das suas letras seja de um tamanho adequado. Esse “adequado” pode variar de acordo com o tamanho em que o texto vai ser exposto, mas o ideal é que esse valor represente no mínimo 1/3 da altura da letra. Preste atenção também no tamanho das ascendentes e descendentes em relação à altura x, já que a altura desses componentes, independente de ser uma altura muito grande ou muito pequena, pode tornar algumas letras mais difíceis de serem compreendidas. Outro fator que auxilia na legibilidade é o uso de fontes que não possuem um contraste exacerbado nas diferentes espessuras do seu desenho. Vale lembrar que uma fonte ser ou não ser legível varia bastante de acordo com o público-alvo do seu projeto, então busque se informar quais são as limitações e necessidades que o seu leitor possui e só assim você poderá escolher a fonte ideal!

ALTURA DE X PEQUENA DEMAIS

CONTRASTES DE ESPESSURAS BONS

Tipo

CONTRASTES QUE PREJUDICAM

ASCENDENTES E DESCENDENTES IDEAIS

LEITURABILIDADE PREJUDICADA

BOA LEITURABILIDADE

BACKGROUND

LEITURABILIDADE PREJUDICADA

BOA LEITURABILIDADE

CONTRASTE

Melhorando a leiturabilidade: Ler em um monitor é cansativo. Isto acontece por que as telas são iluminadas e ficar olhando muito tempo para fontes de luz causa um enorme incômodo. Vamos te dar duas dicas valiosas para minimizar esse cansaço: Cores no background: VASCONCELOS (2015) esclarece que uma boa escolha de fundo para um site é baseada numa cor que permita o destaque do texto em contraste. Isto faz com que seja fácil e rápido para o usuário ler o headline e o corpo de texto de forma mais clara. É importante ressaltar que atualmente muitos sites estão apostando em contrastes menos “duros” e ainda assim legíveis, proporcionando uma leitura confortável que permite a identificação simples de cada linha de texto. Quando se trata do corpo de texto ainda é muito comum o padrão de fundo branco/cinza claro e texto preto ser utilizado, pois tem bastante contraste e remete ao formato clássico de cor nos jornais, tornandoos mais populares. Imagens como background: Utilizar de imagens na sua página pode agregar um valor estético maior para o layout, mas existem uma série de cuidados que devemos ter ao aplicarmos texto em cima dessas mídias. Para nossa sorte, existem algumas técnicas comumente utilizadas dentro da web para resolver essas situações, como utilizar um leve blur na imagem; colocar uma camada de cor com baixa opacidade sobre a foto ou aplicar uma caixa de texto com fundo colorido. Como em assuntos anteriores, não existe uma regra! Escolha o que se adapta melhor ao seu layout e faça bom uso.

Apenas uma fonte foi utilizada em todo esse layout. LOGO

Home

Services

About

Contact

FAQ

DIGITAL MARKETING

Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu

LEARN MORE

Isso que eu chamo de flexibilidade!

Flexibilidade KPELO (2017) também levanta alguns questionamentos sobre a versatilidade da fonte, questionando se ela funciona em tamanhos e pesos diferentes, se serve tanto para títulos quanto para corpo de texto, etc… Segundo ele, uma fonte flexível é aquela com potencial para solucionar diversas necessidades dentro de um layout. Se seu projeto precisa de uma fonte com vários pesos, com itálico e com uma família tipográfica extensa, não perca seu tempo procurando fontes limitadas. Além dessas questões é importante ficar atento às capacidades de alteração de cores de uma fonte, já que nem toda fonte oferece a flexibilidade de mudança de cor.

Quantas fontes usar Ter uma fonte flexível não significa que você deve usar apenas ela para o seu projeto. Segundo DEVOS (2018) é recomendável ter uma fonte para corpo de texto e outra para títulos. Se tiver uma necessidade de por uma terceira fonte tudo bem, mas cuidado para não exagerar: um excesso de fontes diferentes pode fazer com que não haja uma coerência no seu layout. Imagine a seguinte situação: o leitor está acostumado a ler os títulos com a fonte Arial e de repente os títulos começam a ser escritos em Times. Ele não sabe mais se aqueles dois elementos pertencem a mesma hierarquia tipográfica ou se têm importâncias diferentes no layout. Não tem problema utilizar mais de uma tipografia, o problema é não saber aplicá-las de maneira concisa, dificultando o entendimento do leitor. Lembre-se também que cada peso e estilização da fonte (Regular; Regular Italic; Light; Light Italic; Bold; Bold Italic; etc…) representa um arquivo a ser armazenado no servidor do site, o que pode aumentar o tempo de carregamento da sua página.

Foram aplicadas vรกrias fontes nesse layout. BURGERS PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec

PRODUC T

Burger Burger

EAT

DRINK&

FUN

HAVE

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec

PRODUC T

DESSERTS

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec

$15

PRODUC T PRODUC T

00.0

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit

amet magna ut enim dapibus maximus. Aenean a quam nec tortor

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit

amet magna ut enim dapibus maximus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

PRODUC T

00.0

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

PRODUC T

PRODUC T 00.0

00.0

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit

amet magna ut enim dapibus maximus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

SPECIAL ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

PRODUC T

00.0

PRODUC T

amet magna ut enim dapibus maximus. Aenean a quam nec tortor

sit amet magna ut enim dapibus maximus. Aenean a quam nec

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

PRODUC T

00.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

00.0

PRODUC T

00.0

Lorem ipsum dolor sit amet

sit amet magna ut enim dapibus maximus. Aenean a quam nec

PRODUC T

00.0

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

PRODUC T

00.0

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit

00.0

PRODUC T Lorem ipsum dolor sit amet

PRODUC T

00.0

Lorem ipsum dolor sit amet

00.0

PRODUC T

00.0

Lorem ipsum dolor sit amet

00.0

Lorem ipsum dolor sit amet

PRODUC T

00.0

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet magna ut enim dapibus maximus. Aenean a quam nec tortor

sit amet magna ut enim dapibus maximus. Aenean a quam nec

Basta saber utilizรก-las e Voilรก!

Nós formamos uma boa combinação Pois fomos projetadas pelo mesmo designer, temos a altura de x parecida, assim como o tamanho dos nossos ascendentes e descendentes.

Nós não combinamos em nada, sorry! Nossos estilos não dialogam entre si e as medidas das nossas alturas de x, ascendentes e descendentes são bem diferentes.

Nós nos damos bem juntas, isso é muito interessante...

Temos uma expressão boa quando somos aplicadas juntas, além disso, nossas medidas são bem similares.

Misturando tipos Agora que você já sabe quantas fontes você pode usar, é hora de saber se as fontes que você vai utilizar combinam. Conheça algumas maneiras de definir essa compatibilidade entre elas:

Qualidades em comum: KLIEVER (2018)

analisa

que fontes que possuem larguras, altura de x ou estruturas parecidas ou proporcionais tendem a se dar bem juntas. Segundo ela, mesmo que a semelhança seja sutil aos olhos, podem ser os detalhes que farão toda diferença quando elas trabalharem lado a lado.

Fontes do mesmo designer: KLIEVER (2018)

ainda afirma que muitos tipógrafos projetam suas fontes seguindo uma mesma lógica, como padrão de kerning, proporção entre altura de x com ascendentes e descentes, etc... Então escolher fontes que foram projetadas por uma mesma pessoa pode ser um macete eficaz, já que elas tendem a conversar bem uma com a outra.

APLICAÇÃO TIPOGRÁFICA Depois de escolher a fonte ideal para o seu projeto, é necessário saber aplicá-la de maneira consistente e eficaz, pois ter a fonte perfeita não significa que ela ficará boa se utilizada de qualquer jeito. Neste quarto capítulo do guia você aprenderá a aplicar fontes no contexto da Web, entendendo o que se deve ou não fazer e, acima de tudo, priorizando uma boa experiência para o seu leitor.

Tamanho da fonte Segundo GUERRATO (2012), quando pensamos em fontes para corpo de texto no desktop esse tamanho deve ser de 16px e este não é um número aleatório. Para entendermos melhor, precisamos lembrar que quando lemos um livro seguramos o papel a uma distância bem próxima dos olhos. Mas quando mexemos em um computador a distância em relação a tela é muito maior. Para mobile a distância da pessoa com o celular pode variar dependendo do usuário, então o recomendável é sempre começar a definir o tamanho a partir dos 12px, pois a legibilidade é garantida. GUERRATO (2012) diz que “No geral, quanto maior a distância do leitor em relação ao meio, maior deverá ser o tamanho da letra”. Para títulos não existe uma regra, mas por questão de hierarquia visual o recomendado é que eles sejam maiores que o corpo de texto.

12 PX PARA MOBILE

16 PX PARA DESKTOP

ELEMENTOS APARENTAM TER A MESMA IMPORTÂNCIA NO LAYOUT

BOA HIERAQUIZAÇÃO POR MEIO DE DIFERENTES NÍVEIS VISUAIS

Hierarquia visual De acordo com Kpelo (2017), a hierarquia define como ler o conteúdo. Um layout atraente requer um sistema hierárquico bem planejado. Mudanças de tamanho, peso e cor são formas de expressar a hierarquia de um texto. A informação deve ser colocada em uma ordem que permita ao usuário entrar no espaço tipográfico e navegar por ele. Segundo LYN (2016) a maioria dos projetos pode ser bemsucedida com três níveis de hierarquia tipográfica:

Nível que introduz o tópico, inclui as informações mais importantes e usa o maior tamanho de fonte de todos no design.

Onde os detalhes adicionais sobre os tópicos são adicionados, como por exemplo subtítulos. Esse nível faz uso do segundo maior tamanho de fonte.

Usado para expandir os detalhes introduzidos nos níveis 1 e 2, o terceiro nível é usado para elementos que não possuem a mesma relevância que os níveis anteriores. Este nível precisa ser muito legível, pois seria o corpo de seus posts no blog ou website.

AS INFORMAÇÕES PRINCIPAIS NÃO SE DESTACAM DENTRE AS DEMAIS

A HIERARQUIA POR TAMANHO GUIA O OLHO DO LEITOR

Variações de tamanho: Quando falamos em

desenvolvimento de um código para um site deve-se aplicar uma hierarquia de valor nos elementos, por exemplo: H1, H2, H3, H4, body text, etc... Isso não é diferente para o design, devemos diagramar nosso conteúdo de maneira a auxiliar o leitor, que deve saber identificar quais elementos têm mais importância que outros dentro de um texto. A variação de tamanhos é uma boa maneira para definir esse grau de relevância. O truque é definir o tamanho do seu corpo de texto e a partir dele escolher o tamanho dos outros elementos textuais. Se no seu layout você possui 3 níveis diferentes de títulos, aumente o tamanho do corpo deles de acordo com a importância que eles possuem. Alguns autores dão a dica de aumentar de 2px em 2px a partir do corpo de texto, mas isso vai da necessidade de cada layout. Observação: Tome cuidado para que a variação de tamanho seja notável pelo leitor, variar 1px ou 2px pode passar batido pelos olhos do público, o que pode atrapalhar na hierarquia de informações.

I’m Thin I’m Extra Light I’m Light I’m Normal I’m Medium I’m Semi Bold I’m Bold I’m Extra Bold I’m Black 40

Peso da fonte: O peso é a grossura dos caracteres

de um tipo, podendo ser normal, bold, extra bold, light, etc... GUERRATO (2012) comenta que se estas opções estiverem disponíveis na fonte que você escolher, ela pode variar entre um valor numérico de 100 a 900. Esses diferentes pesos podem ser aplicados na sua página de acordo com o grau de importância do seu conteúdo. Títulos, por exemplo, podem utilizar peso bold para chamar mais atenção em relação ao corpo de texto de peso regular. Verifique com cuidado quais opções de peso estão disponíveis ao escolher uma fonte. Famílias gratuitas normalmente têm opções limitadas, enquanto fontes pagas possuem uma variedade maior de pesos.

AQUI AS CORES NÃO MOSTRAM RELEVÂNCIA DE INFORMAÇÕES E ATRAPALHAM A LEITURA

AQUI AS CORES DIRECIONAM O OLHAR DO USUÁRIO PARA OS PONTOS QUE DEVEM SER DESTACADOS

Cor: A aplicação de cor em uma composição tem efeito

imediato na hierarquia. Por exemplo, se a informação principal é composta em um laranja vibrante, enquanto a informação secundária é composta por um cinza frio, os dois níveis da hierarquia são visualmente separados em um grau ainda maior. A cor ainda pode ser usada para conectar componentes do mesmo nível de importância dentro da composição. É essencial que na utilização de cores em seu design se tenha uma atenção dobrada em relação a legibilidade e contraste que estas fornecem a sua página.

Alinhamento Escolha um estilo de alinhamento que se adapte à estrutura de seu layout , não existe uma regra definida, mas cada modo de alinhamento tem suas vantagens e desvantagens. KPELO (2017) dá algumas dicas sobre qual é a melhor escolha de alinhamento para um website:

Alinhamento Centralizado: Na web não é

recomendado para textos pois não possui uma leitura dinâmica, mas funciona bem dentro de espaços delimitados, como botões e barras de menu.

ALINH

Muito utiliz in

Alinhamento Justificado: O texto justificado

possui lacunas entre as palavras quando não é hifenizado corretamente. Porém, dificilmente será possível ter controle de uma boa hifenização em um conteúdo dinâmico.

Alinhamento à direita: O texto alinhado à direita

é difícil de ler já que o ponto inicial de cada linha é completamente irregular. No entanto pode ser bastante eficiente em trechos curtos de texto, como legendas ou citações, agregando movimento à composição.

ALIN

Alinhamento à esquerda: É a composição mais

comum e mais segura na web. Este formato respeita o fluxo da nossa direção natural de leitura. E por não ser justificado não deixa buracos entre as palavras do texto.

Cuidado

BACKGROUND

HAMENTO CENTRALIZADO

izado em títulos e para destacar nformações pontuais.

CONTRASTE

NHAMENTO À ESQUERDA

o com o tamanho das franjas.

BACKGROUND

ALINHAMENTO JUSTIFICADO

Se for necessário utilizá-lo, o alinhe com a última linha à esquerda.

CONTRASTE

ALINHAMENTO À DIREITA

Muito comum em legendas e é utilizado sem hifenização.

Órfã. É o que eu sou. Já eu sou uma Viúva. 46

Viúvas e órfãs Ao realizar a organização do conteúdo na web é necessário ficar atento a alguns detalhes para que o seu texto não fique desajustado visualmente:

Viúvas: Uma viúva é uma palavra solitária ou um

grupo curto de palavras que aparece na parte inferior de um parágrafo, coluna ou página. Elas tendem a fazer seções longas de texto parecerem desequilibradas e confusas, além de deixar muito espaço em branco no final de uma página.

Órfãs: Órfã é uma palavra solitária ou um grupo curto

de palavras indesejadas que aparecem sozinhas em uma coluna quando não há mais espaço na página ou parágrafo que elas deveriam estar inseridas, quebrando o fluxo da leitura.

Existe solução para ambas as situações! Se você quer evitar ao máximo que esses elementos apareçam evite o alinhamento à esquerda e à direita. Apesar do da esquerda ser o melhor para web, ele tende a provocar viúvas e órfãs. Outra dica é adaptar o seu conteúdo, às vezes alterar uma palavrinha pode ajustar a sua diagramação. Em último caso, se não puder mudar o texto que irá diagramar, ajuste suavemente o tracking do texto analisado. Apesar de não ser a técnica mais recomendada, é uma maneira eficaz se aplicada corretamente.

Entrelinha O espaçamento entre as linhas molda a aparência dos parágrafos e estrutura da página, dando ritmo vertical à medida em que o usuário acompanha o texto. Kpelo (2017) comenta que um texto composto por entrelinha muito apertada estimula o movimento vertical dos olhos e o usuário pode facilmente se perder. Da mesma forma, tipos compostos com entrelinha muito afastada criam listras que também distraem a leitura. Então, como estabelecer uma entrelinha confortável? Praticamente todos os softwares tomam como entrelinha padrão o valor de 120% do tamanho do tipo, por exemplo, um tipo de 10px é composto com uma entrelinha de 12px. Na web, o espaçamento de 150% tambem é muito comum. Considerando um layout para interfaces digitais, ao aplicar textos em colunas largas é recomendado escolher um valor de entrelinha maior do que o valor que seria utilizado para colunas estreitas ou normais, para que o olho do leitor consiga acompanhar a lógica de leitura.

Hey, cuidado com a

PEQUENA DEMAIS

IDEAL PARA O TAMANHO

GRANDE DEMAIS

entrelinha! 49

Kerning e tracking SANTOS(2018) comenta que quando usamos uma Open Type bem projetada não precisamos nos preocupar com espaços brancos que existem entre elas, como uma letra se comporta junta de outra, como as palavras se comportam na linha de texto, etc... Segundo ele todos esses critérios foram pensados pelo type designer na hora de desenhar uma fonte eficaz. No entanto nem toda fonte foi projetada visando essas preocupações, então podem acontecer alguns erros, como: as letras ficarem perto demais ou longe demais umas das outras, ou um elemento se comportar de maneira errada no momento em que é aplicado no contexto de um layout, etc... O kerning e o tracking existem para que possamos adequar essas fontes ao nosso projeto. Neste tópico vamos entendê-los e aprender como aplicá-los.

SEM KERNING

COM KERNING

SEM KERNING

COM KERNING

WA WA 52

Kerning: O kerning refere-se ao espaço entre duas

letras. SCACCA (2018) explica que ele pode ser ajustado para criar um resultado esteticamente mais agradável e ao mesmo tempo melhorar a legibilidade do texto. Veja a seguir algumas maneiras ensinadas por SANTOS (2018) para ajustar o kerning: Kerning Métrico: representa o valor do kerning entre os pares de caracteres que foi estabelecido previamente pelo desenvolvedor da fonte. Vale lembrar que o kerning métrico não é absoluto, já que ele varia dentro de uma mesma família de fontes. Para evitar o uso de informações de kerning interno de uma fonte no texto selecionado desabilite o kerning métrico no software. Kerning Óptico: Esse tipo de ajuste elimina os valores de kerning dados pelo fabricante e aplica valores em função do desenho de cada um dos caracteres. Para utilizá-lo basta definir o ponto de inserção de caracteres aos quais deseja aplicar o kerning. Kerning Manual: As maneiras anteriores de aplicar o kerning acontecem de forma automática, já o kerning manual vai do gosto e necessidade da pessoa que está utilizando a fonte. Para aplicar esse kerning é necessário selecionar os caracteres que precisam de ajuste e digitar no software o valor que você julgar adequado. Não existe uma regra definida, mas vale sempre a pena visar a facilidade de leitura do seu público.

Com Tracking Sem Tracking Co m T ra c k i ng 54

Tracking: Diferente do kerning, que se aplicava

nos pares de caracteres, o tracking diz respeito ao espaçamento entre letras e entre as palavras de todo um bloco de texto. Ou seja, se o tracking for alterado isso acarreta em uma mudança no espaçamento do conjunto de caracteres (palavra, frase, parágrafo) por inteiro. Lembre-se que o espaçamento entre as palavras deve ser consistente, então preste atenção se o texto está muito condensado ou espaçado em excesso. Se aplicado de maneira errada, o tracking pode prejudicar a leitura e a estética da mancha de texto. O valor do tracking geralmente é pré-definido pelo tipógrafo responsável pela fonte, então os valores já vem prontos na hora da aplicação. Caso queira alterar o tracking basta entrar no software que você está utilizando, selecionar o campo de texto a ser ajustado e definir um valor ideal de acordo com o seu caso.

Responsividade Design responsivo é um conceito, não é uma técnica. PACHECO (2014) diz que ele representa a adaptação de uma interface a qualquer resolução de tela, adaptando a experiência de navegação de acordo com as necessidades dos usuários e também de cada tipo de mídia. Ele é o melhor amigo da experiência do usuário. O design responsivo não simplesmente encolhe o conteúdo, mas adapta os elementos a fim de entregar ao usuário o melhor conteúdo e navegação para aquele cenário. Muitos dos critérios que auxiliam na responsividade de uma interface já foram citados anteriormente nos tópicos desse guia, como o tamanho de fonte, a questão de entrelinha, tracking, etc... Além dessas dicas, vamos comentar sobre mais duas maneiras de deixar seu layout mais adaptado para diferentes dimensões: fontes variáveis e limites de caractéres por parágrafos.

Just keep calm

and be responsive! 57

Limite de caracteres: Como o comprimento de

um bloco de texto pode variar de acordo com o tamanho da fonte utilizada, a forma mais eficaz de controlar essa medida é por meio da quantidade de caracteres. Colunas muito curtas podem quebrar o ritmo de leitura por possuírem poucas palavras em uma única linha. Colunas mais longas também dificultam a leitura, já que quando o leitor chega no final de uma linha comprida seu olho pode se perder para encontrar a linha de continuação. Para Kpelo (2017), a linha de 66 caracteres é considerada como ideal. Procure usar um comprimento médio de linha de 45–75 caracteres, incluindo espaços e pontuação. Na prática, as limitações de espaço ou as ordens de uso especial podem exigir comprimentos maiores ou menores. Em todo caso, ao diagramar um layout para interface digital mantenha-se atento para perceber quando o bloco está extremamente longo ou curto a ponto de prejudicar uma boa leitura.

66 CARACTERES POR LINHA FONTE DE TAMANHO 16PX

66 CARACTERES POR LINHA FONTE DE TAMANHO 12PX

Fontes variáveis: Como o nome sugere, são fontes

que permitem variações por meio de ajustes nos seus eixos. Quando os tipógrafos estão projetando esse tipo de fonte eles definem quais pontos no desenho da letra serão flexíveis, assim o designer ou o desenvolvedor pode alterar suas características (largura, peso, inclinação) o quanto precisarem.

Benefícios: Como o eixo que determina os aspectos físicos da fonte são mutáveis, o designer não fica limitado pelos pesos pré-selecionados existentes em uma família tipográfica, podendo criar centenas de novas possibilidades com a mesma tipografia. Outra vantagem é que as fontes variáveis possuem apenas um arquivo, então aplicá-las no CSS de um site pode reduzir o tempo de carregamento da página. Desvantagens: Por ser uma tecnologia nova nem todo navegador oferece suporte para rodar fontes variáveis, o que dificulta a sua aplicação. Além disso o trabalho para projetar esse tipo de fonte é enorme, pois além de todo o processo para criar uma fonte normal, nas variáveis o tipógrafo tem que definir quais pontos da estrutura de uma letra podem ser alterados, o quanto esses pontos podem mudar, como o kerning funcionará em cada estilo, etc ...

SUGESTÕES Deu pra perceber que a tipografia é a alma de um trabalho gráfico. Ela tem muita importância no peso da informação e na forma que os usuários finais perceberão o conteúdo que se pretende transmitir. Para finalizar e enfatizar a importância da tipografia, listamos algumas dicas que SCACCA (2018) oferece para a construção de sites.

Sugestões

1º 2º 3º

Não use mais de dois tipos de letra no celular. Simplesmente não há espaço suficiente para os visitantes lidarem com tantas opções visualmente.

Você não precisa ignorar completamente os tipos de letra decorativos. Pequenos toques do tipo personalizado não tradicional podem adicionar um pouco de sabor.

Não tenha medo de começar com uma fonte padrão do sistema, elas serão suas escolhas iniciais mais seguras. Se o site da sua área de trabalho usar uma fonte muito decorativa ou manuscrita, troque-a por algo mais tradicional no celular.

4º 5º 6º

Certifique-se de que seus dois tipos de letra se complementam. Especificamente, procure fontes que utilizem uma largura de caractere semelhante.

Evite tipos de letra que não tenham um conjunto distinto de caracteres. Por exemplo, compare como o maiúsculo “i”, minúsculo “l” e o número “1” aparecem ao lado um do outro.

Use fontes compatíveis em tantos dispositivos quanto possível. Suas melhores apostas serão: Arial, Courier New, Georgia, Tahoma, Times New Roman e Verdana.

BIBLIOGRAFIA

ZZZZZZZ zzzzzzzzzz ZZZZZZZ zzzzzzzzzz

KPELO, Diego. Você sabe usar tipografia em UI Design?. Disponível em: <<https://medium.com/ui-lab-school/voc%C3%AA-sabe-usartipografia-em-ui-design-9ce4ccdbab43>> Acesso em: 03 de maio de 2019. SCACCA, Suzanne. A Reference Guide For Typography In Mobile Web Design. Disponível em: <<https://www.smashingmagazine. com/2018/06/reference-guide-typography-mobile-web-design/>> Acesso em: 03 de maio de 2019. LYN. Visual Hierarchy: Improving Your Designs with Typographic Hierarchy. Disponível em: <<https://www.designbombs.com/visualhierarchy-improving-designs-typographic-hierarchy/>> Acesso em: 03 de maio de 2019. VASCONCELOS, Priscila. Tipografia para web. Disponível em: <<https:// designculture.com.br/tipografia-para-web>> Acesso em: 04 de maio de 2019. PACHECO, Andrea. Um guia completo sobre grids para design responsivo. Disponível em: <<https://brasil.uxdesign.cc/um-guiacompleto-sobre-grids-para-design-responsivo-6b192fea0124>> Acesso em: 04 de maio de 2019.

SÁNCHEZ, Isabella. Guia rápido de fontes para web. Disponível em: <<http://revistaw.com.br/guia-rapido-de-fontes-para-web/>> Acesso em: 03 de maio de 2019.

SHANASA, Dhyan. O Futuro da Tipografia é Responsivo. Disponível em: <<https://www.layerlemonade.com/tipografia/o-futuro-da-tipografiae-responsivo>> Acesso em: 04 de maio de 2019. KLIEVER, Janie. Fontes. Disponível em:<<https://www.canva.com/pt_ br/aprenda/fontes-design/>> Acesso em: 04 de maio de 2019. DEVOS, Jordan. Designing for Readability – A Guide to Web Typography (with Infographic). Disponível em:<<https://www.toptal.com/ designers/typography/web-typography-infographic>> Acesso em: 04 de maio de 2019. GUERRATO, Dani. Um guia completo de tipografia para a web. Disponível em:<<https://tableless.com.br/um-guia-completo-detipografia-para-a-web>> Acesso em: 03 de maio de 2019. SANTOS, Victor. Kerning e Tracking: vamos falar de tipografia?. Disponível em:<<https://medium.com/@victorctrl/kerning-e-trackingvamos-falar-de-tipografia-2955e4bd8870>> Acesso em: 03 de maio de 2019. SCHENKER, Marc. The Only Font Anatomy Design Guide You’ll Ever Need. Disponível em: <<https://creativemarket.com/blog/fontanatomy-design-guide>> Acesso em: 03 de maio de 2019.