Making a responsive typography scale from a desktop comp
Last week I was given a sales page design with over 15 different font sizes, and only with the desktop view with the intention that it could just be made mobile friendly :) with a simple switch. At first I didn’t know where to start but eventually realized I needed to get more organized so I made a listing of all the font sizes like this:
It turns out that there were 17 different font sizes, and a lot more styles if you consider all of the combinations. So I created a spreadsheet and found a pattern in the ratios of the font sizes.
Well what if mobile just started at 14px?
But I still ended up with huge text that didn’t look good on 320px mobile devices.
I couldn’t use the same exact ratios for mobile… soI took the 3 largest font sizes and scaled them down on mobile. Here is the CSS so far for Mobile and desktop:
— — — — — — — — — — — — — — — — — — — —
// TYPOGRAPHY up to 767px
$ts-base: 16px;
font-size: $ts-base;
p,.ts {margin-bottom:20px; line-height:1.5; }
p,li {font-weight:500; line-height:1.6;} // make it a little thicker on mobile
p,li,.ts-1 { font-size: $ts-base;}
.ts-2 { font-size: 1.05555555555556em ;}
.ts-3 { font-size: 1.11111111111111em ;}
.ts-4,.bullet-heading { font-size: 1.22222222222222em ;}
.ts-5 { font-size: 1.33333333333333em ;}
.ts-6 { font-size: 1.38888888888889em ;}
.ts-7 { font-size: 1.5em ;}
.ts-8 { font-size: 1.55555555555556em ;}
.ts-9 { font-size:1.66666666666667em ;}
.ts-10 { font-size:1.77777777777778em ;}
.ts-11 { font-size:1.83333333333333em ;}
.ts-12 { font-size:1.88888888888889em ;}
// these will be all limited to 2ems in mobile
.ts-13 { font-size:2.11em ;}
.ts-14 { font-size:2.22em ;}
.ts-15 { font-size:2.33em ;}
.ts-16 { font-size:2.5em ;}
— — — — — — — — — — — — — — — — — — — —
// TYPOGRAPHY 768px and up
$ts-base: 18px;
p, .ts {margin-bottom:30px; }
font-size: $ts-base;
p,li,.ts-1 { font-size: $ts-base;}
p,li {font-weight:400; line-height:1.5} // make it a little lighter on desktop
.ts-2 { font-size: 1.05555555555556em ;}
.ts-3 { font-size: 1.11111111111111em ;}
.ts-4,.bullet-heading { font-size: 1.22222222222222em ;}
.ts-5 { font-size: 1.33333333333333em ;}
.ts-6 { font-size: 1.38888888888889em ;}
.ts-7 { font-size: 1.5em ;}
.ts-8 { font-size: 1.55555555555556em ;}
.ts-9 { font-size:1.66666666666667em ;}
.ts-10 { font-size:1.77777777777778em ;}
.ts-11 { font-size:1.83333333333333em ;}
.ts-12 { font-size:1.88888888888889em ;}
// expanded font sizes for desktop
.ts-13 { font-size:2.22222222222222em ;}
.ts-14 { font-size:2.33333333333333em ;}
.ts-15 { font-size:2.44444444444444em ;}
.ts-16 { font-size:3.33333333333333em ;}
— — — — — — — — — — — — — — — — — — — —
However it wasn’t enough…
I still found cases where I wanted to reduce the font size even further to make it look good and be readable so I decide to allow the css to “switch” the font size just for mobile.
— — — — — — — — — — — — — — — — — — — —
// mobile overrides
.ts-2-mobile { font-size: 1.05555555555556em ;}
.ts-3-mobile { font-size: 1.11111111111111em ;}
.ts-4-mobile,.bullet-heading { font-size: 1.22222222222222em ;}
.ts-5-mobile { font-size: 1.33333333333333em ;}
.ts-6-mobile { font-size: 1.38888888888889em ;}
.ts-7-mobile { font-size: 1.5em ;}
.ts-8-mobile { font-size: 1.55555555555556em ;}
.ts-9-mobile { font-size:1.66666666666667em ;}
.ts-10-mobile { font-size:1.77777777777778em ;}
.ts-11-mobile { font-size:1.83333333333333em ;}
.ts-12-mobile { font-size:1.88888888888889em ;}
—————————————————————
On mobile, I could use a larger or smaller scale wherever I wanted and whatever scale I wanted to on desktop.
I guess I created a somewhat responsive typography framework, and I’m sure this has been done before but just wanted to share the process.
