Eae, td bele?
Você sabia que há tempos passados existia uma limitação que restringia o trabalho com tipografia a um pequeno número de fontes para uso em um site?
Essas fontes eram aquelas geralmente já instaladas em nossos computadores e caso um site exigisse uma fonte não instalada o navegador não processava a solicitação.
Hoje (graças aos deuses nerds da web :P) o cenário é diferente. O trabalho com tipografia na web tem sido facilitado por sistemas de incorporação de fontes com uma gama muito maior de diferentes tipos. Agora temos a capacidade de carregar fontes para um servidor e incluí-los em um site através da regra CSS @font-face. Podemos também utilizar de serviços como o Google fonts que possibilita incorporar fontes em nosso sites com licença gratuita. Este processo mostrarei mais a frente. 🙂
A grande questão agora é que mesmo com esta possibilidade de incorporar inúmeras fontes em nossos projetos precisamos conhecer os princípios básicos de tipografia. Vamos aprofundar um pouco mais mostrando alguns princípios básicos e como aplicá-los às nossas páginas web usando HTML e CSS.
Preparado Galucho?
Nesta artigo você verá:
- Cor em textos
- Propriedades de fontes
- Propriedades de textos
- Incorporando Web fonts
- Sites para inspiração
NOTA IMPORTANTE: Se você ainda não tem uma noção básica de como funciona a sintaxe CSS sugiro a leitura deste artigo; “CSS e suas Propriedades mais usadas!” antes de continuar por aqui.
Cor em textos
Geralmente uma das decisões fundamentais para quem está começando a desenvolver um site é a escolha de cores. E logicamente a escolha das cores a serem usadas em textos passa por este processo.
Essa decisão influencia na legibilidade e leiturabilidade de nossas páginas e também na funções que a cor junto da tipografia tem de hierarquizar, classificar e de passar informações.
A propriedade CSS que usamos para definir a cor para um fonte é a propriedade “color”. O valor que usarei no exemplo a seguir é o de formato hexadecimal, o mais utilizado em projetos web., porém é bom saber podemos utilizar também valores com os formatos RGB, RGBA, HSL e HSLA.
body {
color: #0087cc;
}O código acima deve gerar uma fonte de cor azul para o corpo do texto. No quadro abaixo você pode ver o resultado com acesso também ao código HTML utilizado.
Propriedades de fontes
O CSS é realmente maravilhoso. Com ele temos a possibilidade de trabalhar com diferentes tipo de propriedades que impactam visualmente nossos projetos. Falaremos agora das propriedades que fornecem estilos as fontes.
Família de fontes
Obviamente quando você está projetando seu site, terá que definir quais famílias tipográficas serão utilizadas na páginas web. O CSS possibilita você estilizar trechos ou até um texto inteiro com a fonte desejada através da propriedade “font-family”. Esta propriedade além de declarar qual fonte primária a ser utilizada ela também define quais fontes alternativas substituirão no texto caso a primeira fonte declarada não estiver disponível.
A fonte primária é a primeira fonte declarada a partir da esquerda. As fontes alternativas são declarados depois por ordem de preferência, da esquerda para a direita.
Em alguns casos os nomes de fontes possuem duas ou mais palavras. Nesses casos eles devem estar envolto em aspas. Outras coisa importante a frisar é que o último tipo de fonte deve ser um valor de palavra-chave que usará a fonte padrão do sistema caso as anteriores não estejam disponíveis. Os tipos podem ser: sans-serif, serif, cursive, fantasy, monospace.
Agora vamos a um exemplo prático:
body {
font-family: Georgia, Palatino, "Times New Roman", serif;
}Veja o resultado:
Tamanho da fonte
Para alterar o tamanho da fonte em um site inteiro ou em trechos o CSS utiliza a propriedade “font-size” usando valores como pixels, unidades em, porcentagens, pontos, entre outros.
O uso é bem simples. Veja a seguir:
body {
font-size: 18px;
}
span {
font-size: 14px;
}Confira o resultado:
Peso da fonte
O peso da fonte tem relação com a espessura dos glifos da fonte. Em CSS é muito comum usarmos o peso da fonte para “negritar” um texto. Porém, esta não é a única possibilidade levando em consideração os outros valores existentes, ainda mais com a facilidade de incorporar fontes existente hoje dias, já citada neste artigo.
A propriedade CSS para o peso da fonte é a “font-weight” e fornece os seguintes valores:
- 100 – Thin;
- 200 – Extra Light (Ultra Light);
- 300 – Light;
- 400 – Normal;
- 500 – Medium;
- 600 – Semi Bold (Demi Bold);
- 700 – Bold;
- 800 – Extra Bold (Ultra Bold);
- 900 – Black (Heavy).
Vamos a um exemplo:
p {
font-weight: bold;
}
span {
font-weight: normal;
}Observação: Antes de utilizar um valor numérico, precisamos verificar se a fonte que estamos aplicando vem com o peso que gostaríamos de usar. A tentativa de usar um peso que não está disponível para um determinada fonte fará com que estilize o texto para o valor padrão mais próximo.
Estilo da fonte
Os estilos de fontes que consideramos para uso em CSS possuem os valores normal, itálico e oblíquo. E a propriedade usada é a “font-style”.
O valor normal mantém a fonte “em pé” (valor padrão). Oblíquo “inclina a fonte”. O mesmo se nota no itálico, a diferença que nele a inclinação aparenta ser escrita a mão em alguns tipos de fontes. Você pode saber mais sobre esses estilos no artigo sobre tipografia: https://www.chiefofdesign.com.br/guia-tipografia-parte-02/
Vamos a alguns exemplos:
p {
font-family: Arial, sans-serif;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}Veja o resultado:
Variante de fonte
Essa propriedade não é tão usada. Ela deixa todas as letras em maiúsculo só que com um tamanho menor se comparado a letra maiúscula normal. Frisando que o valor padrão é “normal” onde não há alteração na fonte. Vamos ao exemplo:
span {
font-variant: small-caps;
}Vamos ver como ficou?
Importante que você veja o código HTML. Note que o último parágrafo foi digitado propositalmente em maiúsculo para que você compare com o trecho em small-caps. A diferença entre eles é gritante.
Altura da linha
Altura da linha é a distância entre duas linhas de texto. Para declarar em CSS usamos a propriedade “line-heigth” que aceita todos os valores de comprimento usados para web.
Para o exemplo a seguir vamos definir um valor, na primeira linha, de 150% o valor do tamanho da fonte estipulado em 16 pixels. Ou seja, isso corresponde a 24 pixels. Usaremos 24 pixels para as demais linhas fazendo que todo o texto tenham alturas de linhas iguais.
p {
font-size: 16px;
line-height: 24px;
}
.cento_e_cinquenta {
line-height: 150%
}
span {
color: #0087cc;
}Veja o resultado:
Confirmando, as alturas das linhas são as mesmas.
Propriedades de textos
Você já conheceu as propriedades para estilizar fontes agora é a vez dos textos. Propriedades de textos são aquelas utilizadas para estilização com base em textos. São destinadas para o alinhamento, decoração, espaçamentos entre outras funções.
Alinhamento de textos
O alinhamento é parte importante de qualquer mancha de texto, seja web ou não. Para a maioria dos casos, o alinhamento à esquerda é tipo mais seguro. Tanto que em CSS este tipo de alinhamento é o padrão. Para declarar alinhamento usamos a propriedade “text-align” e os valores são “left”, “right”, “center” e “justify”.
Vamos ao exemplo:
.esquerda {
text-align: left;
}
.centralizado {
text-align: center;
}
.direita {
text-align: right;
}
.justificado {
text-align: justify;
}Agora o resultado:
Observação: A última linha de um texto com “text-align:justify;” não fica justificado.
Recuo de textos
É possível recuar a primeira linha de um texto dentro de um elemento através de CSS. Para isso usamos uma propriedade chamada “text-indent”. Todas a unidades de comprimento comuns na web trabalham como valores para esta propriedade. Vamos a um exemplo.
p {
text-indent: 100px;
}
span {
color: #0087cc;
}Vemos no resultado que o texto recebeu um recuo de 100 pixels na primeira linha.
Ajuste de tracking
Também é possível através de CSS ajustar o tracking entre as letras de um texto. Para isso usamos uma propriedade chamada “letter-spacing”. Se utilizarmos nesta propriedade um valor de comprimento positiva irá afastar as letras umas das outras, enquanto um valor de comprimento negativo vai aproximá-las.
Vamos ao exemplo:
.afasta {
letter-spacing: .1em;
}
.aproxima {
letter-spacing: -.1em;
}No resultado notamos que o primeiro parágrafo não foi aplicado a propriedade “letter-spacing”. Enquanto no segundo foi aplicado de forma que as letras se afastaram uma das outras e no terceiro as letras se aproximaram a ponto de deixar a leiturabilidade um pouco comprometida.
Espaço entre palavras
Existe uma propriedade que é similar a letter-spacing só que aplicada a espaçamento entre palavras dentro de um elemento. Refiro-me a propriedade “word-spacing”.
Todas a unidades de comprimento comuns na web trabalham como valores para esta propriedade. Vamos ao exemplo:
.space {
word-spacing: 1em;
}Vamos ao resultado:
Podemos notar que no primeiro parágrafo não foi utilizada a propriedade de espaço entre palavras enquanto no segundo é visível o uso onde foi declaramos um valor de 1em de “word-spacing”.
Capitalizar, caixa alta e caixa baixa
Essa é principalmente para quem gosta de fazer capitalização de palavras. Um texto capitalizado é aquele em que todas as primeiras letras, de cada palavra, estão em maiúsculo e o restante minúsculo.
Existe uma propriedade CSS que além de deixar um texto capitalizado permite também deixá-lo com todas as palavras minúsculas ou maiúsculas. Chamamos esta propriedade de “text-transform” que fornece as os valores “uppercase” para caixa alta, “lowercase” para caixa baixa, “capitalize” para capitalização de textos e “none” quando não queremos nenhuma alteração (este é o valor padrão).
Antes de passar para o exemplo é preciso esclarecer um assunto. Apesar de a declaração “text-transform: uppercase;” ser similar a declaração “font-variant: small-caps;” existe um diferença. Small-caps são caracteres em letras maiúsculas com uma altura similar para caracteres minúsculos. Beleza Galucho? Agora vamos ao exemplo:
.caixa_alta {
text-transform: uppercase;
}
.caixa_baixa {
text-transform: lowercase;
}
.capitalizado {
text-transform: capitalize;
}Segue o resultado:
Decoração de texto
Existe uma propriedade CSS que estabelece algumas formas de estilizar o texto com uma linha decorativa chamada “text-decoration”. Ela trabalha com os valores underline (Efeito sublinhado), overline (Efeito superlinhado), line-through (Efeito riscado) e none (Não desenha uma linha decorativa no texto). Vamos ao exemplo:
.sublinhado {
text-decoration: underline;
}
.superlinhado {
text-decoration: overline;
}
.riscado {
text-decoration: line-through;
}
.none {
text-decoration: none;
}Veja o resultado:
Importante observar que o último link não recebe a propriedade text-decoration no código desenvolvido, porém ele está sublinhado pois segue um estilo padrão do navegador.
Sombra em textos
Antigamente para colocarmos um texto com sombra em um site tínhamos que apelar para criação de uma imagem no Photoshop e inseri-la na página via HTML. Hoje em dia existe uma propriedade CSS que coloca a sombra ao longo do texto via código de forma muita mais prática. Falo da propriedade “text-shadow”.
Esta propriedade geralmente leva quatro valores, todos listados um após o outro, da esquerda para a direita. Os três primeiros são valores de comprimentos, e o último valor é uma cor.
Esses valores tem diferentes funções. Vamos a eles:
- O primeiro valor determina o deslocamento horizontal da sombra;
- O segundo valor determina o deslocamento vertical da sombra;
- O terceiro determina o raio de desfoque da sombra;
- E o quarto, como já foi dito, a cor.
Vamos a um exemplo:
.sombra {
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
h2 {
color: #0087cc;
}Agora o resultado:
Veja que na primeira linha foi aplicada a sombra enquanto na segunda não.
Incorporando Web fonts
Você acabou de aprender um pouco sobre alguns princípios básicos de tipografia para web e como aplicá-los às nossas páginas usando HTML e CSS.
Interessante agora é saber como incorporar fontes online em nossos projetos. Mas antes é bom frisar que fora a incorporação de Web fonts você pode optar pelo uso de fontes seguras. Em dispositivos como smartphones, tablets, e computadores algumas fontes são pré-instalados por padrão e são seguras. Podemos usar essas fontes livremente dentro de nossos sites, sabendo que não importa qual dispositivo está navegando pelo nosso site, a fonte irá processar corretamente.
Segue algumas que são consideradas seguras:
- Arial;
- Garamond;
- Georgia;
- Lucida Sans;
- Tahoma;
- Times New Roman;
- Trebuchet;
- Verdana.
Mas o que você quer mesmo é usufruir da gama de variedades de Web fonts que existem no universo online. É importante saber que possuir a capacidade de incorporar qualquer tipo de letra em um site não significa que legalmente você terá a autorização para fazê-lo. A autorização para usar um tipo de letra depende de licenciamento.
E para o bem geral da nação existem projetos que desenvolvem maneiras de licenciar e incluir novas fontes em websites. Tomemos como exemplo o Typekit e o Google Fonts, sendo que este segundo licencia as fontes de graça.
Portanto, Galucho, antes de carregar qualquer tipo de letra, é bom verificar e ter certeza de que tem permissão para fazê-lo. Ok?
Bom agora a pergunta que não quer calar: como carregar uma web font em meu site?
Vamos exemplificar de duas formas. Primeiro carregando a fonte em um servidor e trabalhando com a diretiva @font-face das CSS3. E segundo. incorporando uma fonte direto do Google Fonts.
Carregando uma fonte com a diretiva @fontface
Imaginemos que o responsável pela criação de um site já hospedou o arquivo da fonte desejada no diretório do site projetado. Esta é uma fonte que não está instalada nos sistemas dos usuários. E para que tudo funcione ele irá utilizar a diretiva @font-face para que o navegadores dos usuários sejam informados que a fonte especificada no CSS deve ser procurada de antemão no sistema operacional. Entretanto se ela não for encontrada deverá ser baixada para o dispositivo, seja ele computador, tablet, e smartphone, de um determinado endereço web declarado na folha de estilo.
Vamos supor que o Web Designer pretende carregar a uma fonte serifada chamada “ChunkFiveRegular”. Vamos ver como proceder.
@font-face {
font-family: "ChunkFiveRegular";
src: local("Chunkfive-webfont"),
url("Chunkfive-webfont.woff") format("woff"),
url("Chunkfive-webfont.ttf") format("truetype"),
url("Chunkfive-webfont.svg#webfont") format("svg");
}
p {
font-family: "Chunkfive", Georgia , Times New Roman, serif;
}No endereço que consta no descritivo “src” o navegador do usuário fará o download da fonte “ChunkFiveRegular” e a utilizará para renderizar os parágrafos para página projetada. E se o arquivo da fonte não for encontrado no endereço especificado ele procurará, seguindo a ordem (da esquerda para direita) especificada na declaração, a próxima fonte. Caso não encontre nenhuma delas será utilizada a fonte genérica Serif.
Quantos as formatos utilizados no código acima, o “woff” é suportado pelos navegadores Internet Explorer a partir do 9, Firefox e Chrome. O “truetype” é suportado por Opera e Safari, e “svg” é suportado por Chrome e mobile browsers.
O valor “local” serve pra informar ao navegador que ele deve, antes de baixar a fonte, verificar se ela existe no sistema local do usuário.
O valor formart serve para informar o tipo da fonte.
E onde baixar fontes para que você possa subir para seu servidor?
Confira Creative Fabrica para fontes gratis incríveis!
Você provavelmente já percebeu que o método acima requer que você tenha pelo menos três versões diferentes de cada tipo de letra personalizado que irpa usar em seu projeto. Então o local indicado para você encontrar isso é o site Squirrel Font.
Neste site você encontrará uma enxurrada de kits fontes face para baixar gratuitamente (Verifique sempre a licença).
Outros sites que indico para que você faça suas pesquisa de fontes são o Dafont, o FontShop, o Typekit e o Urbanfonts.
Incorporando uma fonte direto do Google Fonts
Para começar o primeiro passo é ir até o site do Google fonts.
Na página inicial você pode percorrer o diretório atrás de uma fonte ou seguir as categorias na lateral do site. Caso você já tenha uma fonte em mente você pode pesquisa-la no campo de busca no canto superior esquerdo. No nosso exemplo vamos pesquisar a fonte “Open Sans”.
Apos visualizar o resultado você deve selecionar a fonte clicando no simbolo de + e depois clique em “family selected”. Logo em seguida venha na aba “customize” para selecionar o pesos (de light 300 a extra-bold 800) e o estilos (normal e itálico) que você quer que esta fonte forneça.
Você só tem que tomar cuidado com o a performance do site porque quanto mais opções você escolher maior será o tempo de carregamento de suas páginas. O próprio Google fonts te alerta sobre o nível de desempenho enquanto você escolhe as opções. Portanto só escolhe os pesos que você realmente sabe que o site usará.
Feito este processo tudo o que você tem que fazer é clicar na aba “embed” que te fornecerá um código HTML (tag link) para você incorporar entre as tags de abertura e de fechamento de “head”. E depois declarar em seu CSS usando a propriedade “font-family”. Veja a seguir.
Incorporação no site:
<head>
<link href="https://fonts.googleapis.com/css?display=swap&family=Open+Sans:400,400i,700,700i" rel="stylesheet">
</head>Repare que escolhi, na segunda linha do código após o termo “Open+Sans”,os pesos 400, 400 itálico, 700 e 700 itálico. Portanto somente estes tipos funcionarão em meus projetos. De nada adiantá fazer uma declaração de “font-weigth” com um valor diferente de “normal” ou “bold” que o site não renderizá corretamente.
Declaração CSS:
body {
font-family: 'Open Sans', sans-serif;
}Para inspirar
Agora que você já viu as formas de incorporar Web fonts que tal se inspirar em exemplos que utilizaram dos métodos de incorporação de forma bem sucedidade em seus layouts? Vejam esses 5 sites (os títulos de cada site forem obtidos através de Web fonts, sem uso de imagens):
Conclusão
Como podemos perceber neste artigo a tipografia e as linguagens web hoje andam lado a lado e não temos mais a que nos limitarmos a artifícios antigos para prover estilização de tipos em nossas interfaces.
A gama de de diferentes tipos que hoje tem sido ofertado pelos sistemas de incorporação de fontes têm facilitado o trabalho com tipografia na web hoje em dia. E com os princípios apresentados neste artigo você já pode desenvolver suas interfaces pensando nas funções que a tipografia pode exercer em seus projetos.
Sugiro que, caso você ainda não tenha lido, leia a nossa trilogia sobre tipografia [CLIQUE AQUI].
Pratique bastante! Aproveite também compartilhe esse artigo com seus amigos e deixe seu comentário.
Forte Abraço.
Até mais.
Referências:
http://learn.shayhowe.com/html-css/working-with-typography/
