Noções básicas sobre tipografia 10 ferramentas e recursos úteis

No meu último artigo sobre Entendendo a Tipografia, escrevi sobre o que acontece no design da tipografia e como manipulá-la para melhorar o layout do seu site e melhorar a experiência do usuário. Neste artigo, estou listando 10 das minhas ferramentas favoritas para tipografia Na internet.

Estes podem ajudar com a construção de grades HTML e áreas de conteúdo, criando estilos CSS, gerando nomes de fontes e um monte de outras coisas legais. Confira alguns dos links abaixo e não deixe de nos contar suas ideias na área de pós-discussão.

Leitura recomendada: Entendendo a tipografia: escrevendo para a Web

Matriz de Fontes

Este guia on-line foi postado pelo blog de design 24ways. Ele possui uma tabela de matriz de todas as fontes padrão da web que você encontrará por padrão de vários fornecedores de software. Títulos populares incluem programas Windows, Mac OS X, Microsoft Office e Adobe Creative Suite.

Verificação de Contraste de Cor

O contraste de cores costuma ser um problema quando você se arrisca fora do modelo preto-e-branco padrão. Quando você encontra uma partida, parece a perfeição do design. No entanto, uma escolha ruim de combinação de cores parece muito ruim e influenciará negativamente o design geral. Esta pequena ferramenta da Web pode ajudá-lo a escolher um conjunto de cores para combinar entre si para qualquer layout de estilo.

HTML-Ipsum

Você está precisando de uma ferramenta Lorem Ipsum que pode fazer mais do que apenas saída de texto? Este gerador HTML on-line criará blocos de código para os elementos de página mais comuns. Alguns exemplos incluem listas não ordenadas, listas de definição, formulários da Web, tabelas e muitas outras soluções.

Typechart

O Typechart é uma das minhas ferramentas favoritas como desenvolvedor de CSS. Frequentemente, estou procurando combinar uma fonte específica no meu sistema com um projeto da web, mas simplesmente não tenho tempo para percorrer toda a minha coleção. Esta incrível ferramenta permite que você vasculhe escolhas populares de famílias de fontes e até baixe o código CSS adequado!

PX-to-EM.com

A menos que você redefina o tamanho do texto do navegador padrão, você provavelmente terá problemas correspondentes ao ems com pixels. Este aplicativo no navegador fornece uma tabela de conversão e uma interface de usuário para px to em. É uma ferramenta muito simples, com certeza, mas oferece um guia prático com funcionalidades realmente simples - e você não pode bater o preço livre.

Conjunto de tipos de CSS

Eu não recomendo ficar com CSS Type Set por muito tempo, pois é uma ferramenta realmente novata. Ele permite que você gere código CSS com base em propriedades de fontes específicas selecionadas. Embora muito útil no início, com o tempo, ele se torna uma muleta para se apoiar. E você não será capaz de dominar as propriedades CSS sozinho. Mas se você precisa economizar tempo em um projeto, essa ferramenta não pode ser negligenciada.

lançando típico

Aqui está um exemplo realmente único de uma biblioteca de visualização de fonte. Virar típico inclui um punhado de fontes que são nativas do seu sistema operacional. Ele verifica automaticamente o diretório de fontes para obter as soluções mais seguras da web. Você pode compará-los lado a lado e escolher facilmente entre suas opções favoritas. Este é outro grande economizador de tempo que você marcar e não pensar até o último minuto.

Grade tipográfica

Há muita conversa sobre o design em torno da grade em HTML e CSS. Você provavelmente entende o conceito de como as redes funcionam e mede um site em pixels não é diferente. Esse tutorial de grade do CSS-Tricks é mais um esforço direcionado para introduzir os fundamentos da tipografia para a era digital. É um tópico muito mais avançado no reino do web design. Mas se você tiver alguma paciência, recomendo analisar os detalhes para ver como essas propriedades da grade podem realmente afetar o layout da página..

WhatTheFont!

Todos nós encontramos um logotipo ou uma imagem com uma fonte não identificável muito legal. WhatTheFont fez rondas na Internet por alguns anos e ainda é um dos meus favoritos. Você escolhe uma imagem para fazer upload e seu script analisará o texto dentro da imagem para corresponder a tipos de letra semelhantes. O aplicativo vai até mesmo ligá-lo a produtos externos, onde você pode comprar cada fonte a sua conveniência.

Calculadora de Linha de Base / Altura da Linha

Finalmente, uma ferramenta realmente poderosa para gerar propriedades de altura e ritmo de linha. Basta inserir valores para o tamanho da fonte base e a altura da linha ou incluir seu próprio código CSS personalizado ao lado. O aplicativo gerará visualizações em alguns estilos diferentes para que você possa ter uma ideia de como essas propriedades ficariam em seu próprio website.