News

Build responsive typography with SCSS and media queries

Lead front-end developer Stephen Scaff explains how Sass mixins, SCSS and media queries kept typographic ratios golden across Urban Influence

RWDType

Lead front-end developer Stephen Scaff explains how Sass mixins, SCSS and media queries kept typographic ratios golden across Urban Influence

RWDType

Encapsulate fluidity in form

The web is a natively responsive medium without intentional design. Imposing fixed measurement units for pixels broke this inherent fluidity. By ditching pixels in favour of relative sizing units (ems, rems, percentages and viewports), we can establish a more meaningful relationship between layouts (grid systems) and typography. This enables global and proportional control over your entire site via a single font-size declaration on the body tag. Over the following steps we’ll look at how this can be done!

Establish typographic scale

Set up your typographic scale and vertical rhythm. While there are plenty of Sass functions or mixins to assist here, Gridlover (gridlover.net/app) is a great tool that calculates modular scale of your headers from common ratios. For example, if you go with the famous golden ratio (1:1.618), your headers will have mixins for greater flexibility and consistency:

001 /*--- Typography Mixins ---*/
002 @mixin font-h1 {    
003 font-size: 4.238095238em;
004 line-height: 1.213483146em;
005 margin-top: 0.80898876em;
006 margin-bottom: 0.40449438em;
007 }
008 @mixin font-h2 {    
009 font-size: 2.619047619em;
010 line-height: 1.30909091em;
011 margin-top: 1.30909091em;    
012 margin-bottom: 0.65454546em;
013 }
014 @mixin font-h3 {
015 font-size: 1.619047619em;
016 line-height: 1.058823529em;
017 margin-top: 1.05882353em;    
018 margin-bottom: 1.05882353em;
019 }
020 @mixin font-h4 {    
021 font-size: 1em;
022 line-height: 1.714285714em;
023 margin-top: 1.71428571em;
024 margin-bottom: 1.71428571em;
025 }
026 /*--- Typography Styles ---*/
027 h1, .font-h1 {
028 @include font-h1;
029 }    
030 h2, .font-h2{
031 @include font-h2;
032 }
033 h3, .font-h3 {
034 @include font-h3;
035 }    
036 h4, .font-h4 {
037 @include font-h4;
038 }    
039 p, ul, ol, pre, table, blockquote {
040 margin-top: 1.71428571em;
041 margin-bottom: 1.71428571em;    
042 }

Keep layouts fluid

Start by ensuring layout elements are using percentage and relative sizing. This includes your grid system, container width, margins, paddings, and especially, media queries. With your media queries, move away from the mobile, tablet and desktop break. Instead let content determine your breakpoints, and use as many as needed to create a fluid experience. For consistency, it’s best to rely on SCSS variables to define the breaks, such as:

001 $mq-xsmall: 22em;
002 $mq-small: 36em;
003 $mq-med: 58em;
004 $mq-large: 86em;
005 $mq-xlarge: 115em;
006 $mq-xxlarge: 125em;
007 $mq-xxxlarge: 145em;

Set body font-size

Font-size in the body is set to 100% at mobile. Leave <p> (paragraph) tags alone, as they’ll inherit sizing from the body. In the past, a common approach was to set the body to 62.5 per cent and baseline ems to 10 pixels. But in a proportional setup, pixel to em equation is not relevant. So as you move up from mobile/100 per cent, incrementally increase the body’s font-size over a series of min-width, em-based breakpoints using the mq variables set up from the last step:

001 /*--- Fluid body sizing ---*/
002 body {    
003 font-size: 100%;
004 @media (min-width: $mq-small) {
005 font-size: 110%
006 }
007 @media (min-width: $mq-med) {
008 font-size: 120%    
009 }
010 @media (min-width: $mq-large) {
011 font-size: 130%    
012 }
013 @media (min-width: $mq-xlarge) {
014 font-size: 140%
015 }
016 @media (min-width: $mq-xxlarge) {
017 font-size: 150%    
018 }
019 @media (min-width: $mq-xxxlarge) {
020 font-size: 160%    
021 }
022 }    

Use a single declaration

From a single declaration we can now globally and proportionally increase the entire site – typography and all, while sustaining the modular ratio. Since browser width and typography are also linked, modify your container’s max width to maintain the characters per line for best readability. This is generally accepted as 45 to 75 (webtypography.net/2.1.2).

001 /*--- Container Class ---*/
002 .container{
003 width: 95%;
004 margin-left: auto;
005 margin-right: auto;
006 @media (min-width: $mq-small) {
007 max-width: 86%;
008 }
009 @media (min-width: $mq-med) {
010 max-width: 80%;
011 }
012 @media (min-width: $mq-large) {
013 max-width: 50em
014 }
015 @media (min-width: $mq-xlarge) {
016 max-width: 45em
017 }
018 }

Change the viewport size

Viewport relative sizing (vh, vw, vmin, vmax) in CSS3 represents a game changer for responsive design and especially typography. Here each unit represents one per cent of the viewport axis, with ‘viewport’ of course being the current browser window size. Once full, consistent browser support arrives, sizing units truly relative to the viewport will make creating proportional systems easier than ever before.

×