Design System Fonts in Angular

A good methodology to fit them using Sass and Google Fonts

A nice agile team with the last visual prototype, you are the front developer in charge and you have to build fonts this week for the team.

I am going to show you how you can accelerate and automise several tasks to achieve this.

Introduction

Somewhere from UX:

Font descriptions in our System Design

Spartan will be used as a font and you can find it on Google Fonts

Spartan Google Fonts

and here it is

If you click on it you will be able to customise several things, but anyway it is very intuitive and easy to use.

For now we selected medium and bold and also checked. Then, they are ready to copy for our angular project.

Note that we use @import to incorporate with Sass

Using it

1. Incorporate to your angular project

I suppose you are using Sass/Scss if you use Css is quite similar. Another thing is that you are retrieving the font through internet, however it can be downloaded locally for improving time in requests (as a asset).

style.scss

...
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@500;700&display=swap');
...

2. Modify your angular.json to shortener import

angular.json

"build": { // also in "test": {
...
"styles": [
  "src/styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [ "src/assets/styles"]
},
"scripts": []
...

Then, instead of having

@import './../assets/styles/_fonts';

you will have

@import '_fonts';

3. Define the fonts

Have a look to one of our fonts

Example of font from our system design, note that I will use h1 as a name don’t confuse with h1 from html

Using mixin and includes we can achieve a more dry solution

_fonts.scss

@mixin font(
   $fontSize: medium,
   $fontWeight: medium,
   $lineHeight: normal,
   $letterSpacing: normal
) {
  font-size: $fontSize;
  font-weight: $fontWeight;
  font-family: 'Spartan', sans-serif;
  line-height: $lineHeight;
  letter-spacing: $letterSpacing;
}
.h1 {
  @include font(32px, bold, 36px, -1);
}
.h2 {
  @include font(20px, bold, 22px, -0.63);
}
.h3 {
  @include font(16px, bold, 24px, -0.8);
}
.h3-2 {
  @include font(12px, bold, 15px, -0.25);
}
.body1 {
  @include font(12px, medium, 15px, -0.25);
}
.body2 {
  @include font(11px, medium, 18px, -0.23);
}

4. Use it

Just apply the class to the element

<span class="h1">
     Aliquam porttitor mauris sit amet orci Aenean
</span>

I leave you here the final code so you can play with it a little bit

Conclusion

I hope I was able to show you the basics of the workflow between a Design System and Front (implementing the Font part relatively easy).

Also, the importance of having a good UX prototype and how you can reduce your code drastically using Angular and Sass.

It would be really nice to know how others achieve this kind of tasks in Angular or if there are other nice solutions.

Anyway, we will cover other interesting topics of Angular soon, so stay tuned!!!