15. 10. 2016

Tipografia na web

A tipografia tem um grande destaque e importância em peças de design gráfico e também na web, mas existem algumas diferenças entre a criação, escolha e desenvolvimento de projetos gráficos e digitais.

 

No impresso e no digital

A resolução do meio impresso é diferente do digital. Por isso, desde o início do projeto já decidimos em qual meio iremos produzir aquela peça: se usaremos tinta (CMYK) para impresso ou luz (RGB) para digital.

Essa escolha influencia todo o projeto e na tipografia que é um dos elementos mais importantes da criação.

 

Fluidez

Diferente do impresso, na web, você não consegue controlar a quantidade de palavras por linhas ou utilizar hifenização, já que a criação de produtos web deve ser responsivo, ou seja, ajustável a qualquer dispositivo (desktop, tablet e mobile). Sendo assim, as palavras vão se encaixando conforme o espaço que elas ocupam vai se comprimindo.

 

Propriedades CSS para texto

Existem algumas propriedade no CSS para dar o estilo do texto.  Abaixo, destaquei algumas que mais utilizo.

font-family Especifica a família da fonte do texto
font-size Especifica o tamanho da fonte do texto
font-weight Especifica o peso da fonte do texto
|Essa propriedade é polêmica pois ela força bold, versão thin da fonte, etc. O ideal é fornecer a fonte nesses formatos para o projeto.|
-webkit-font-smoothing Aumenta a suavização do texto
|Essa propriedade não é padrão e não irá se comportar da mesma forma em todos os navegadores.|
Ver mais sobre font-smooth
text-align Especifica o alinhamento do texto: left (alinhado a esquerda), right (alinhado a direita), center (centraliza o texto), justify (deixa o texto justificado), etc.
Ler mais sobre CSS text-align Property
text-decoration Especifica estilos para o texto como sublinhado ou texto tachado.
text-transform Especifica o formato do texto como todo em caixa alta.
line-height Especifica o espaço entre as linhas
color Espacifica a cor do texto

 

Incluir fontes em projetos web

Você tem duas opções para incluir a fonte que você escolheu para o seu projeto web. As duas opções permitem que você utilize fontes que não estão instaladas no computador/dispositivo do usuário.

 

Incorporar fontes Web

A opção mais simples é carregar fontes disponíveis pelo Google Fonts

blog-post-img-atom-tipo-web-1

Essa é a tela inicial do GoogleFonts. Nesse exemplo eu escolhi a Open Sans.

Pelas imagens você pode acompanhar o passo a passo da escolha da fonte no site da Google Fonts. No caso, escolhi a super popular Open Sans como exemplo.

blog-post-img-atom-tipo-web-2

Essa é a tela que você será direcionado ao escolher sua fonte. Clique em Select this Font para copiar o código.

blog-post-img-atom-tipo-web-3-1

Irá aparecer no canto inferior direito da tela essa barra escura indicando que você selecionou 1 font family.  Clique na barra escura para visualizar o código da font family que você selecionou.

Essa tela é bem auto-explicativo. Você pode colar o código no header ou @import no seu código SASS. É preciso ainda especificar no CSS (ou SASS, se você estiver utilizando) a font-family.

Quanto mais fontes você adicionar na sua página web, mas pesado fica para carregar sua página, então é bom pesquisar sobre isso e utilizar o mínimo possível. Navegue na GoogleFonts e lá tem diversas dicas, categorias de pesquisas de fontes, qual outra fonte o Google indica para utilizar em parceria com a que você escolheu, etc.

Algumas pessoas não preferem essa opção pois pode causar um delay de alguns segundos (ou milésimos de segundos) até que a fonte seja substituída por um padrão que o browser carregou inicialmente. Dentro desse delay, pode causar uma quebra do layout… e milésimos de segundos de desconforto no usuário.

 

Incorporar fontes com @font-face

A outra opção é utilizando o @font-face. Você precisará incluir a fonte no servidor web do projeto que será exibida para o usuário.

Para isso, é necessário incluir diferentes formatos de fontes para que ocorra a sua exibição na web corretamente.

TrueType Fonts (TTF) TrueType é o formato de fonte mais comum para Mac OS e Microsoft Windows.
OpenType Fonts (OTF) OpenType é o formato de fonte de computador escalável. É uma marca registrada da Microsoft e é utilizada atualmente na maioria das plataformas.
The Web Open Font Format (WOFF) WOFF é o formato de fonte utilizado em páginas web. Hoje é recomendada pela W3C.
The Web Open Font Format (WOFF 2.0) Fornece melhor compressão do que WOFF 1.0
SVG Fonts/Shapes Permite criação de fontes através de um documento SVG.
Embedded OpenType Fonts (EOT) Fontes EOT são formas compactas de OpenType criado pela Microsoft para ser utilizada como fontes incorporadas em páginas web.

Ver mais sobre CSS3 Web fonts

 

Como incorporar minha fonte em todos esses formatos?

O Font Squirrel além de ser um excelente site para pesquisar fontes, possui uma aba chamada “Generator”.

Basta fazer o upload da fonte do projeto e marcar a opção de agreement , assim, você afirma que a fonte que você está carregando é legalmente elegível para inclusão na web. Ou seja, você não pode fazer upload de fonte pirata. 🙂

Depois basta incluir o código @font-face no CSS semelhante ao código abaixo:

@font-face {
    font-family: 'OpenSansLight';
    src : url(../fonts/opensans/light/opensans-light-webfont.eot);
    src : url(../fonts/opensans/light/opensans-light-webfont.eot?#iefix) format('embedded-opentype'),
    url(../fonts/opensans/light/opensans-light-webfont.woff) format('woff'),
    url(../fonts/opensans/light/opensans-light-webfont.ttf) format('truetype'),
    url(../fonts/opensans/light/opensans-light-webfont.svg#open_sanslight) format('svg');
    font-weight: normal;
    font-style : normal;
}

Essas são algumas dicas sobre como adicionar fontes em projetos web. Existem outras dicas que quero compartilhar com vocês, mas será assunto para outro post. 😀

 

Fontes: W3Schools | Mozilla Developer Network


Nati Soares

Designer que ama criar projetos para web e ilustrar. Curiosa por design, arte e tecnologia. Ama viajar, cozinhar e assistir seriados.

Veja também

02.10.2017

Ilustração em vetor #3

Olá! Voltei com outro vídeo de speed drawing em vetor no Adobe Illustrator. 🙂 Tento incluir sempre que […]

29.08.2017

Ilustração em vetor #2

Desde quando eu publiquei meu primeiro vídeo no YouTube penso em continuar com essa série de speed drawing […]

20.08.2017

Minha experiência no FIRE 2017

Depois da grande emoção de conhecer pessoalmente meu time remoto, vamos falar sobre como foi o FIRE 2017! […]

Voltar para blog
© 2015 - 2017 natalia soares | feito com amor love por nati soares