15 ferramentas de tipografia on-line que todos os designers devem conhecer
A tipografia é a base de qualquer design, porque a leitura é uma das coisas mais básicas que fazemos na web. A tipografia que você escolhe tem um impacto em vários aspectos de um site, incluindo legibilidade, humor e a experiência geral do usuário. É essencial que designers e desenvolvedores Conhecer os princípios básicos da tipografia para criar projetos agradáveis e legíveis.
Temos falado sobre ferramentas de emparelhamento de fontes antes, e hoje vamos compartilhar com você ferramentas do tipo que você pode obter uma melhor experiência de leitura nos sites que você cria e / ou projeta.
Aqui estão os plugins, ferramentas on-line e scripts que ajudarão você a criar manchetes impressionantes e texto legível limpo.
Placa de identificação
Ele não fará escolhas de design para você, mas definirá a marcação correta com estilo para modelos tipográficos comuns. Ele também pode lhe dar dicas sobre como estilizar a cópia de texto corretamente.
Confira: Demo | Documentação
Gutenberg
O Gutenberg é um kit inicial de tipografia flexível e fácil de usar para desenvolvedores e designers. Isso ajudará você a definir o tamanho do tipo de base, a altura da linha e a largura máxima. O Gutenberg é um projeto de código aberto, portanto sinta-se à vontade para contribuir, adaptar e modificar.
Confira: Demo | Documentação
Lettering.js
Lettering.js é um plugin jQuery que lhe dá o controle sobre o tipo de kerning. Ele permite que você obtenha o design editorial com facilidade e gerencie o código. O site apresenta exemplos surpreendentes de tipografia feita com este plugin para inspiração.
Confira: Demo | Documentação
Typebase.css
Typebase.css é uma folha de estilos de tipografia personalizável. Ele contém versões saas e menos e é facilmente modificado em projetos web modernos.
Confira: Demo | Documentação
FitText
FitText é um plugin que fará com que o seu website seja flexível. Isso ajudará você a obter títulos escaláveis para várias resoluções de tela; Em outras palavras, faça sua tipografia responder. É feito para exibir apenas texto enorme.
Confira: Demo | Documentação
Kerning.js
O Kerning.js ajuda você a transformar, dimensionar e modificar automaticamente sua tipografia com CSS. É fácil começar com o Kerning.js.
Confira: Demo | Documentação
Typesettings.css
Typesettings.css é o seu playground para criar projetos web minimalistas ou blogs. Todos os estilos de tipografia usados aqui são inspirados em conceitos básicos de design gráfico.
Confira: Demo | Documentação
Mochila
Com o Rucksack, você pode produzir tipografia fluida incrível graças a uma nova propriedade responsiva no tamanho da fonte. Criar tipografia responsiva é excepcionalmente fácil.
Confira: Demo | Documentação
FlowType.JS
A tipografia mais legível contém entre 45 e 75 caracteres por linha, mas encontrar esse equilíbrio é uma tarefa desafiadora para os desenvolvedores. FlowType.JS altera o tamanho da fonte e subseqüentemente a altura da linha com base na largura de um elemento específico.
Confira: Demo | Documentação
Blast.js
O Blast.js ajudará você a separar textos para facilitar a manipulação da tipografia. Ele contém 4 delimitadores embutidos: caractere, palavra, frase e elemento. Também pode corresponder expressões e frases personalizadas.
Confira: Demo | Documentação
slabText
slabText é um script simples que divide cabeçalhos em linhas para preencher perfeitamente o espaço horizontal disponível. O script calcula um número ideal de caracteres para definir em cada linha dividindo a largura disponível por tamanho de fonte de pixel.
Confira: Demo | Documentação
Tipo Escala
Com o Type Scale, você pode visualizar e escolher a escala correta para o seu projeto. Não há regras - basta brincar com tamanho de fonte, escala e fontes da web diferentes.
Confira: Demo | Documentação
Tipográfico
Tipográfico ajuda você a tornar a tipografia responsiva. Tudo que você precisa fazer é selecionar algumas fontes, definir algumas configurações e obter uma boa tipografia responsiva.
Confira: Demo | Documentação
Typi
Typi é uma mistura de saas que você pode usar para criar tipografia responsiva com facilidade. Ele cria tamanho de fonte e alturas de linha para HTML e outros elementos. Além disso, o Typi possui uma função de ritmo vertical para calcular as alturas das linhas.
Confira: Documentação
Lining.js
Com o plugin Lining.js, você terá controle total sobre a tipografia da web. É compatível com os navegadores mais populares, como o Safari, o Google Chrome, o Opera e o Mozilla Firefox.
Confira: Demo | Documentação
Bônus: 2 mais ferramentas!
Estado do tipo de Web
O State of the Web Type é um site que oferece dados atualizados sobre o suporte para tipos e recursos na Web. Você pode usar pesquisas ou categorias, como kerning, espaçamento de capital, carregamento de fontes CSS e muito mais, para encontrar exatamente o que precisa.
Tipógrafo
O Typograph é um incrível plugin de web e sketch que permite colocar espaços sem quebra após palavras de uma letra, conectar o número e a unidade. Também remove espaços duplos, entradas, pontos e outros erros de digitação, para que você possa obter uma tipografia bonita e limpa que seja fácil de ler.
Confira: Documentação
