Sass and Responsive Typography

Originally published at: http://www.sitepoint.com/sass-responsive-typography/

As web fonts have grown (in number, quality, and ease of use), web typography has become a necessary part of web design. Web typography is a complex topic including many smaller aspects like font pairing, performance, FOUT, ligatures, and type scales.

As you make typographic choices when building websites, it is essential to keep responsive design in mind. It’s frustrating to read a page on a phone with huge desktop-sized headings; it’s also dull to see all the font sizes on a site stuck between 14px and 20px on a wide-screen monitor. These problems have helped me define responsive web typography with three components:

  1. Base font-size that changes at breakpoints
  2. Vertical rhythm that changes at breakpoints
  3. Consistent type scales that change at breakpoints

These three things are an important part of normal web typography: making them adjustable at a given breakpoint gives us the ability to tailor typography to the user’s viewport.

Continue reading this article on SitePoint
1 Like

Great article. I love the idea of having a responsive typography api/framework/library/approach/whatever. It looks like there some quite advanced Sass logic in here which would be great for anyone getting their hands dirty.

Just for anyone else reading this, I made a little compass gem that is very similar to this article. It helps manage and interact with responsive typography. Maybe some other people who are also interested in responsive typography with sass may find it helpful!

This article is timely. I’m not yet at a point where my understanding of ‘things’ has reached the level where I want to delve into Sass just yet, but I definitely am trying to understand responsive web typography and the concepts that underpin on it. I’ll be digging into this later for sure.

If you’re looking for a live version of this code, check out this gist on Sassmeister.

Great approach, Ive been playing around with it but never figured out how to extend list to take next variable, like h3-h6, for example… it simply does not work for me… any tip?

Sorry to hear that, Anna. Could you post a code sample (a CodePen, maybe) with the code you’re currently working with?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.