Tipografia é a arte e técnica de composição do tipo da grafia e como usá-lo para impressão. A tipografia tem sido usada em toda a web e elas são cruciais para atingir o objetivo do site – transmitir a mensagem certa para o público. Para isso você deve fazer uso adequado do tamanho do texto, cor e estilo para que o público receba exatamente a mesma imagem que você deseja retratar.

Noções Básicas

Ao projetar sites, o básico que você deve considerar é:

• Se as fontes são seguras para a Web;

• A quantidade certa de espaçamento – kerning e leading;

• O alinhamento.

Outra coisa sobre fontes que você deve saber é como a mesma fonte funciona de maneira diferente na mídia impressa e de forma diferente para sites. Existem duas classificações principais de fontes: a fonte serif e a fonte sans-serif.

Fontes Serif: tem serif ou enfeites extra no final dos traços para cada letra, eles são frequentemente chamados de pés ou caudas.

Fontes sem serifa: não tem estes serif ou qualquer detalhe extra no final de cada letra.

Fontes seguras da Web:

A coisa mais importante que você deve considerar ao escolher fontes para o seu site é se é seguro usá-lo no site. Se todas as plataformas na internet são compatíveis com a fonte que você usa. Ao usar CSS, você pode declarar sua fonte ou redefini-la usando @ font-face, dando a você a liberdade de escolher entre qualquer fonte Open-type ou True-type disponível. Se você não estiver familiarizado com o @ font-face, existem várias ferramentas de substituição de fontes como Cufon, sIFR e muito mais que você pode usar.

Pilhas de fontes:

Essa é outra maneira de garantir que suas fontes sejam totalmente seguras para a web. Você pode definir um número de fontes em uma hierarquia ou uma ordem de precedência, dando ao site uma alternativa a ser usada se o navegador for incompatível.

Espaçamento.

O espaçamento desempenha um papel importante na melhoria da legibilidade do site. Além disso, o uso adequado do espaço em branco é em si uma arte que empresta profissionalismo ao seu site e facilita a compreensão do texto em seu site. Quando se trata de tipografia, há vários aspectos do espaço que devem ser considerados como espaçamento entre letras e espaçamento de palavras.

Espaçamento entre letras e palavras.

O espaço branco em torno de cada letra desempenha um papel importante no discernimento de cada letra e torná-la mais legível. No caso do corpo do texto, que geralmente é um grande pedaço de texto, esses espaços brancos melhoram a capacidade de compreender o que foi escrito. O mesmo vale para espaçamento de palavras e largura também.

Altura da linha.

Isso lida com o espaço entre as linhas de texto que você está usando. Novamente, eles podem ser ajustados para melhorar a legibilidade do texto e torná-los interessantes e fáceis de entender e entender.

Verificação de Alinhamento.

Este é outro aspecto de apresentar seu texto de uma maneira simples. Você tem que manter uma verificação no pano de seus parágrafos. Rag é o final de seus parágrafos na linha de texto. Estas são áreas menores que são ajustadas para dar um bom efeito ao seu site.

Você tem que ter em mente que cada navegador teria diferentes quebras de linha ou quebras de palavras, por isso é melhor fazer uma linha manual ou uma quebra de palavra para suportar um pano limpo.

Misturando fontes.

A mistura de fontes diferentes pode ser bastante desastrosa se você não suportar o equilíbrio e os estilos corretos. Assim como uma bebida bem misturada só sabe bem se todos os elementos se misturam bem, a tipografia também faz maravilhas se você encontrar o equilíbrio certo entre todos os elementos. Geralmente, é melhor manter dois estilos, um para os títulos e outro para o texto do corpo. Você também pode adicionar variações como fontes com serifa e fontes sem serifa e usar o tamanho para estabelecer uma hierarquia para o seu site.

Como lidar com links.

Você precisa garantir que o conteúdo vinculado se destaque do resto do texto e não seja enterrado em blocos de texto. Os links sublinhados são uma prática comum que é seguida. Alterar a cor também é uma boa ideia. Você também deve facilitar a localização de links visitados e não visitados.

Tipografia Interativa.

É aqui que discutimos como a tipografia pode ser efetivamente usada para envolver positivamente o público

O modelo de caixa!

Este modelo considera basicamente todos os elementos do seu site em uma caixa. Isso é você tem que espaçar tudo, incluindo o tipo dentro das margens, preenchimento e bordas para que eles não pareçam abafados ou espremidos de alguma forma para caber. Deve haver espaço suficiente para dar ao seu site um apelo aerodinâmico, de modo que as margens, o preenchimento e as bordas sejam definidos como zero e, em seguida, ajuste o tipo de acordo para ter uma aparência espaçosa ou arejada.

Tipo de Navegação.

A navegação é uma parte altamente interativa da tipografia, portanto atenção e tempo adequados devem ser reservados para trabalhar a navegação e a tipografia para o mesmo. Você precisa usar a fonte correta e também destacá-la para que ela seja facilmente discernida.

Contraste.

Depois de corrigir os aspectos de tipografia do seu site, você deve coordená-lo com os vários outros elementos de design e certificar-se de que sua tipografia não seja afundada em um oceano de cores de fundo, imagens e padrões que compõem o seu site. Use o contraste certo para garantir que a legibilidade seja mantida.

Ferramentas de Tipografia

Estas são uma lista de ferramentas úteis para tornar o design mais fácil para você quando se trata de tipografia.

Typester é uma aplicação online que compara fontes para a tela. Isso torna mais fácil para os designers, atualizando novas fontes para a lista existente;

HTML Ipsum é um conjunto de lorum ipsum pré-codificado para web designers que ajudam a organizar o conteúdo do seu site, fornecendo conteúdo fictício para o conjunto de todas as suas atividades e necessidades de teste de tipo;

EM Calculator é uma ferramenta JavaScript que basicamente torna o design de CSS escalável e acessível. Ele converte o tamanho de pixels em unidades relativas, que são eficazes para o tamanho do texto;

Construtor de Pilha de Fontes é usado para criar poderosas declarações de família de fontes CSS. O construtor de pilha de fontes exibe quais fontes preferidas são exibidas nos navegadores da Web Windows, Mac e Linux;

Referência de Tipografia CSS Sheet é uma ferramenta de referência composta de três seções: Tabela de propriedades de tipografia CSS, Tabela de fontes seguras da Web e Tabela de conversão de valores de tipografia CSS.