# Tipografia responsiva: melhores artigos e tutoriais

> Tipografia responsiva: melhores artigos e tutoriais selecionados. Curadoria completa de recursos essenciais sobre tipografia fluida e adaptativa. Aprenda!

URL: https://dpw.dev/design/tipografia-responsiva-melhores-artigos-e-tutoriais/  
Publicado em: 2013-11-25  
Categoria: design  
Tags: layout, planejamento, tipografia, web-design-responsivo  
Autor: Tárcio Zemel

## Tipografia Responsiva: O Básico

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-tipografia-responsiva-o-basico.webp)](http://ia.net/blog/responsive-typography-the-basics/)

Antes do advento do web design responsivo, não havia tantas variações de resolução de tela. Hoje, é preciso saber lidar com uma variedade imensa de tamanhos de tela e resoluções, nos mais diferentes dispositivos existentes - e estar preparado para o que ainda está por vir. Veja no artigo [Responsive Typography: The Basics](http://ia.net/blog/responsive-typography-the-basics/) considerações e informações básicas a respeito da tipografia responsiva, incluindo estatísticas interessantes e considerações sobre tipografia multidispositivo.

## Tipografia Responsiva em Web Design: Compreendendo e Usando

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-entendendo-usando.webp)](http://designmodo.com/responsive-typography/)

Os que trabalham com **desenvolvimento web** já sabem que, atualmente, é preciso desenvolver não somente para desktops, mas para uma variada gama de dispositivos móveis, como smartphones, tablets, notebooks e outros com nomes mais extravagantes. Veja no artigo [Responsive Typography in Web Design: Understanding and Using](http://designmodo.com/responsive-typography/) a importância de se avaliar a tipografia responsiva no planejamento de projetos web, considerações sobre a responsividade aplicada à tipografia web e exemplos de sites que usam boas técnicas para conseguir uma boa tipografia responsiva.

## Tipografia Responsiva é uma disciplina física, mas o computador não sabe disso (ainda)

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-disciplina-fisica.webp)](http://alistapart.com/column/responsive-typography-is-a-physical-discipline)

Para uma aplicação tipográfica ideal, é conveniente saber o máximo de informações possível sobre o ambiente em que a leitura é feita; com a aplicação de tipografia em web design responsivo, isso já não é possível. Em [Responsive Typography is a Physical Discipline, But Your Computer Doesn´t Know It (Yet)](http://alistapart.com/column/responsive-typography-is-a-physical-discipline), você vai encontrar conteúdo sobre isso, abordando assuntos como considerações sobre tipografia em vários meios, diferenças entre resoluções, unidades de medida para fontes na web e mais.

## Uma Olhada em Tipografia Responsiva

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-uma-olhada-rapida.webp)](http://www.internetmarketingninjas.com/blog/design/a-look-into-responsive-typography/)

No artigo [A Look Into Responsive Typography](http://www.internetmarketingninjas.com/blog/design/a-look-into-responsive-typography/), você vai encontrar uma parte histórica relacionada à tipografia, considerações sobre tamanhos de fontes, dicas para se criar tipografia que fique boa independente da resolução e características ideais para tipografia responsiva web.

## Prototipando Tipografia Responsiva

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-prototipando.webp)](http://viljamis.com/blog/2013/prototyping-responsive-typography/)

Em [Prototyping Responsive Typography](http://viljamis.com/blog/2013/prototyping-responsive-typography/) você também encontra um pouco de história tipográfica, como tomar decisões acertadas em relação a escolher boas fontes para web, considerações sobre escalas de fontes e uso de espaço em branco e muitas outras dicas.

## Um Guia Simples para Tipografia Responsiva

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-tipografia-guia-simples.webp)](http://www.webdesign.org/free-stuff/textures/a-simple-guide-to-responsive-typography.22074.html)

[A Simple Guide to Responsive Typography](http://www.webdesign.org/free-stuff/textures/a-simple-guide-to-responsive-typography.22074.html) apresenta alguns princípios de tipografia responsiva, considerações sobre comprimentos de linha adequados, dicas sobre o uso de fontes web personalizadas (typefaces), dentre outras informações.

## Tipo Fluido

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-tipo-fluido.webp)](http://trentwalton.com/2012/06/19/fluid-type/)

No excelente artigo [Fluid Type](http://trentwalton.com/2012/06/19/fluid-type/) são apresentados conteúdos referentes a tipografia responsiva fluida, aquela que fica bem apresentada independentemente de resoluções específicas de dispositivos. Depois de ler este artigo, você saberá mais sobre as vantagens de adotar a tipografia fluida e ser apresentado a conceitos importantes para se alcançar este objetivo.

## Introdução à Tipografia Móvel

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-introducao-tipografia-movel.webp)](http://4ourth.com/wiki/Introduction%20to%20Mobile%20Typography)

No [Introduction to Mobile Typography](http://4ourth.com/wiki/Introduction%20to%20Mobile%20Typography) você vai conhecer os principais desafios da tipografia móvel e como fazer o que é certo quando o assunto são fontes em web design responsivo, tudo isso através de tópicos como usabilidade, linhas-base e medidas, alturas de linha, tipos de medidas tipográficas na web, análise da estrutura e composição de fontes e outros assuntos de igual importância para o tema.

## Tipografia Fluida para Websites Responsivos

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-tipografia-fluida-sites-responsivos.webp)](http://academy.bindtuning.com/fluid-type-for-responsive-websites/)

Neste artigo [Fluid Typography for Responsive Websites](http://academy.bindtuning.com/fluid-type-for-responsive-websites/), são feitas considerações (e mostrados exemplos de código) para temas sobre como usar media queries para tipografia responsiva, unidades CSS para projetos responsivos e indicação de recursos web para ajudar na jornada da responsividade.

## Tipografia Responsiva: uma jornada pela tipografia flexível

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-jornada-tipografia-responsiva.webp)](http://99designs.com/designer-blog/2013/04/24/responsive-typography/)

Já que web design responsivo é o novo padrão de desenvolvimento em webdev, é preciso, também, atenção especial em relação á tipografia usada em sites e outros projetos para a web. No artigo [Responsive Typography: a quest for flexible typesetting](http://99designs.com/designer-blog/2013/04/24/responsive-typography/) são feitas considerações a esse respeito através de tópicos como definição de caracteres por linha, desafios da tipografia responsiva e a proposição de algumas soluções interessantes para a questão.

## Tipografia Responsiva e Breakpoints Sistemáticos

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-breakpoints-sistematicos.webp)](http://oliverjash.me/2012/08/06/responsive-typography-and-systematic-breakpoints.html)

Em [Responsive Typography and Systematic Breakpoints](http://oliverjash.me/2012/08/06/responsive-typography-and-systematic-breakpoints.html) é possível encontrar considerações e dicas práticas para tentar sanar a questão da tipografia responsiva com o uso adequado de breakpoints. Portanto, espere ver neste artigo mais código e matemática que nos demais.

## Lidando com Tipografia para Design Responsivo

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-lidando-tipografia-design-responsivo.webp)](http://www.netmagazine.com/tutorials/handling-typography-responsive-design)

Em [Handling Typography for Responsive Design](http://www.netmagazine.com/tutorials/handling-typography-responsive-design), como sugere o próprio nome do artigo, é possível encontrar dicas pontuais sobre tipografia web em projetos responsivos como escala tipográfica, mobile first, breakpoints, testes em resoluções diferentes e outros conceitos e dicas.

## Otimizando Tipografia em Web Design Responsivo

[![](/images/blog/tipografia-responsiva-melhores-artigos-e-tutoriais/tipografia-responsiva-melhores-artigos-e-tutoriais-otimizando-tipografia-web-design-responsivo.webp)](http://viljamis.com/blog/2012/typography/)

[Optimizing Typography in Responsive Web Design](http://viljamis.com/blog/2012/typography/) é um artigo "direto ao ponto" com informações práticas a respeito de "escalas de fontes" e sua aplicação em layouts, exemplos, considerações sobre responsividade tipográfica e exemplos de códigos de aplicação desses conceitos.

## Conclusão

Como pode ser visto, essa compilação de artigos (em inglês) sobre **tipografia responsiva** é bastante útil e contém bastante material para estudo e consulta. Certamente esta não é uma lista que cobre todo o assunto, portanto, caso tenha sugestão de artigos e/ou tutoriais relacionados ao **uso da tipografia em web design responsivo**, faça sua sugestão indicando o link nos comentários.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml