Uma olhada em melhor tipografia para sites modernos

O texto digital pode ser formatado em muitos tipos. Com o avanço das fontes da web e dos scripts do navegador, vimos novos códigos de projeto para os desenvolvedores utilizarem. Web designers também estão procurando a melhor estratégia para codificar seus sites e construir um estilo tipográfico uniforme entre todas as suas páginas..

Muitos designers profissionais escreveram sobre o tema, incluindo recursos e serviços atualizados. Você tem que considerar cada página da web como um documento singular que quebra seu design de layout raiz. Sob essa visão, é fácil ver como a tipografia pode fluir de uma página para outra e oferecer uma saída exclusiva para a criatividade. E isso se torna especialmente aparente criando classes exclusivas para seus parágrafos e títulos.

Abaixo eu estarei indo em algumas idéias fantásticas para aspirantes designers de tipografia interessados ​​em construir para a web. Blogs, redes sociais e empresas estão sempre procurando atualizar seu site atual. E os estilos CSS para tipografia na Web fornecem uma excelente fonte para começar a atualizar suas páginas.

Diferenças na Internet de hoje

A web moderna avançou drasticamente desde o início de 2000. Há muitos recursos novos para os web designers criarem obras fantásticas de design gráfico, logotipos, banners e praticamente qualquer outra coisa. O lançamento das especificações HTML5 e CSS3 também prejudicou a maneira antiga de construir fontes da Web..

Agora é totalmente possível incluir suas próprias fontes com o CSS @Tipo de letra propriedade. Você pode usar qualquer Tipo verdadeiro(.ttf) ou Tipo aberto(.otf) e armazene uma cópia localmente em seu servidor. Então, com alguma mágica CSS3, inclua a família em qualquer lugar da sua página da Web.!

Sob essa técnica, é possível ver como a Internet moderna se tornou.

E com o jQuery crescendo em popularidade todos os dias, não é surpresa podermos criar efeitos de animação surpreendentes, combinados com fontes personalizadas. Como uma alternativa ao método acima, o plugin TTFGen para jQuery permite incluir qualquer fonte TrueType na sua página da Web..

Esse método é um pouco mais confiável, já que você não precisa de um navegador moderno que suporte os padrões CSS3 para fazê-lo funcionar. Mas é claro que os navegadores legados, como o Internet Explorer 6, terão dificuldades para renderizar corretamente.

Mas, graças a Deus, a maioria dos usuários mudou para os mais novos softwares de navegação que suportam esses padrões! E quando você está desenvolvendo para a web, você deve considerar exatamente para quem seu mercado é. Você não pode agradar todo mundo o tempo todo, mas você pode com certeza tentar chegar perto o suficiente.

O objetivo da tipografia digital

É uma ideia estranha de considerar, mas qual é o propósito real do texto digital? Para transmitir informações, compartilhar fontes e oferecer sua opinião ao mundo dos usuários da Internet. O texto é a forma mais simplista de mídia para compartilhar pensamentos e ideias. Mas também é muito complexo e contém detalhes importantes que fotos / vídeos simplesmente não podem usar.

É provável que seus visitantes encontrem seu website com base em palavras-chave em seu texto ou títulos - apenas mais um motivo para prestar muita atenção em sua cópia da web. E uma vez que você tenha recebido alguma atenção em seu site, precisa manter a concentração. Isso é mais facilmente feito com títulos em negrito e texto de página com espaçamento uniforme.

Se você está escrevendo um artigo ou tutorial, então você precisa usar uma linguagem clara. Está Igualmente importante quanto a aparência do texto da sua página e a qualidade do seu conteúdo. Quanto maior o texto aparecer, mais fácil será ler e procurar palavras-chave. E como os parágrafos contêm a maior parte do seu conteúdo, você deve gastar muito tempo para criar o protótipo adequado. Os parágrafos são usados ​​para transmitir sua mensagem em blocos de tamanho de bits divididos em sentenças. Entenda como você escreve e planeja com antecedência para obter um layout de página adequado.

Além disso, com o texto da sua página, vem mídia e conteúdo secundário. Se os seus parágrafos contiverem informações primárias, talvez você tenha gráficos ou imagens para apimentar a página. Esses toques são o toque certo para manter os usuários em movimento em seu site.

Vídeos e imagens são capazes de dividir o seu conteúdo e fazer parecer que os leitores estão se movendo mais rapidamente através do seu artigo. Mas use esses itens com moderação e não deixe nada sobrecarregar sua mensagem principal. Os usuários estão (principalmente) chegando ao seu site para obter informações e não querem muitas distrações.

Todas as outras opções de formatação são usadas para especificar funcionalidade ou finalidade. Por exemplo, o texto do hiperlink é geralmente uma cor diferente do restante para se destacar como “clicável”. Você pode trabalhar com palavras em negrito ou itálico adicionando ênfase às suas frases. E o uso de blockquotes ou texto pré-formatado pode ajudar a delinear instruções fundamentais ou código web, respectivamente.

Cabeçalhos da página da web

Um dos recursos mais importantes para a sua tipografia na web é o direcionamento de tags. Se você não estiver familiarizado com os títulos em HTML,

para

com o primeiro detendo a maior importância e o último, o menos importante. Essa marcação é útil para entender, pois o Google também classifica seu domínio e páginas da Web com base na estrutura de conteúdo. Assim, você acaba tendo controle sobre quais palavras-chave você usa e qual camada de títulos seria necessária.

Mesmo que a especificação HTML5 padrão inclua até 6 estilos de título diferentes, recomendo usar entre 3 e 4. Não é necessário incluí-los em todas as suas páginas. E também é altamente improvável que você encontre um uso para 6 títulos diferentes. Quando você se senta para construir seus estilos, tente esboçar alguns exemplos de cabeçalhos para ver o que você gosta.

O Photoshop é excelente para esse cenário. Você também pode tentar codificar cabeçalhos diferentes em HTML para ver como eles aparecem no navegador. O importante é trabalhar com o fluxo de página e os cabeçalhos de design de acordo com sua classificação.

Por exemplo, o seu

tags devem destacar-se mais entre todos os títulos de sua página.

e

são as tags mais populares e recomendadas pelo Google para rastrear o conteúdo da página. Usar efeitos de design como fonte em negrito, sublinhados, bordas tracejadas ou cores diferentes ajudará seus títulos a sair da página.

O espaçamento também é importante quando se trata de títulos, ou qualquer parte do seu conteúdo para esse assunto. Certifique-se de adicionar margens adicionais entre seus títulos e a área de conteúdo principal. Se você fez sua fonte grande o suficiente, cada título deve se destacar como seu próprio bloco principal. Esse visual é ideal se você quiser atrair a atenção dos leitores com uma mensagem clara.

Construindo hiperlinks exclusivos

Há muito a dizer sobre o tema dos links das páginas. De uma forma ou de outra, você terá que usar hyperlinks em seu código. Eles são extremamente importantes como a principal interface de navegação entre diferentes páginas do seu site. Você também pode criar um link para outros blogs ou até mesmo postagens de blog arquivadas para referência futura..

Você deve escolher o texto de exploração para o seu link com muito cuidado. Este é o conteúdo específico que será acentuado por um estilo de link. Por exemplo, "clique aqui" é muito popular e usado para downloads diretos na maioria das vezes. Tente evitar essa abordagem sistemática e, em vez disso, seja um pouco criativo com o texto do hiperlink. É muito mais provável que seus visitantes cliquem em um link se também puderem reconhecer o contexto e talvez descobrir o que a nova página conterá.

Ao ir para o estilo de seus links você deve considerar o seguinte - como as mudanças ficariam na configuração da sua página, Em que tipo de cor de fundo você está trabalhando?, e que cor é o texto para contraste?

Links devem aparecer descaradamente fora da página como itens clicáveis ​​- afinal, essa é a sua função. É por isso que o antigo efeito de texto sublinhado azul funciona tão bem. Mas se você achar que uma cor alternativa funciona melhor, você deve experimentá-la. Não existe uma solução única para todos os designs de links. Basta navegar um pouco pela Web e você certamente criará algo extraordinário.

Um ponto de interesse é alguns recursos que você deve experimentar evitando. Coisas como alterar a família de fontes de texto ou o tamanho da fonte podem ser muito irritantes. Isso fará com que o texto se distorça e se mova, o que pode colocar o cursor do mouse fora da zona de link. De maneira semelhante, você deve evitar adicionar margens extra / preenchimento aos seus links ou efeitos de foco. Estes funcionam muito melhor quando você fica simples. Uma mudança de cor ou um sublinhado adicionado influencia muito a experiência do usuário.

Construção de listas estilizadas

As chances são boas, você terá que também trabalhar com listas em algum momento. Estão incluídas listas ordenadas e não ordenadas em HTML. Eles são perfeitos para oferecer uma pequena coleção de ideias, produtos, pessoas ou links online em uma quantidade muito pequena de espaço. O estilo não é tão diferente de parágrafos ou cabeçalhos, seja.

Seus visitantes devem entender imediatamente que estão vendo uma lista de itens. Mantenha cada item da lista separado e localizado em uma nova linha na sua página. Adicione algum espaço extra entre eles, se possível. Isso dará algum espaço para respirar e aparecerá como uma boa separação para o texto do artigo. Se você quiser, pode até mesmo negrito a fonte ou indent lista um pouco para ficar longe das margens do layout padrão.

Adicionar recursos adicionais para ajudar sua lista a se destacar não é um requisito. Mas se você gosta do estilo de layout de bloco, ele realmente mantém o foco em suas listas. Você pode tentar adicionar um fundo claro ou ícones. A List Apart tem um ótimo artigo sobre listas de domar, que eu acho que inclui algumas dicas muito poderosas de conhecimento. Mas se você estiver mantendo o conteúdo da página linear e usando blocos de lista apenas quando necessário, você não deve se deparar com nenhum revés de design.

Como criar cotações na página

O aparecimento de citações e citações é muito limitado nos dias de hoje. No início da web você não veria muito desses elementos em uso. Talvez em editoriais, ensaios ou documentos educacionais. Mas o HTML5 certamente atualizou as regras um pouco, o que torna muito mais fácil bloquear blockquotes.

O site do Doutor em HTML5 inclui um recurso fascinante para discutir este tópico exato. Eles discutem o uso de conteúdo dentro de blockquotes como aparecendo internamente à estrutura do documento. Assim, você pode incluir títulos, parágrafos e até mesmo listas e rodapés também. O principal uso de um