This is the second post about creating a Design System for my project. Last time I selected colors for my project and made 8 variants of those colors in SCSS. Today I will be going through the Typography part of the Design System. We have to look for following things when setting up our typography design.
- Fonts to use
- Type Size & Scale
- Responsiveness
- And spacing
This part is all about picking Fonts and setting sizes and weight of those fonts in various place of use for better readability and style. So the first part in this section is picking the fonts for your project.
Picking Fonts
This might be the hardest part of the Typography section as there are thousands of fonts out there are if you are like me when ever you see a new font you just donwload it and install it in your computer thinking that you will use it one day in one of your projects but we all know that that day will never not come.
When picking fonts it is suggested to use only two to three fonts at the most in your projects. The reason for this is that you don't have to load too many fonts and the other that I can think of is that it makes our desing more clean.
In terms of picking fonts for your projects you can look up Google Fonts. Its a very helpful website and I use it always for fonts for my projects. If you select a font and scroll down you will find that there is a section down there which tells you what font to use with the font you have selected here.
My Choices
For this blog and the portfolio website I selected Meriweather as a secondary font from the Google Fonts and in the pairings section one of the suggestions was Montserrat so I picked Montserrat for the primary font.
Primary font is the most used font in your project also know as the body font and secondary font is for mainly headings and maybe somehwhere else you want to. You can do as you want with this but it is just what I prefer.
$font-primary: "Montserrat", sans-serif;
$font-secondary: "Merriweather", serif;
Font Base & Sizes
Now the next thing we need is the font base according to which all the font sizes of all the elements like h1 and so will be setup.
// Variables.scss
$font-base-size: 1rem;
$font-size-sm: $font-base-size * 0.875;
$font-size-lg: $font-base-size * 1.25;
$font-size-h1: $font-base-size * 2.5;
$font-size-h2: $font-base-size * 2;
$font-size-h3: $font-base-size * 1.75;
$font-size-h4: $font-base-size * 1.5;
$font-size-h5: $font-base-size * 1.25;
$font-size-h6: $font-base-size;
$line-height: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
Using a base-size now we can change the size of all the elements by only changing the value of the base-size. Note that in the sizes I am using rem units instead of px or em.
Using Rem Units
rem units scale according to the font size of the root element. For example if the roor element is 16 pixels then 1 rem equals 16px and if the root element font size is 18px then 1rem equals 18px and so on. On the other hand em unit scales according to the font size of the parent element. That means that if the parnet element be it a div or span has a font size of 20px then 2em equals 20px.
There is no particular reason for me using it other than that it feels easeier to work with rem units now that I have gotten used to them.
Font Spacing
Now that we have setup the font sizing of most of the elements now come the part to decide what spacing/margins should they all have. First of all we need to setup a baseline and that will be 24px and why it is 24px is because of a concept called Vertical Rythem. You can read more about Vertical Rythem here in this Article.
$space-base: 24px;
We create a baseline and from that we will define the small, medium, large and extra large baselines and use them according to the element.
$space-sm: $space-base / 2;
$space-md: $space-base;
$space-lg: $space-base * 2;
$space-xl: $space-base * 3;
Now using these we will add margin bottom to the type elements of HTML mainly headings and paragraph tags.
h1,
h2 {
margin-bottom: $space-lg;
}
h3,
h4,
h5,
h6,
p {
margin-bottom: $space-md;
}
zainsci