Carregando...
Poster Salon de 1896 (1896) - Émile BerchmansPoster Salon de 1896 (1896) - Émile Berchmans

Tipografia web – o desafio das telas

Pouca gente imagina a dificuldade que foi trabalhar com tipografia nos primórdios da internet. Era preciso gerar imagens e montá-las em tabelas para criar um layout mais elaborado ou então utilizar as fontes de sistema (6 combinações comuns), o que limitava em muito a criatividade dos diretores de arte.

Com o tempo surgiram as fontes web, através do CSS (Cascading Style Sheets, em breve falaremos mais sobre!) tornou-se possível substituir as fontes padrão do computador por fontes baixadas da internet e escolhidas pelo designer. Isso trouxe um mundo de possibilidades que ficou ainda maior com a multiplicidade de tamanhos de telas (desktops, tablets e smartphones). Cada dia um novo desafio.

No post de hoje apresentamos diversas ferramentas para transformar suas fontes em versões online, calcular tamanhos, técnicas de programação para aplicar tamanhos em seus projetos de sites, ferramenta para identificar fontes utilizadas em imagens e um gerador de texto para layout!

Vamos lá.

—————————————————————————————————————————

Crie suas próprias fontes online

Quem trabalha com layout e conhece um pouco de CSS já viu o código @font-face. É assim que o site sabe onde está o arquivo de fonte web para substituir o texto do próprio site por uma fonte escolhida pelo designer. Muitos sites atualmente utilizam essa técnica para criar mais impacto e facilidade de leitura.

Quando você escolher a fonte certa para seu projeto utilize o site Font Squirrel para transformá-la em uma fonte web (hoje os melhores formatos são woff e woff2). Basta subir suas fontes no site e ele gera o pacote com suas versões web e os códigos CSS  necessários para você incluir no seu projeto.
Atenção, o site não converte fontes proprietárias!

Conheça Font Squirrel (site em inglês)

—————————————————————————————————————————

Tamanho e atenção

Uma das grandes tendências de design de sites atualmente é o uso de grandes fontes (tem até uma linha brutalista em voga). Combinações de cores e tamanhos podem criar muita movimentação e interesse, e não só nos sites ou computadores.

O tamanho das letras e números e a distância dos objetos pode mudar e muito a percepção da mensagem. Para harmonizar os tamanhos existe uma ferramenta online que permite calcular tamanho e percepção.

Visite o site Size Calculator (em inglês)

—————————————————————————————————————————

Precisão na exibição

Pode-se dizer que CSS é uma linguagem de programaçao para designers. Nos arquivos .css é possível declarar tamanhos, cores, peso e apresentação das fontes. Mas e quando a tela muda de usuário para usuário?  Hoje em dia com smartphones, tablets e computadores existe uma variedade de tamanhos de tela e é preciso calcular o espaço disponível para poder exibir as fontes corretamente.

Esse link não é exatamente um site, mas sim uma técnica CSS demonstrada que apresenta como é possível calcular o tamanho exato da fonte para cada tela permitindo uma responsividade fluída.

Se você tiver interesse acesse Responsivy Typography (em inglês)

—————————————————————————————————————————

Que fonte usaram nessa imagem?

Essa pergunta agora tem uma resposta mais ou menos fácil.

O site Font Finder permite identificar muitas fontes utilizadas em imagens, mas infelizmente não é perfeito. Alguma dificuldade com caracteres especiais e com fontes muito rebuscadas. Mas é uma ferramenta útil para aqueles que não são muito conhecedores de fontes (eu me coloco nesse caso).

O site também tem muito s anúncios o que prejudica seu uso.

Acesse Font Finder (em inglês)

—————————————————————————————————————————

Lorem ipsum para todos

Esse site não é exatamente sobre tipografia, mas ajuda na composição ao gerar textos legíveis para layout. Aqui você escolher quantos caracteres, palavras, frases e parágrafos de texto necessários para compor seu lindo layout!

Acesse e marque nos seus favoritos Lipsum.pro (em inglês)

—————————————————————————————————————————

Sexta edição – 13/07/2020

Toda a semana um post novo com mais ferramentas, sites e dicas de produtividade na internet.
Vale dizer que nós não temos nenhum acordo de disribuição ou propaganda com nenhumas das ferramentas apresentadas, caso aconteça de incluírmos propagandas ou anúncios, estes serão devidamente identificados.

Se você tem alguma sugestão, envie um e-mail para fale@toborino.com ou comente em nossa página no Twitter (https://twitter.com/toborino).

Créditos ilustração: Poster Salon de 1896 (1896)Émile Berchmans

Imagens do site Artvee.

Conheça nossas dicas de ferramentas e aplicativos

Assine a Newsletter Toborino

A cada edição nossa Newsletter traz as últimas novidades da Toborino, dicas de ferramentas de produtividade, design e programação web e vídeo.
Experimente!

Você pode alterar suas preferências ou mesmo se descadastrar a qualquer momento.

Assine a Newsletter Toborino

A cada edição nossa Newsletter traz as últimas novidades da Toborino, dicas de ferramentas de produtividade, design e programação web e vídeo.
Experimente!

Você pode alterar suas preferências ou mesmo se descadastrar a qualquer momento.