Design

Plugins em jQuery para texto e tipografia web

Controle kerning, estilo, tamanho automático e muitos outros ajustes via jQuery.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Pra você que trabalha ou estuda design web e não gosta de ficar limitado às possibilidades de CSS, confira essa seleção de scripts e soluções em jQuery para texto. As opções vão desde utilidades como controle de kernel e ajuste de largura em dispositivos diversos, até as mais “incomuns”, como o “falso isométrico” e o Shuffle, que embaralha letras.

Todas são gratuitas. Para saber como usá-las, por favor consulte as páginas de origem clicando nos respectivos botões de Download.

Se tiver alguma ótima sugestão de plugin jQuery para texto, deixe nos comentários (só não vale spam de produto pago).

FitText

jquery_fittext

O FitText torna os tamanho de fontes flexíveis. Plugin ideal para designs responsivos em que o texto precisa ser redimensionado junto com o elemento-pai, sempre cabendo perfeitamente.

Hatchshow

jquery_hatchshow

O Hatchshow permite que você crie colunas de texto com uma medida uniforme, de modo que sempre preencham corretamente os espaços. Excelente para criar blocos de texto em efeitos visuais muito interessantes.

SlabText

jquery_slabtext

Esse script, de forma simplificada, divide um texto de chamada em linhas antes de redimensionar cada uma para que preencha corretamente o espaço horizontal. O número ideal de caracteres em cada linha é calculada pela divisão da largura disponível pelo tamanho da fonte. Complicado? Veja os exemplos que fica fácil entender a utilidade.

Responsive Measure

jquery_reponsive_measure

O plugin faz um cálculo do tamanho aproximado da largura ideal para sua coluna de texto baseado em algumas variáveis da sua fonte como tamanho e força. A ideia é mantê-lo o mais legível possível em todo tipo de dispositivo.

BigText

jquery_bigtext

O plugin calcula o tamanho da fonte e o espaçamento necessário para ajustar uma linha de texto à largura disponível. Você pode fazer o teste aqui.

Kerning.js

jquery_kerning.js

Como sugere o nome, esse plugin vai controlar o kerning, ou o ajuste do espaçamento entre caracteres ideal no texto de acordo com a fonte. Também permite controlar cor, transformações e vários outros efeitos.

Bacon!

jquery_bacon

Sei lá porque chama Bacon, mas o plugin permite criar blocos de texto que se ajustam a caixas com curvas. O ajuste é feito através de coordenadas, ou seja, não é tão simples, mas funciona e pode ser útil.

jQSlickWrap

jquery_jQSlickWrap

JQSlickWrap é parecido: ajuda a fazer o texto contornar qualquer tipo de curva, sendo necessários alguns ajustes no script, e o resto sendo feito de forma automática.

Auto line-height

jquery_auto_line-height

Script simples e prático, que ajusta a altura das linhas (line-height) de forma proporcional à largura do elemento-pai (como uma div) e o tamanho da fonte.

Lettering.js

jquery_lettering

Com o Lettering, você consegue usar CSS em cada letra do texto de forma individual através de spans com classes inseridas pelo script.

jqIsoText

jquery_jqiso_text

O jqIsoText cria um falso efeito “isométrico” no texto, com a ilusão de profundidade entre a parte central, com fonte maior, e início e fim menores.

Arctext.js

jquery_arctext.js

Esse plugin permite criar vários tipos de texto em curva. Ajuste a direção, defina a rotação dos caracteres em relação ao caminho, etc.

Textualizer

jquery_textualizer

Muito bacana, esse plugin permite que um texto se “transforme” em outro através de animações como letras caindo, desaparecendo, sendo trocadas de posição, etc.

Shuffle

jquery_shuffle

Mais um com nome óbvio, e efeito muito bacana. Escolha o texto e ele aparece a partir de uma sequência de caracteres. Interessante para chamadas, slideshows, etc.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin