Typography in Design Systems

When we are in the process of creating a design system the question of code optimisation and mastering the best CSS approach becomes tricky.

The question that we are facing today is :

Whether we should use mixins or normal css classes for defining typography elements in our product ?

For those who doesn’t like reading but still spending time on Medium the answer is :

Use Css classes :)

So curious people out there who is reading this article, here are some arguments from our experiment

Using mixins in front end development gives us the feeling of a better control over the code as well as the flexibility. My first approach was obviously a vote for mixins. But after further investigation I found out that Bootstrap was using css variables nested inside classes.

Screen shot of Bootstrap’s _type.scss

Obviously everything depends on what you’d like to achieve, in our case we opted for having a SEO friendly generated code through all our pages and the classed approach was the best way to do this.

There are many situations where the markup should be different for SEO purposes in different pages (sometimes a title for an article is an h2, sometimes is an h1, and so on), and having the ability to keep consistency between these pages can be easily achieved by relying on classes rather than deep nested selectors, which are usually terrible to maintain and understand

My suggestion to every designer / developer asking these kind of questions is to always have a look at the final HTML&CSS rather than the what you are getting with non-compiled code.