Welcome to the first of my design system series: Typography. Type is important when it comes to usability and getting your message across. You will need to keep your typography consistent across all platforms: web, mobile, video & print.
For this guide, I want to cover web & mobile type systems. This guide is for front-end and back-end developers or engineers, so you don't have to create it yourself.
To setup the system, I've created variables for elements that will be re-used. This includes font families, line height & font weight. I will add more to this system when needed.
Also included from my layout variables are media queries. I use them in the type system to change the type size based on screen size. I use this in place of flexible font sizes tools, such as vw and % because its easier to control.
// Variables
// Font Family
$font-family-heading: Helvetica;
$font-family-body: Times New Roman;
// Line Height
$font-lineheight-small: 1.1;
$font-lineheight-normal: 1.3;
$font-lineheight-large: 1.5;
// Font Weight
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
// Media Queries
// Usage: @media (min-width: $mq-tablet) {code};
$mq-ip5: 321px;
$mq-ip6: 375px;
$mq-ip6p: 414px;
$mq-phonexl: 576px;
$mq-tablet: 768px;
$mq-laptop: 992px;
$mq-desktop: 1200px;
$mq-wide: 1400px;
My lone mixin for my type system. This mixin allows me to use REM font sizing when it can be supported. For unsupported browsers, it switches to pixels (PX).
// Mixins
// Usage: @include font-size(16);
@mixin font-size($sizeValue: 16) {
font-size: $sizeValue + px;
font-size: ($sizeValue / 10) + rem;
}
Here's where the mixin and the media queries are put to work. For my type system, I wanted to simplify how I handle font sizes across screen sizes. It's not perfect and you can add more media queries to handle specific sizes. I wanted to cover the main type sizes you usually see in Photoshop or Figma.
To use this system, just add @extend .t-xx; to your line of code. The downside to this that you cannot use @extend inside a media query. So this will keep you constrained to simple font sizes for your elements, which is a good thing in the long run.
// Size System
// Usage: @extend .t-96;
.t-96 {
@include font-size(81);
@media (min-width: $mq-tablet) {
@include font-size(96);
}
}
.t-81 {
@include font-size(72);
@media (min-width: $mq-tablet) {
@include font-size(81);
}
}
.t-72 {
@include font-size(64);
@media (min-width: $mq-tablet) {
@include font-size(72);
}
}
.t-64 {
@include font-size(56);
@media (min-width: $mq-tablet) {
@include font-size(64);
}
}
.t-56 {
@include font-size(48);
@media (min-width: $mq-tablet) {
@include font-size(56);
}
}
.t-48 {
@include font-size(36);
@media (min-width: $mq-tablet) {
@include font-size(48);
}
}
.t-36 {
@include font-size(32);
@media (min-width: $mq-tablet) {
@include font-size(36);
}
}
.t-32 {
@include font-size(28);
@media (min-width: $mq-tablet) {
@include font-size(32);
}
}
.t-28 {
@include font-size(24);
@media (min-width: $mq-tablet) {
@include font-size(28);
}
}
.t-24 {
@include font-size(21);
@media (min-width: $mq-tablet) {
@include font-size(24);
}
}
.t-21 {
@include font-size(18);
@media (min-width: $mq-tablet) {
@include font-size(21);
}
}
.t-18 {
@include font-size(16);
@media (min-width: $mq-tablet) {
@include font-size(18);
}
}
.t-16 {
@include font-size(14);
@media (min-width: $mq-tablet) {
@include font-size(16);
}
}
.t-14 {
@include font-size(12);
@media (min-width: $mq-tablet) {
@include font-size(14);
}
}
.t-12 {
@include font-size(10);
@media (min-width: $mq-tablet) {
@include font-size(12);
}
}
.t-10 {
@include font-size(8);
@media (min-width: $mq-tablet) {
@include font-size(10);
}
}
The settings within the HTML and BODY tags set the precident for the rest of the type settings. The font-size of 62.5% in the HTML tag helps tell the browser to use "font-size:10px", but using percentages. This allows people who have vision impairments to bump the font size up. Then you do another reset at the body level, which for me, I use 18px font sizes.
// Global
html {
font-size: 62.5%;
}
body {
font-family: $font-family-body;
@extend .t-18;
line-height: $font-lineheight-normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
For setting up my type features, I put everything in classes. It allows for me to reuse different settings outside the HTML tags. For example, if I want to use an H2 size setting outside the H2 HTML tag, then I can use @extend .h2; or add the .h2 class within my HTML.
// Classes
// Headers
.header {
font-family: $font-family-heading;
line-height: $font-lineheight-small;
}
.h1 {
@extend .header;
@extend .t-56;
}
.h2 {
@extend .header;
@extend .t-48;
}
.h3 {
@extend .header;
@extend .t-36;
}
.h4 {
@extend .header;
@extend .t-24;
}
.h5 {
@extend .header;
@extend .t-21;
}
.h6 {
@extend .header;
@extend .t-16;
}
// Displays
.display {
font-family: $font-family-heading;
line-height: $font-lineheight-small;
}
.d1 {
@extend .display;
@extend .t-96;
}
.d2 {
@extend .display;
@extend .t-81;
}
.d3 {
@extend .display;
@extend .t-72;
}
.d4 {
@extend .display;
@extend .t-64;
}
// Paragraphs
.paragraph {
font-family: $font-family-body;
}
.p-normal {
@extend .paragraph;
@extend .t-18;
}
.p-small {
@extend .paragraph;
@extend .t-14;
}
.p-large {
@extend .paragraph;
@extend .t-24;
}
// User Interface
.ui {
@extend .t-14;
letter-spacing: .005em;
line-height: $font-lineheight-small;
text-transform: uppercase;
}
// Nav
.nav a {
@extend .ui;
}
For my actual HTML tag styles, I extend the matching classes for each tag. If needed, I can add extra styles, such as margins and paddings, which I will cover in a later guide. For user interface elements, I have a class set of .text-ui for things like labels, navigation or any non-copy text elements.
// HTML Tags
// HTML Headers
h1 {
@extend .h1;
}
h2 {
@extend .h2;
}
h3 {
@extend .h3;
}
h4 {
@extend .h4;
}
h5 {
@extend .h5;
}
h6 {
@extend .h6;
}
// HTML Paragraphs
p {
@extend .paragraph;
}
p.small {
@extend .p-small;
}
p.large {
@extend .p-large;
}
// HTML Inline
strong {
font-weight: $font-weight-bold
}
em {
font-style: oblique
}
s {
text-decoration: line-through
}
// HTML Links
a {
text-decoration: none;
&:hover {}
}
// HTML Lists
ul, ol {
li {
@extend .paragraph;
}
}
// HTML Labels
label {
@extend .ui;
}
// HTML Blockquote
blockquote {
@extend .p-large;
}
// Variables
// Font Family
$font-family-heading: Helvetica;
$font-family-body: Times New Roman;
// Line Height
$font-lineheight-small: 1.1;
$font-lineheight-normal: 1.3;
$font-lineheight-large: 1.5;
// Font Weight
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
// Media Queries
// Usage: @media (min-width: $mq-tablet) {code};
$mq-ip5: 321px;
$mq-ip6: 375px;
$mq-ip6p: 414px;
$mq-phonexl: 576px;
$mq-tablet: 768px;
$mq-laptop: 992px;
$mq-desktop: 1200px;
$mq-wide: 1400px;
// Mixins
// Usage: @include font-size(16);
@mixin font-size($sizeValue: 16) {
font-size: $sizeValue + px;
font-size: ($sizeValue / 10) + rem;
}
// Size System
// Usage: @extend .t-96;
.t-96 {
@include font-size(81);
@media (min-width: $mq-tablet) {
@include font-size(96);
}
}
.t-81 {
@include font-size(72);
@media (min-width: $mq-tablet) {
@include font-size(81);
}
}
.t-72 {
@include font-size(64);
@media (min-width: $mq-tablet) {
@include font-size(72);
}
}
.t-64 {
@include font-size(56);
@media (min-width: $mq-tablet) {
@include font-size(64);
}
}
.t-56 {
@include font-size(48);
@media (min-width: $mq-tablet) {
@include font-size(56);
}
}
.t-48 {
@include font-size(36);
@media (min-width: $mq-tablet) {
@include font-size(48);
}
}
.t-36 {
@include font-size(32);
@media (min-width: $mq-tablet) {
@include font-size(36);
}
}
.t-32 {
@include font-size(28);
@media (min-width: $mq-tablet) {
@include font-size(32);
}
}
.t-28 {
@include font-size(24);
@media (min-width: $mq-tablet) {
@include font-size(28);
}
}
.t-24 {
@include font-size(21);
@media (min-width: $mq-tablet) {
@include font-size(24);
}
}
.t-21 {
@include font-size(18);
@media (min-width: $mq-tablet) {
@include font-size(21);
}
}
.t-18 {
@include font-size(16);
@media (min-width: $mq-tablet) {
@include font-size(18);
}
}
.t-16 {
@include font-size(14);
@media (min-width: $mq-tablet) {
@include font-size(16);
}
}
.t-14 {
@include font-size(12);
@media (min-width: $mq-tablet) {
@include font-size(14);
}
}
.t-12 {
@include font-size(10);
@media (min-width: $mq-tablet) {
@include font-size(12);
}
}
.t-10 {
@include font-size(8);
@media (min-width: $mq-tablet) {
@include font-size(10);
}
}
// Global
html {
font-size: 62.5%;
}
body {
font-family: $font-family-body;
@extend .t-18;
line-height: $font-lineheight-normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Classes
// Headers
.header {
font-family: $font-family-heading;
line-height: $font-lineheight-small;
}
.h1 {
@extend .header;
@extend .t-56;
}
.h2 {
@extend .header;
@extend .t-48;
}
.h3 {
@extend .header;
@extend .t-36;
}
.h4 {
@extend .header;
@extend .t-24;
}
.h5 {
@extend .header;
@extend .t-21;
}
.h6 {
@extend .header;
@extend .t-16;
}
// Displays
.display {
font-family: $font-family-heading;
line-height: $font-lineheight-small;
}
.d1 {
@extend .display;
@extend .t-96;
}
.d2 {
@extend .display;
@extend .t-81;
}
.d3 {
@extend .display;
@extend .t-72;
}
.d4 {
@extend .display;
@extend .t-64;
}
// Paragraphs
.paragraph {
font-family: $font-family-body;
}
.p-normal {
@extend .paragraph;
@extend .t-18;
}
.p-small {
@extend .paragraph;
@extend .t-14;
}
.p-large {
@extend .paragraph;
@extend .t-24;
}
// User Interface
.ui {
@extend .t-14;
letter-spacing: .005em;
line-height: $font-lineheight-small;
text-transform: uppercase;
}
// Nav
.nav a {
@extend .ui;
}
// HTML Tags
// HTML Headers
h1 {
@extend .h1;
}
h2 {
@extend .h2;
}
h3 {
@extend .h3;
}
h4 {
@extend .h4;
}
h5 {
@extend .h5;
}
h6 {
@extend .h6;
}
// HTML Paragraphs
p {
@extend .paragraph;
}
p.small {
@extend .p-small;
}
p.large {
@extend .p-large;
}
// HTML Inline
strong {
font-weight: $font-weight-bold
}
em {
font-style: oblique
}
s {
text-decoration: line-through
}
// HTML Links
a {
text-decoration: none;
&:hover {}
}
// HTML Lists
ul, ol {
li {
@extend .paragraph;
}
}
// HTML Labels
label {
@extend .ui;
}
// HTML Blockquote
blockquote {
@extend .p-large;
}
Ready to build a website that can stand the test of time? Let's schedule a call to learn how we can build a website that lasts.
Schedule a callSubscribe to be a step ahead, having the knowledge and tools necessary for the future of design & business.