15 Ferramentas Úteis de Tipografia Web, Bibliotecas e Frameworks

Lidar com tipografia na web tem sido bem peculiar. Cada navegador tem seu próprio algoritmo para renderizar fontes o que poderia levar a discrepâncias inesperadas. Existem apenas algumas propriedades CSS que você pode usar para ter algum controle sobre fontes, como o kerning de fontes, suavização de fontes, na criação de DropCaps, etc. Além disso, temos que lidar com muitos problemas de layout quando se trata de fontes..

A boa notícia é que existem recursos que você pode usar para assumir o volante quando se trata de tipografia do site. Aqui estão 15 ferramentas web, bibliotecas e frameworks você pode usar para esse fim.

Mais sobre Hongkiat:

9 Plugins WordPress Para Fazer Mais Com Suas Fontes
20 melhores plugins de tipografia WordPress para melhorar a legibilidade
Ícones melhores e mais nítidas da interface do usuário com fontes da Web

TypeRendering

Em poucas palavras, TypeRendering funciona de forma semelhante ao Modernizr, exceto que apenas identifica o mecanismo do navegador para renderização de fonte. Esta biblioteca adiciona classes customizadas baseadas em suas descobertas que podem ser usadas para aplicar regras de estilo específicas para renderização de tipo.

KerningJS

O Kerning não é personalizável para uso na Web ainda - fonte-kerning o suporte ainda é fraco no momento - mas uma nova propriedade padrão está vindo em nossa direção. KerningJS é uma biblioteca Javascript que oferece algumas novas propriedades para melhor controle de kerning, por exemplo -carta-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Tenha em mente que o exemplo acima é não-padrão e aplicável somente com o KerningJS.

DropcapJS

Embora seja possível criar um dropcap com os padrões CSS atuais, o resultado ainda não é perfeito. Às vezes é absolutamente indesejável. O DropcapJS, desenvolvido pela Adobe Web Platform, recebe a missão de permitir que o web designer aplique um dropcap perfeito facilmente.

LiningJS

LiningJS é uma biblioteca JavaScript que adiciona o linha classe em cada linha do seu parágrafo. Isso permite que você estilize a linha separadamente. Simula a ideia de :: n-linha (), :: n-última linha () e ::última linha pseudo-classes que ainda não estão presentes no CSS. Aqui está um exemplo de como estilizamos a primeira linha de um parágrafo com o LiningJS:

 p. linha [primeiro] font-weight: 600; text-transform: maiúscula;

Além disso, o LiningJS também suporta fluxo de parágrafo chinês.

UnderlineJS

UnderlineJS é uma biblioteca JavaScript que torna o texto sublinhado melhor. Confira a demonstração para ver o que quero dizer, certifique-se de passar o mouse sobre as linhas. Compare a demonstração com a saída sublinhada do CSS atual decoração de texto padrão e você provavelmente seria um fã de underlineJS também.

FlowType

Este plug-in ajustará dinamicamente o tamanho da fonte com base em uma largura específica do wrapper. FlowType ajuda você a aplicar um número ideal de caracteres por linha em qualquer largura de tela. A biblioteca vem com opções onde é possível definir a largura da tela min / max, o tamanho da fonte min / max e a taxa da fonte.

HatchShow

HatchShow expande o tamanho de uma fonte para preencher toda a largura de seu contêiner. O plugin trabalha fora da caixa com o algoritmo; Em poucas palavras, ele mede a largura do contêiner e o comprimento do caractere de fonte e acrescenta o tamanho adequado da fonte.

GridLover

GridLover é uma ótima ferramenta para gerar estilos básicos para arranjo de tipografia (tamanho, altura de linha e margem) com uma interface fácil de controle deslizante. Ele gera os estilos em SCSS, LESS e Stylus para que você possa incluí-los imediatamente em seu projeto, independentemente de qual pré-processador de CSS você usa.

TypeScale

TypeScale é uma ferramenta on-line que ajudará você a determinar facilmente o tamanho correto da fonte do seu site. A ferramenta fornece uma GUI simples e intuitiva para inserir o tamanho da fonte base, a escala e a família de fontes que você deseja usar. Os resultados serão visualizados por você para que você possa brincar com a escala, para obter o valor correto. Basta pegar o CSS quando terminar.

Escala modular

Escala modular é uma ferramenta para gerar dimensionamento de fonte ideal para texto de corpo e título. Ele produz no Sass, que deve ser usado em conjunto com sua biblioteca Sass. Como alternativa, você pode usar JavaScript .

Font-To-Width

Font-To-Width (FTW) é uma biblioteca Javascript que faz uma fonte se encaixar em seu contêiner de largura. Ele determinará o tamanho da fonte junto com o espaçamento de palavras necessário para a fonte. Se você quiser fazer uma linda manchete, esta é a biblioteca que você pode querer experimentar.

FFFFallback

FFFFallback, uma ferramenta útil que lhe permite encontrar a melhor pilha de fontes que irá degradar graciosamente. A ferramenta vem em forma de um bookmarklet, que analisará a família de fontes na sua página e sugerirá um conjunto de fontes para usar como fallback.

Par de fontes

O Google Font é uma das bibliotecas de fontes da Web mais populares usadas por milhões e hospeda mais de 500 famílias de fontes. Par de fontes é uma coleção de fontes do Google emparelhadas, onde você pode encontrar várias combinações entre famílias de fontes e tipos de rostos facilmente. Par de fontes torna a escolha de pares de fontes um pouco menos esmagadora.

TypeSettings

TypeSettings é uma coleção de conjuntos de regras de CSS para definir dimensionamento adequado de fontes, ritmo vertical e taxa de resposta da tipografia. TypeSettings vem em Sass e Stylus, que permite flexibilidade para atender às necessidades do seu projeto, ajustando as variáveis.

Placa de identificação

Placa de identificação é provavelmente um dos kits iniciais mais completos para configurar a tipografia. Typeplate vem com um punhado de estilos tipográficos básicos que endereçam escala, cores, capital pequeno, dropcap, recuo, hifenização, blockquote, bloco de código e muito mais coisas.

Agora Leia: Mostra de Web Designs com Tipografia Bonita