Designing beautiful websites with a typographic scale

Responsive design is the benchmark for designing websites; and with CSS3, the toolkit used for web design and development, we are now able to deliver a rich experience across an increasingly diverse range of devices.

But one thing that’s been largely ignored is responsive typography. This isn’t because web designers don’t care about typography - far from it, it’s just the standard approach of creating flat Photoshop designs and developers having to translate psd’s, means things get lost in translation. This is why we moved to design in the browser a few years ago - so we can start off developing with good typographic foundations, and not reacting only when things break on the screen.

It’s true that typography has flourished on the web over the last few years and designers now have access to a plethora of typefaces and wide variety of weights. CSS3 and services such as Google Font and Typekit give designers, almost the same freedom as they get with print design. But, unlike the world of print, the size and space that we digital designers have to work with is fluid. The issue is this: the richer and more creative our designs become, the harder they are to maintain at different sizes. While dramatic h1 titles look great on our desktops, on phones they become ridiculous and waste too much space.

And yes, we combat this with media-queries, but at Torchbox we’ve been keen to avoid this, as that is merely reacting to a problem instead of investing in a solid solution. Also this approach can become a nightmare on larger sites, resulting in compromised layouts, where the design suffers in the no-mans-land between break points. By adding more fixes, you just increase the number of font style and therefore the complexity of your project, leaving you with a stylesheet as unmaintainable as a house built on sand, with the ominous tide approaching.

Let’s look at the facts: the less space we have, the bigger things become - meaning the distance between competing elements becomes exaggerated. This is where design isn’t just about following rules - it’s about combating these optical illusions and returning balance and harmony. It’s important to scale fonts sizes, but in a way that can be easily maintained and adjusted – great for us OCD digital designers and front-end developers.

The idea of scalable font stack is simple: Start mobile first and set a baseline font size, then begin to implement a sliding scale in the CSS, which works across all your breakpoints. By adding all your typography in one place, you have a greater understanding and better control over your layout. If you use languages like SCSS, you can be even more flexible while limiting lines of code.

The example below shows a font stack for the base font size at a range of different breakpoints. Content is then applied and tested on different devices to see if it looks right:

This process is then repeated all the way up to the largest heading style (h1). This is a great way to begin a html prototype - after all, this is how good print-based designs would start their Indesign layouts, by defining Paragraph and Character styles. Design tools like Sketch, Photoshop or Illustrator all have the ability to define typography scale. Of course, as we begin to layer on design decisions, this scale might not work as intended - but this level of organisation and discipline means that adjustments are simple and easy to maintain.

Defining the font sizes is fairly easy; simply move the browser window and you can see your fonts scale - but you’ll notice the line heights will need adjusting. “That’s the same as leading isn’t it?” I hear you ask. Not quite.

Line height and leading are two different things. Leading is the distance between the baseline of two line of text. Line height is the distance between half of the leading above a line and half the leading below it. This is why your Photoshop mockups often don’t quite translate to code exactly how you would like.

Can’t we just apply unitless line heights that scale relative to the font size? That would be nice but it’s not a simple as that - design is an art after all, and can’t be computed with mathematics. But again, we can use our scale and apply line-height concisely across the board. Unitless measurement makes sense as we can see the scale in action, as seen in the example below. The pixel measurements, however, are harder to follow and appear more random. If we set a font size of 24px and a line of 1.5, the line-height will be 1.5 times larger than it’s font size (37.5px):

As you can see, we have a sliding scale of line heights, which reduce the larger the font size. Again, as objects get bigger, the space between them becomes more pronounced, so designers reduce this for a better visual effect. This sliding scale will need to be adapted across all other typographic styles, and you’ll find on elements such as paragraph styles, there will be less of a need to adjust the scale, as the difference between each font size is less.

Read A More Modern Scale for Web Typography by typecast for a more in-depth study into scalable fonts

This approach to typography will hopefully help you to control your font styles more effectively and achieve some level of consistency across devices. Whilst there is no silver bullet solution to responsive type, we can at least plan early and try to keep things organised, as typography is an art, not a science. And as typography is one of the most critical parts of a design, it's about time we master it across every device.

“There is no design without discipline. There is no discipline without intelligence.” –Massimo Vignelli