30 dos melhores recursos de tipografia da web on-line
Parece haver dois campos entre os web designers: aqueles que adotam a tipografia na web , experimentam e tentam coisas novas em praticamente todos os seus designs; e aqueles que a evitam gostam da praga, optando por usar pilhas de fontes padrão e seguras para a Web com pouca variação.
Também parece que muitos dos designers que se enquadram no segundo grupo gostariam que fossem mais parecidos com o primeiro.
Os recursos abaixo podem ajudá-lo a melhorar sua tipografia da web, independentemente do local em que você se enquadre.
Existem ferramentas para criar tipografia única, referências e artigos que podem ensinar princípios tipográficos, e muita inspiração e novidades para mantê-lo atualizado sobre o estado da tipografia na web.
Ferramentas de Tipografia
Typetester
O Typetester permite comparar até três fontes, lado a lado, com qualquer texto de amostra desejado. Você pode especificar o tamanho da fonte da linha de base, tipo de letra, tamanho, entrelinha, rastreamento, alinhamento, espaçamento entre palavras, decoração, cor e cor de fundo para obter uma imagem precisa de como suas fontes serão no site. Então, quando você tem tudo do jeito que você quer, você pode pegar o CSS.
HTML Ipsum
HTML-Ipsum é um gerador de lorem ipsum especificamente para web design. Em vez de dar apenas pedaços de texto, o HTML-Ipsum pode fornecer texto pré-formatado, como parágrafos, listas ordenadas, tabelas vazias, formulários e listas de navegação. Texto pré-formatado como este é uma ótima maneira de economizar tempo ao criar modelos de sites e desenhos iniciais.
Typechart
O Typechart permite que você navegue por fontes pré-formatadas e seguras para a Web e visualize-as como elas aparecerão em um PC Windows e em um Mac. Você pode classificar as fontes incluídas com base no tamanho, tipo e ênfase.
WP-Typography
O WP-Typography é um plugin para WordPress que ajuda a tornar sua tipografia WP padrão mais atraente. Suporta hifenização, controle de espaçamento, substituição inteligente de caracteres (incluindo marcas de cotação, traços, elipses e símbolos matemáticos) e ganchos de CSS para estilizar itens específicos (incluindo e comerciais, acrônimos e números).
Conjunto de tipos de CSS
CSS Type Set permite que você estilize um bloco de texto e depois copie o CSS. É um simples gerador de CSS que é ótimo para estilizar uma fonte por vez. Ele permite controlar o tipo de letra, tamanho, espaçamento, entrelinha, decoração e cor.
Virando Típico
Invertendo Típica mostra a amostra de texto em uma variedade de fontes que você instalou em seu computador. É uma ótima maneira de comparar um monte de fontes, lado a lado, de uma só vez. A única ressalva: apenas algumas das fontes mostradas são seguras para a web.
Grade tipográfica
Um ritmo vertical estabelecido é uma das coisas que diferenciam a boa tipografia da boa tipografia. A grade tipográfica ajuda a estabelecer esse ritmo vertical para você. Também inclui uma grade vertical como guia para posicionar a tipografia e outros elementos.
WhatTheFont
WhatTheFont fornece uma maneira fácil de descobrir o que é uma fonte específica. Basta fazer upload de uma imagem (ou especificar um URL) e WhatTheFont determinará qual fonte está sendo usada. Essa é uma ótima maneira de encontrar fontes que foram usadas em imagens ou arquivos Flash.
CSS com ritmo vertical
Como já mencionado, um ritmo vertical consistente define uma ótima tipografia além daquela que é apenas “boa”. Essa ferramenta pode ajudar você a criar CSS para tipografia que tenha um ritmo vertical consistente. Basta digitar a família de fontes, o tamanho básico da fonte, a altura da linha de base e os tamanhos de fonte de destino e calcular para obter CSS para um ritmo vertical consistente.
Calculadora de ritmo de linha de base
Outra ótima calculadora de ritmo vertical. Este, no entanto, mostrará a você quais são os diferentes tamanhos de fonte próximos um do outro quando configurados com o ritmo vertical estabelecido. É uma ótima maneira de garantir que todos os tamanhos de fonte que você está usando ficarão bem.
Font Burner
Font Burner permite que você incorpore fontes em seus sites usando sIFR, usando uma interface gráfica. Atualmente existem mais de 1000 fontes disponíveis através do Font Burner, e há também um plugin WordPress disponível. Tudo o que você precisa fazer para usá-lo é encontrar a fonte que deseja usar, copiar o código de incorporação e colá-lo no código do seu site.
Gerador de texto cego
Este gerador de texto fictício permite criar não apenas lorem ipsum, mas também vários outros tipos de texto fictícios. Ao mesmo tempo, você também pode formatar esse texto diretamente no gerador (clique em Opções avançadas) e copie o CSS.
Linha de base
Baseline é uma estrutura de grade e tipografia que inclui arquivos para redefinir os padrões do navegador e criar um layout tipográfico básico. É uma boa opção para designers que querem usar um layout de grade e também querem alguma ajuda com o design da tipografia do site. A configuração de tipografia inclui títulos, listas, parágrafos, blockquotes e tabelas, bem como algum outro código de marcação.
Matriz de Fontes
O Font Matrix mostra as fontes incluídas nos sistemas operacionais Mac e Windows, Microsoft Office e Adobe Creative Suite, tudo em uma grade que facilita a visualização de quais fontes são mais prováveis de serem encontradas em quais tipos de computadores. Por exemplo, se seu site atende principalmente a designers, você pode tornar o primeiro tipo de letra na sua fonte algo que vem com o Adobe Creative Suite, enquanto se o site é destinado a usuários corporativos, a primeira fonte incluída pode ser do Microsoft Office.
Tipógrafo
O Typograph permite experimentar diferentes escalas e outros elementos do ritmo vertical. Ele inclui uma variedade de escalas tradicionais (incluindo Le Corbusier e Fibonacci), bem como outras opções de layout.
Serviços de Fontes da Web
Typekit
O Typekit oferece fontes de vários tipos de vendedores e fundições, incluindo a Liga de Tipo Móvel, FontFont e Veer (você pode visualizar toda a lista de fontes sem ter que se inscrever para uma conta). Eles também oferecem opções avançadas de controle para estilizar suas fontes, escalabilidade infinita e um colofão que informa aos visitantes quais fontes seu site está usando. O preço do Typekit é razoável, variando de gratuito para acesso parcial até US $ 100 / ano para sites de alto tráfego.
Kernest
O Kernest é um serviço de fontes da Web que usa fontes OFL, GPL, GUST e Creative Commons, bem como aquelas com licenças comerciais. Muitas de suas fontes são gratuitas (o serviço em si é gratuito), enquanto outras têm taxas de assinatura a partir de poucos dólares.
Fontes ao vivo da Ascender
A Ascender oferece seu próprio serviço de fontes da Web, o Fonts Live. Eles têm mais de 110 tipos disponíveis, com fontes da Monotype, Microsoft, Bigelow & Holmes e outras, além de suas próprias fontes.
API de fontes do Google
O Google oferece uma seleção limitada de fontes da Web de código aberto. Embora a seleção não seja grande, ela é gratuita e apoiada pelo Google, o que significa que é improvável que você tenha problemas de capacidade ou atraso.
TypeFront
O TypeFont aborda as fontes da Web de maneira um pouco diferente. Em vez de oferecer uma biblioteca de fontes amigáveis à Web, elas permitem que você carregue suas próprias fontes que possuem uma licença adequada para a web. Essa é uma ótima opção se as fontes que você deseja usar não forem oferecidas atualmente por nenhum outro serviço de fontes da web. Existe um plano gratuito para sites de baixo tráfego, bem como planos pagos.
Tipografia Fontes da Web
A Typotheque oferece seu próprio serviço de fontes da Web para disponibilizar suas fontes para implementações de fontes @ font-face. A vantagem é que há apenas um custo de licença único que pode abranger aplicativos de impressão e da web. A desvantagem é que a seleção é limitada apenas às suas fontes.
Recursos e Artigos de Tipografia
Os elementos do estilo tipográfico aplicados à Web
Este é um guia de referência muito completo para quem quer aprender não apenas os princípios básicos da boa tipografia da web, mas também técnicas e princípios mais avançados. É dividido em capítulos e sub-capítulos, incluindo movimento horizontal e vertical, blocos e parágrafos, paginação, tamanho e muito mais. É um trabalho em andamento, então espere mais informações para aparecer no futuro.
Bom tipo de Web
O Nice Web Type tem toneladas de informações sobre a implementação de tipografia na web. Eles têm “notas” sobre tudo, desde começar com a tipografia da web até o CSS @ font-face. Eles também discutem tendências e novas idéias regularmente e têm uma página dedicada ao que consideram algumas das melhores fontes disponíveis.
12 exemplos de tipografia de parágrafos
Esta coleção de formatos de parágrafo de amostra de Jon Tan oferece um excelente ponto de partida para qualquer um que crie um site com texto pesado. Muitos designers negligenciam todas as possibilidades que vêm com o estilo de parágrafos e optam por opções conservadoras mais tradicionais. Este artigo prova que não é tão difícil sair da caixa e fazer algo interessante com os parágrafos em seus projetos.
Contraste e fluxo tipográficos
Este é um guia fantástico do WebDesignerWall sobre os princípios de fluxo e contraste na tipografia da web. Ele divide esses princípios em várias seções, incluindo tamanho, tipo / classificação, cor e peso.
Pilha de fontes revisada
Este artigo discute a expansão das pilhas de fontes CSS comuns seguras para a Web, explorando outras fontes comumente instaladas. Ele também explora as pilhas de fontes de alguns sites populares, juntamente com recomendações sobre como eles podem melhorar suas pilhas.
Na Tipografia da Web
Este artigo de Jason Santa Maria em A List Apart é um olhar muito abrangente no emparelhamento de fontes nos designs do seu site. É um tópico que não é discutido com muita frequência, mas é fundamental para criar excelentes designs tipográficos na web.
Pensando com o tipo
Pensando com o Type é o site complementar ao livro do mesmo título de Ellen Lupton. Ele oferece muitas informações básicas sobre tipografia. Embora muito do foco esteja na tipografia impressa, muitas das informações incluídas podem ser aplicadas à tipografia na web.
10 ótimas dicas para melhorar sua tipografia na web
Uma lista de dez coisas simples que você pode fazer para melhorar a tipografia nos designs de seu site. Inclui informações sobre fonte, tamanho, escala e hierarquia, principais e muito mais.
Tipografia Inspiração, Tendências e Notícias
Typophile
Typophile é um fórum para entusiastas de tipos tipográficos e tipógrafos. Se você quiser descobrir o que está acontecendo no mundo da tipografia, Typophile é um ótimo lugar para procurar. Também é um bom lugar para obter ajuda com qualquer problema relacionado à tipografia que você possa ter.
Eu amo tipografia
O ILT é um blog dedicado inteiramente à tipografia. Ele discute tópicos de design e negócios, do ponto de vista profissional. Seu arquivo é enorme, então há muitas informações sobre notícias e tendências atuais e passadas para mantê-lo ocupado.
nós amamos tipografia
WLT é uma galeria de tipografia, letras, sinalização e outro tipo. Os usuários podem enviar imagens do tipo que adoram e é um ótimo lugar para se inspirar com tipografia em seu próximo projeto.
Tipografia para manchetes
Elementos de Design tem uma grande galeria de mais de 120 exemplos de tipografia de manchete. Eles variam do simples ao complexo, em uma variedade de tipos e estilos. É um excelente lugar para ir se você está procurando um pouco de inspiração. Eles também têm uma galeria de puxar citações com mais de 20 exemplos.
Typographica
Typographica oferece revisões de tipo, comentários e resenhas de livros de tipografia. Seus comentários tipo são particularmente informativos, se você está procurando aprender sobre o que faz um bom tipo de letra.
Nos bastidores da tipografia requintada da web
Este é realmente o primeiro de uma série de cinco partes. Este post analisa a tipografia por trás de A List Apart, dividindo as fontes e estilos usados em diferentes partes do site. Postagens subseqüentes olham para: Jesús Rodríguez Velasco , Jon Tan , Designr.it e O Codex Transportica .
Typesites
Typesites é um blog que exibe ótimos designs de tipografia na web regularmente. Os sites que eles apresentam são diversos, mas todos incluem o uso de inspiração do tipo.
Compilado exclusivamente para Webdesigner Depot por Cameron Chapman