Plugins para personalizar a tipografia de um projeto

Neste post eu fiz uma lista com plugins e ferramentas que podem ajudar a otimizar a tipografia e melhorar a produtividade de projetos web.


Essa lista foi feita com base nos links relacionados a tipografia que juntei no Delicious.

Typetester

Typetester - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Typetester é uma ferramenta para teste de tipografia super completa, você consegue configurar todo um paragrafo de texto na ferramenta e comparar com outros 2 layouts que você também pode configurar. Muito bom para estudo de tipografias e para comparar tipografias.

Link

The Web Font Combinator

Web Font Combinator - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Mais uma ferramenta para teste de tipografia, esta sem opção para comparação, mas mesmo assim bem útil. Possui suporte a diversos tipo de fontes diferentes.

Link

Type Sample

Type Sample - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O Type Sample é uma ferramenta que analisa a fonte presente em qualquer página web e fornece informações como tamanho e o tipo de fonte utilizada. Você pode selecionar um texto em um website e testar aquela tipografia com qualquer outro texto graças a essa ferramenta. Disponível em extensão para o Google Chrome ou em forma de bookmarklet (instruções no website).

Link


Kern.js

kern.js - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Essa ferramenta também é um bookmarklet que ao ser acionado possibilita que você tome controle de qualquer objeto de texto na página, podendo mover a posição e rotacionar o objeto. No fim a ferramenta apresenta o código CSS da alteração que você fez no objeto de texto. Bem útil para posicionar texto e font icons (ícones baseados em fontes).

Link

LetterFX

LetterFX jQuery Plugin - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O LetterFX é um plugin jQuery utilizado para aplicar animações visuais no texto (palavras, letras). O plugin possui uma série de efeitos para exibição do texto muito úteis para projetos ou cases interativos. Também possui um gerador para criar o efeitos a gosto de acordo com as limitações da ferramenta.

Link GitHub

FlowType.js

FlowType.js - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O FlowType é um plugin jQuery que auxila na responsividade da tipografia criando um vinculo do tamanho da fonte com a largura do layout. O interessante da abordagem deste plugin é que o texto vai sempre apresentar um tamanho diferente e ideal, com base no tamanho da tela. A utilização é bem simples e a documentação bem completa abordando várias das funcionalidades do plugin. Contém demo no website para teste exemplificado.

Link GitHub


Words Rotator

Words Rotator jQuery Plugin - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O Words Rotator é um plugin jQuery que cria um efeito super amigável para trocar em tempo real a palavra de uma frase. É muito útil para frases de efeito que expressam diferentes emoções ou para frases que precisam expressar múltiplos significados. O plugin possui várias efeitos para a transição da palavra e a utilização é muito simples.

Link GitHub

Textillate

Textillate.js - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O Textillate.js é um plugin jQuery que combina algumas biblioteca, como animate.css e lettering.js, para gerar animações em qualquer texto presente em uma página web. A utilização é bem simples e a documentação bem objetiva, possui pagina com demo bem interessante dos efeitos disponíveis.

Link GitHub

FitText

FitText - jQuery plugin for inflating web type - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

O FitText é um plugin para tornar a tamanho da fonte flexível. Com ele você consegue configurar o texto no tamanho ideal em diferentes resoluções de tela, e alterar as configurações com facilidade se houver necessidade. Muito útil para websites responsivos.

Link GitHub


Lettering.js

LETTERING.JS A jQuery plugin for radical web typography - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Este plugin é responsável pelo surgimento de diversos (alguns da lista) plugins jquery para trabalhar tipografia, servindo de base. Com ele você consegue separar letras, palavras ou textos em objetos e definir funções especificas para cada um, assim como um estilo. Bem legal para quem deseja trabalhar profundamente a tipografia de algum texto para web. Essa é uma daquelas bibliotecas que você mesmo não utilizando sempre vai lembrar que existe para quebrar algum galho.

Link GitHub

funnyText.js

funnyText.js - Create funny and crazy moving texts in a simple way - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Esse plugin cria animações incomuns em um texto, muito indicado para animar textos com destaque. Documentação curta e bem direta.

Link GitHub

jQuery Airport

jQuery Airport - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

A intenção deste plugin, jQuery Airport, é simular o funcionamento de letreiros de aeroporto ao trocarem a informação, girando as letras para formar novas frases. O plugin é bem simples e leve. Apresenta várias funcionalidades bacanas como alteração do estilo da palavra conforme mudança de informação. Bem legal para qualquer tipo de projeto que deseja dar um toque a mais na tipografia (utilizar com moderação).

Link GitHub


SlabText

SlabText - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Plugin jQuery para produzir headlines (h1, h2, h3…) grandes, bold e responsivos. O plugin separa os headlines em linhas tentando preencher cada uma de acordo com a medida horizontal do layout ou container. A pagina do plugin ilustra um exemplo perfeito de sua utilização.

Link

Widetext

Widetext - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Plugin para equiparar a medida do texto com o width do layout ou container. Diferente do SlabText, este pode ser utilizado em qualquer elemento de texto. Utilização e documentação super simples.

Link

Arctext.js

Arctext.js - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Esse plugin utiliza CSS3 e jQuery para criar textos curvados, ou que seguem uma curva. Você pode configurar tanto palavras quantos frases (textos grandes não aconselhados) para seguir uma curvatura, normalmente para acompanhar o design do layout. Esse plugin é disponibilizado pela Tympanus – Codrops.

Link


Study Case – 80s Typography

Esse item não é uma ferramenta, é um experimento feito com CSS para reproduzir tipografias dos anos 80. Interessante a modificação efetuada no texto apenas com CSS, ótimo caso de estudo para otimizar técnicas CSS. Disponível no CodePen, você pode copiar e editar sem problemas.

See the Pen 80s Typography by David Parker (@boldfacedesign) on CodePen.

E para finalizar:

Glyphr Studio

Glyphr Studio - Web Social Dev - Ferramentas para trabalhar a tipografia de um projeto

Ferramenta grátis em HTML5 para quem é amante de tipografia e gosta de elaborar suas próprias fontes.

É isso, dúvidas estou a disposição nos comentários.