Font Presets

It can be hard to manage all different font-styles in your website. Font-Presets help you with this. Centralizing all different font-styles at one place.

Whether want to apply a font-style directly in your html code or include a font-style in your custom SCSS code. Font-presets supports it. Also by using font-preset you can use advanced vertical alignment classes such as .align-baseline.

Adding a new font-preset

Adding a new font-preset is easy. Open the 1.settings/_font-presets.scss file from your repository. Don't have a font-preset file yet? Learn how to integrate the font-preset here

You will see a code just like this:


 







$font-presets: (
	// -> add your new font-preset here
	xlarge:(//Mostly used for H1
		font-size: (1.5rem, 2.25rem, 3rem),
		line-height: (3su, 4su, 5su),
		font: secondary
	),
	//...

Now add your own Font-Preset using the following format:


 
 
 
 
 



$font-presets: (
	your-custom-name:( // Your custom font-preset
		font-size: (1.5rem, 2.25rem, 3rem),
		line-height: (3su, 4su, 5su),
		font: secondary
	),
	xlarge:(//Mostly used for H1
	//...

(array) font-size: ($value, $value, $value, etc)

Add a font-size value for each viewport configurated in 1.settings/viewports.scss (small, medium, large).

(array) line-height: ($value, $value, $value, etc)

Add a line-height value for each viewport. You need to use space-units here in order to align with the Space-Unit grid and to use Vertical Alignment Classes

(string) font: (optional)

Add a font from the list in 1.settings/fonts.scss/. It wil use the default font by default

Changing a font-preset

Changing a font-preset is easy, just change the name, font-size, line-height or fonts however you want it.

Note: when you change the name of the preset. You have to refactor the classes and mixin you already used for that font-preset.