Styles: Typography and Fonts
This section describes how you should manage your fonts, and impliment thetypography in your project.
Fonts
Handoff uses the Google Fonts API to load fonts. The fonts are loaded in the of the document, and are available for use in the CSS.
The components and designs in this Design System use two fonts: Barlow and Inter. You can include them in your project like this -
1@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
2@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");We've limited the font weights in these includes to the known weights declared
here. Additional weights will increase load times, so we avoid unneeded weights.
If you wish to import the fonts directly into your CSS, you can do so like this -
1$font-path: "../fonts/";
2
3// Inter
4@font-face {
5 font-family: "Inter";
6 font-style: normal;
7 font-weight: 400;
8 font-display: swap;
9 src: url("#{$font-path}Inter-Regular.ttf") format("ttf");
10}
11
12@font-face {
13 font-family: "Inter";
14 font-style: normal;
15 font-weight: 500;
16 font-display: swap;
17 src: url("#{$font-path}Inter-Medium.ttf") format("ttf");
18}
19
20@font-face {
21 font-family: "Inter";
22 font-style: normal;
23 font-weight: 600;
24 font-display: swap;
25 src: url("#{$font-path}Inter-SemiBold.ttf") format("ttf");
26}
27
28@font-face {
29 font-family: "Inter";
30 font-style: normal;
31 font-weight: 700;
32 font-display: swap;
33 src: url("#{$font-path}Inter-Bold.ttf") format("ttf");
34}
35
36//Barlow
37@font-face {
38 font-family: "Barlow";
39 font-style: normal;
40 font-weight: 200;
41 font-display: swap;
42 src: url("#{$font-path}Barlow-ExtraLight.ttf") format("ttf");
43}
44
45@font-face {
46 font-family: "Barlow";
47 font-style: normal;
48 font-weight: 400;
49 font-display: swap;
50 src: url("#{$font-path}Barlow-Regular.ttf") format("ttf");
51}
52
53@font-face {
54 font-family: "Barlow";
55 font-style: normal;
56 font-weight: 500;
57 font-display: swap;
58 src: url("#{$font-path}Barlow-Medium.ttf") format("ttf");
59}
60
61@font-face {
62 font-family: "Barlow";
63 font-style: normal;
64 font-weight: 600;
65 font-display: swap;
66 src: url("#{$font-path}Barlow-SemiBold.ttf") format("ttf");
67}
68
69@font-face {
70 font-family: "Barlow";
71 font-style: normal;
72 font-weight: 700;
73 font-display: swap;
74 src: url("#{$font-path}Barlow-Bold.ttf") format("ttf");
75}
76
77@font-face {
78 font-family: "Barlow";
79 font-style: normal;
80 font-weight: 900;
81 font-display: swap;
82 src: url("#{$font-path}Barlow-Black.ttf") format("ttf");
83}Typography
The typography in the Handoff Design System is based on a series of mixins that are used to apply the correct styles to the text. These mixins are designed to ensure consistancy and ease of use.
Note that the values in the mixins are largely pulled from the variable list, so ensure that you are including the variables before the typography mixins.
1@mixin title-common {
2 font-family: $font-barlow-sans;
3 color: color("pure-black");
4}
5
6@mixin title-1 {
7 @include title-common;
8 font-size: $h1-font-size-mobile;
9 line-height: 1.2;
10 font-weight: $font-weight-normal;
11 letter-spacing: -0.05em;
12 @include media-breakpoint-up(lg) {
13 font-size: $h1-font-size;
14 }
15}
16
17@mixin title-2 {
18 @include title-common;
19 font-size: $h2-font-size-mobile;
20 line-height: 1.2;
21 font-weight: $font-weight-medium;
22 letter-spacing: -0.03em;
23 @include media-breakpoint-up(lg) {
24 font-size: $h2-font-size;
25 }
26}
27
28@mixin title-3 {
29 @include title-common;
30 font-size: $h3-font-size-mobile;
31 line-height: 1.1;
32 font-weight: $font-weight-medium;
33 letter-spacing: -0.03em;
34 @include media-breakpoint-up(lg) {
35 font-size: $h3-font-size;
36 letter-spacing: -0.05em;
37 }
38}
39
40@mixin title-4 {
41 @include title-common;
42 font-size: $h4-font-size-mobile;
43 line-height: 1.1;
44 font-weight: $font-weight-medium;
45 letter-spacing: -0.03em;
46 @include media-breakpoint-up(lg) {
47 font-size: $h4-font-size;
48 }
49}
50
51@mixin title-5 {
52 @include title-common;
53 font-size: $h5-font-size-mobile;
54 line-height: 1.1;
55 font-weight: $font-weight-medium;
56 letter-spacing: -0.03em;
57 @include media-breakpoint-up(lg) {
58 font-size: $h5-font-size;
59 }
60}
61
62@mixin title-6 {
63 @include title-common;
64 font-size: $h6-font-size-mobile;
65 line-height: 1.2;
66 font-weight: $font-weight-normal;
67 letter-spacing: -0.02em;
68 @include media-breakpoint-up(lg) {
69 font-size: $h6-font-size;
70 }
71}
72
73@mixin title-7 {
74 @include title-common;
75 font-size: 18px;
76 line-height: 24px;
77 font-weight: $font-weight-medium;
78 letter-spacing: -0.4px;
79 @include media-breakpoint-up(lg) {
80 font-size: 20px;
81 }
82}
83
84@mixin subtitle {
85 font-size: 14px;
86 line-height: 1.6;
87 letter-spacing: 0em;
88 @include media-breakpoint-up(lg) {
89 font-size: 20px;
90 }
91}
92@mixin body-big {
93 font-size: 14px;
94 line-height: 1.6;
95 letter-spacing: 0em;
96 @include media-breakpoint-up(lg) {
97 font-size: 18px;
98 }
99}
100@mixin body {
101 font-size: 14px;
102 line-height: 1.6;
103 letter-spacing: 0em;
104 @include media-breakpoint-up(lg) {
105 font-size: 16px;
106 }
107}
108@mixin body-small {
109 font-size: 12px;
110 line-height: 1.6;
111 letter-spacing: 0em;
112 @include media-breakpoint-up(lg) {
113 font-size: 14px;
114 }
115}
116@mixin tag-1 {
117 font-weight: $font-weight-medium;
118 font-size: 12px;
119 line-height: 14.4px;
120 font-family: $font-barlow-sans;
121 color: color("in-blue");
122 text-transform: uppercase;
123 letter-spacing: 2.4px;
124}
125@mixin tag-2 {
126 font-family: $font-barlow-sans;
127 line-height: 1;
128 font-size: 14px;
129 color: color("pure-navy");
130 font-weight: $font-weight-semi-bold;
131 letter-spacing: 0.05em;
132 @include media-breakpoint-up(lg) {
133 font-size: 16px;
134 }
135}
136@mixin tag-3 {
137 font-family: $font-barlow-sans;
138 line-height: 18px;
139 font-size: 14px;
140 color: color("pure-white");
141 font-weight: $font-weight-semi-bold;
142 letter-spacing: 3.6px;
143 @include media-breakpoint-up(lg) {
144 font-size: 18px;
145 }
146}These mixins can be used directly in your SASS, but are also bundled into a preset file that can be included in your project to set the default typography.
This is how these mixins are used in the typography scss