Como escolher as melhores fontes para seu site
As melhores fontes para seu site
Cores, formas, proporções, linhas costumam ser os aspectos que a maioria das pessoas – especialmente os leigos em design – atentam. Mas poucos preocupam-se com as fontes. Quando o fazem, geralmente usam critérios meramente subjetivos, como "eu gosto", "eu não gosto", "eu acho bonita", "eu não acho bonita".
Mas escolher uma fonte apropriada para um site, exige ir bem além desse tipo de aspecto!
Você sabe que critérios se basear para escolher as melhores fontes para seu site? Se até hoje isso resumia-se ao que lhe agrada, chegou a hora de enxergar um pouco além.
O que é tipografia digital?
Em termos tradicionais, a tipografia é a arte de combinar os tipos (fontes) partindo da sua escolha, compondo o texto objetivando a legibilidade, por meio do tamanho dos caracteres, o espaçamento entre eles, bem como entre palavras e linhas.
O conceito nasceu ligado à impressão – livros, jornais e revistas, por exemplo – mas a partir do desenvolvimento do meios digitais – a transformação digital –, como o computador e mais recentemente os celulares, recebeu novos enfoques e preocupações.
Quando pensamos na variedade de dispositivos digitais pelos quais fazemos a leitura de diversos tipos de conteúdos, a tipografia digital ganhou importância inquestionável.
Ela representa o conjunto de fontes adotado para textos, títulos, subtítulos, menus, links, enfim cada elemento do site ou mesmo de uma aplicação, como os programas que você tem instalado no seu notebook ou os apps do celular.
Assim, a tipografia digital, constitui da escolha das fontes e que características elas devem ter (forma, tamanho, cor, espaçamento, etc) para apresentar o conteúdo textual, favorecer o seu consumo e compreensão, bem como facilitar a navegabilidade, quando usadas em um menu ou em um link, por exemplo.
A importância das fontes no site
A importância da legibilidade é um dos principais fatores ao se definir a tipografia digital. Fez inclusive com que nas menores telas os ícones ganhassem mais importância, como meio de tornar a identificação mais fácil.
Mas por mais que um ícone possa evitar o uso de texto em muitas situações, o texto ainda é fundamental.
Por isso, definir o conjunto de fontes que será empregada no seu site, é um dos aspectos mais relevantes e que ganha importância na proporção direta do volume de conteúdo escrito que ele possui.
Também é importante destacar que não é porque um site de e-commerce tem muito menos texto do que um blog, a escolha da fonte, tamanho, cor e espaçamento, é menos importante. Imagine os problemas que podem ocorrer, se os valores dos produtos não aparecem com a clareza necessária, ou porque a fonte não é suficientemente legível ou o tamanho é pequeno!
Fontes além de serem fáceis e agradáveis para a leitura, devem harmonizar com os demais elementos estéticos do site. Em vários casos, a escolha das fontes é parte inseparável do resultado visual que se tem.
Uma boa fonte, no tamanho e cores apropriados, podem inclusive ser elementos que ajudam a guiar o visitante por outros conteúdos.
Por isso, às vezes a escolha das fontes presentes em um site, constitui um dilema entre apresentação estética e função.
Quais os tipos de fontes
Convencionou-se agrupar as muitas fontes em 5 grandes grupos, definidos de acordo com as características que elas têm em comum:
Fontes com serifa (Serif fonts)
O aspecto que determina ou caracteriza essa família ou grupo de fontes, é uma pequena linha nas extremidades de cada letra ou símbolo. Fontes dessa família, também são chamadas fontes serifadas.
São tidas com uma tipografia mais antiga e tradicional, bastante usadas em material impresso, em textos longos, como em jornais, livros e revistas, isso porque a serifa – o traço na terminação de cada caractere – torna as letras individuais mais fáceis de serem reconhecidas pelo cérebro.
Já em telas de dispositivos digitais, essa característica já não é notada, em parte por conta das resoluções que são bastante inferiores aos impressos.
Exemplos clássicos, entre os mais usados e presente na maior parte dos sistemas operacionais, de fontes serifadas, são a Times New Roman, Courier New e Georgia.
Fontes sem serifa (Sans-Serif fonts)
Em oposição às fontes serifadas e como você já deve supor, constitui a família de fontes em que os caracteres não tem serifas. O termo "sans" que precede o nome, vem do francês e significa "sem". Portanto, são as fontes sem serifas.
São consideradas fontes mais modernas.
Geralmente as fontes não serifadas, são melhores visualizadas em tamanhos menores.
Em telas digitais, as fontes sem serifas, são mais fáceis de reconhecimento por parte do olho humano como um bloco, resultando em legibilidade maior e facilitando uma leitura mais dinâmica. Portanto, é a classe ou família mais usada em sites com texto predominando como conteúdo.
Entre as mais usadas e que constam de boa parte dos sistemas, estão a Arial, Verdana e Helvética.
Fontes cursivas (Cursive fonts)
A família das fontes cursivas, é representada pelas fontes que assemelham-se à escrita a mão. Também podem ser chamadas de caligráficas ou manuscritas, sendo esta última denominação menos frequente, embora em inglês (handwritting) seja bastante usada.
Nas fontes melhores concebidas, a terminação de uma letra, conduz ao início da seguinte, tal como ocorre nas "letras de mão", quando escrevemos.
Esteticamente podem ter uma aparência agradável, mas devem ser usadas com moderação e para pequenos conjuntos de palavras, pois a legibilidade é inferior aos outros grupos.
A vantagem do seu emprego, é quando se tem a necessidade de passar uma conotação mais humana ou algum sentimento, como por exemplo em um poema ou um convite de casamento.
Exemplos populares desse grupo, são a Brush Script, Freestyle Script e Harlow.
Fontes fantasia (Fantasy fonts)
As fontes fantasia caracterizam-se por conter elementos decorativos nas letras ou quando elas são estilizadas para passar uma ideia ou conceito.
Assim por exemplo, uma fonte dessa família, quando tem um nome conjugado com a palavra 3D ou block, geralmente tem cada caractere com uma representação tridimensional.
São fontes muito apropriadas para temática infantil, relação com personagens e mesmo temas populares, como por exemplo, filmes ou marcas famosas.
Dois exemplos que fazem uso desse conceito, são a fonte da marca Coca-Cola e do nome do filme Star Wars.
Fontes monoespaçadas (monospaced)
Esse grupo tem como aspecto diferenciador, o fato das letras ocuparem o mesmo espaço horizontal, em contraposição aos demais grupos, em que por exemplo, o espaço da letra "i", não é o mesmo ocupado pela letra "a".
Máquinas de escrever são um exemplo em que este tipo está presente.
Atualmente o seu emprego ocorre em editores voltados a edição de programação, telas de terminais e situações em que a legibilidade depende de espaços bem definidos e fixos para cada caractere usado.
Que critérios usar para escolher o tipo de fonte para o site?
Alguns aspectos já devem estar evidentes, outros nem tanto. Por essa razão, vamos listar os tópicos que você deve considerar ao escolher o melhor conjunto de fontes a usar no seu site:
Fontes web seguras
São consideradas fontes seguras, as fontes que são padrão na maior parte dos sistemas operacionais. Não é consenso e não há um padrão, porém há fontes que são mais comuns a maioria dos sistemas operacionais, como por exemplo, Arial ou Times New Roman. Naturalmente são definidas como seguras, por já fazerem parte do sistema operacional do dispositivo;
Embora seja possível determinar um link para download, por meio do código do site, caso haja necessidade ou interesse na utilização de uma fonte específica e incomum, sempre que isso ocorrer, uma fração de tempo a mais é acrescida ao carregamento da página, a fim de baixar a fonte que não é nativa do sistema;
Criadas por uma parceria entre Microsoft e Apple, têm a vantagem de poderem ser dimensionadas para qualquer tamanho, sem perda da legibilidade ou da definição. São recomendadas quando é preciso uma fonte leve, mas que imprima bem e tenha uma boa qualidade em telas digitais;
A adoção de fontes de acordo com sua separação em famílias, pode levar em consideração vários fatores, mas em linhas gerais, os seguintes critérios prevalecem:
Fontes sem serifas – são mais indicadas para conteúdo predominantemente em texto e especialmente em sites responsivos ou mobile, em que há uma redução apreciável no tamanho visível de cada caractere;
Fontes serifadas – também podem ser usadas em sites com boa quantidade de texto, desde que o tamanho usado não seja pequeno (inferior a 12px). Para tamanhos grandes, como em títulos ou em pequenas porções de texto, também podem ser usadas sem restrições, bem como quando se tem designs mais conservadores e tradicionais, como um site institucional de uma advocacia;
Fontes cursivas – devem restringir-se a pequenas quantidades de texto, quando absolutamente necessário e o enredo do site for apropriado, como nos exemplos que já citamos anteriormente;
Fontes fantasia – assim como as cursivas, devem ser usadas com parcimônia, reservando-se a títulos, cabeçalhos, infográficos ou em situações bem específicas;
Fontes mono espaçadas – é indicada para sites voltados a assuntos mais técnicos, como por exemplo, na transcrição de um trecho de programação, mas não nos demais textos do site.
Ótima alternativa para fontes na web é o Google Fonts, pois consiste de um banco de fontes gratuitas criado e mantido pelo Google. Além da gratuidade, é possível utilizar uma utilíssima ferramenta que é atualizada em tempo real com um ranking de fontes mais usadas / visualizadas e que é o Analytics;
Esse é um aspecto fundamental, que pouquíssimos desenvolvedores preocupam-se. Seu site é funcional? O que as pessoas que nele navegam relatam? Lembre-se que nem todos têm uma vista perfeita. A família de fontes escolhida, a cor, o tamanho, o espaçamento favorece a leitura por parte de qualquer pessoa?
Evite os extremos, ou seja, excesso de contraste entre fundo e cor da fonte, pode ser tão prejudicial ao leitor, como pouquíssimo contraste. Se não for fácil a leitura, você pode perder visitantes que não tenham absoluta necessidade de estar no site.
Fontes e o UX Design
A experiência do usuário (UX Design) passa por muitos aspectos e um deles, é o papel que o conjunto de fontes desempenha no que o visitante vê e como ele interaje no site.
A tipografia digital é um assunto bastante amplo e vai muito além da simples escolha de uma fonte que lhe agrade. Formas, cores, tamanhos, espaçamentos e como tudo isso se harmoniza com os demais elementos que compõem o site, devem produzir um resultado atraente visualmente, mas também funcional ao internauta.
Há naturalmente exceções e situações especiais, como um site com temática artística, com conteúdo prioritariamente composto por imagens, vídeos, ou qualquer coisa que não exija muita leitura. Nesse caso, há liberdade para ousar e utilizar fontes menos convencionais e tradicionais.
Sobretudo, colha feedback do público-alvo do site e de um universo amplo de possíveis usuários, testando sua visualização e se ela é amigável e fácil em diferentes dispositivos, os quais têm telas com maiores e menores resoluções e, portanto, fidelidades visuais distintas.
As fontes têm um papel que vai bem além de simplesmente traduzir as ideias e conceitos do conteúdo, em palavras. Eles constituem também elemento estéticos e funcionais e até mesmo auxiliam a navegação. São elementos que contribuem para a experiência do usuário no site.
` }) Vue.component('component-criar-comentario', { props: ['value'], name: 'component-criar-comentario', data: function () { return { nome: { valor: null, erro: false }, email:{ valor: null, erro: false, erroMensagem: 'Preenchimento necessário.' }, comentario: {valor: '', erro: false }, url: 'fontes-para-seu-site', //enviadoSucesso: null, carregando: false, store: store.state } }, computed: { comentarioChars: function() { if(this.comentario.valor.length > 3500) this.comentario.valor = this.comentario.valor.substring(0, 3500); return this.comentario.valor.length; }, pai: { get: function() { return this.value }, set: function(novoValor) { this.$emit('input', novoValor) } }, enviadoSucesso: { get: function() { return this.store.enviadoSucesso }, set: function(novoValor) { store.setEnviadoSucesso(novoValor) } }, comentarios: { get: function() { return this.store.comentarios }, set: function(novoValor) { store.setComentarios(novoValor) } } }, methods: { addComentario: function () { //Se já há um envio em andamento if(this.carregando) return; // Zerar os erros this.nome.erro = false this.email.erro = false this.comentario.erro = false if(!this.nome.valor) { this.nome.erro = true console.log('nome vazio') } if(!this.email.valor) { this.email.erro = true this.email.erroMensagem = 'Preenchimento necessário.' console.log('email vazio') } if(!this.comentario.valor) { this.comentario.erro = true console.log('comentario vazio') } if(!this.comentarioChars > 500) { this.comentario.erro = true console.log('comentario maior que 500') } if(this.nome.erro || this.email.erro || this.comentario.erro) { console.log('erro') return; } this.carregando = true // Obtem os dados // analisa se os dados estão corretos // Envia os dados para o servidor e aguarda o retorno var bodyFormData = new FormData() var that = this bodyFormData.set('pai', this.pai) bodyFormData.set('nome', this.nome.valor) bodyFormData.set('email', this.email.valor) bodyFormData.set('comentario', this.limparComentario(this.comentario.valor)) axios.post(`https://www.hostmidia.com.br/blog/comentario-adicionar/${this.url}/`, bodyFormData) .then(function (response) { if(response.data.success) { // Se retornar com sucesso adiciona o nome e o email ao cookie that.enviadoSucesso = that.pai // Cria um timeout para desaparece a mensagem de sucesso setTimeout(() => that.enviadoSucesso = null, 5000); localStorage.setItem('nome', that.nome.valor) localStorage.setItem('email', that.email.valor) var novoComentario = { pai: that.pai, url: that.url, data: new Date(), comentario: that.limparComentario(that.comentario.valor), filhos: [], id: response.data.success, nome: that.nome.valor } //Zera comentario that.comentario.valor = '' // Adiciona o comentario a lista, para ser visualizado // Se o pai é 0 então não tem pai, caso contrário localiza o pai e adiciona como filho if(that.pai == 0) { that.comentarios.push(novoComentario) } else { that.comentarios.forEach(comentario => that.adicionarFilho(comentario, that.pai, novoComentario) ) } that.pai = 0 //Salva localmente o comentario var comentarios = JSON.parse(localStorage.getItem('novoComentarios')) if(!comentarios) { localStorage.setItem( 'novoComentarios', JSON.stringify([novoComentario]) ) } else { comentarios.push(novoComentario) localStorage.setItem( 'novoComentarios', JSON.stringify(comentarios) ) } } else { console.log('erro') if(response.data.field == 'email') { that.email.erro = true that.email.erroMensagem = 'Endereço de e-mail inválido.' } that.enviadoSucesso = null } that.carregando = false }) .catch(function (error) { // handle error console.log(error); that.enviadoSucesso = false that.carregando = false }) }, limparComentario: function(comentario) { var d = document.createElement('div'); d.innerHTML = comentario; return d.textContent; }, // Adiciona um comentario à lista como filho do respectivo pai adicionarFilho: function(comentario, id, object) { if(comentario.id == id) { comentario.filhos.push(object) return } var that = this comentario.filhos.forEach( filho => that.adicionarFilho(filho, id, object) ) } }, created: function() { //Ver se tem um cookie com os dados do email e nome se já enviou um comentario com sucesso this.nome.valor = localStorage.getItem('nome') this.email.valor = localStorage.getItem('email') }, template: `
` }) // -- Principal -- var app = new Vue({ el: '#app', data: { loading: false, comentarResposta: 0, url: 'fontes-para-seu-site', store: store.state }, computed: { comentarios: { get: function() { return this.store.comentarios }, set: function(novoValor) { store.setComentarios(novoValor) } }, totalComentarios: { get: function() { return this.store.comentarios.reduce(this.somarComentarios, this.store.comentarios.length) } } }, methods: { somarComentarios: function(acc, item) { if(item.filhos.length === 0) { return acc; } else { return item.filhos.reduce(this.somarComentarios, acc+item.filhos.length) } }, // Se há um comentário salvo localmente adicionar como filho do respectivo pai adicionarFilho: function(comentario, id, object) { if(comentario.id == id) { // Verifica se o comentario já existe, ou seja foi aprovado if(comentario.filhos.find((c) => c.id == object.id) === undefined) { comentario.filhos.push(object) } return } var that = this comentario.filhos.forEach( filho => that.adicionarFilho(filho, id, object) ) } }, created: function() { //Limpar os comentários mais antigos que três dias window.requestIdleCallback(() => { var comentarios = JSON.parse(localStorage.getItem('novoComentarios')) var dataReferencia = new Date() dataReferencia.setDate(dataReferencia.getDate() - 3) // Se a data do comentario for maior que três dias atrás então mantem if(comentarios) { comentarios = comentarios.filter( (c) => new Date(c.data) > dataReferencia ) localStorage.setItem( 'novoComentarios', JSON.stringify(comentarios) ) } } ) var that = this; axios.get('https://www.hostmidia.com.br/blog/comentario-listar/fontes-para-seu-site') .then(function (response) { if(response.data) { that.comentarios = response.data var novoComentarios = JSON.parse(localStorage.getItem('novoComentarios')) if(novoComentarios) { novoComentarios = novoComentarios.filter((c) => c.url == that.url) novoComentarios.forEach(novoComentario => { // Se o pai é 0 então não tem pai, caso contrário localiza o pai e adiciona como filho if(novoComentario.pai == 0) { // Verifica se o comentario já existe, ou seja foi aprovado if(that.comentarios.find((c) => c.id == novoComentario.id) === undefined) { that.comentarios.push(novoComentario) } } else { that.comentarios.forEach(comentario => that.adicionarFilho(comentario, novoComentario.pai, novoComentario) ) } }) } } else { console.log('erro') } }) .catch(function (error) { // handle error that.loading = false; console.log(error); }) } })