GETTING STARTED
CONTENT
UTILITIES
Menu

Font Size

You can browse this page to learn the font size properties of the template.

When designing this template, variable font weight was defined for later use. You can use these classes with any typographic element.

These classes are as follows;

These classes are predefined between 12 and 22. Understanding the class name. You can use it as {font}-{size}-{unit}, in short, f-s-16.

Syntax Example

<p class="f-s-12">text</p>

Font Size: 12

<p class="f-s-13">text</p>

Font Size: 13

<p class="f-s-14">text</p>

Font Size: 14

<p class="f-s-15">text</p>

Font Size: 15

<p class="f-s-16">text</p>

Font Size: 16

<p class="f-s-17">text</p>

Font Size: 17

<p class="f-s-18">text</p>

Font Size: 18

<p class="f-s-19">text</p>

Font Size: 19

<p class="f-s-20">text</p>

Font Size: 20

<p class="f-s-21">text</p>

Font Size: 21

<p class="f-s-22">text</p>

Font Size: 22

If you want, you can change these predefinitions from the scss/_theme-options.scss file.

								
$light: 300;
$normal: 400;
$semi: 600;
$bold: 700;
								
							

If you are not using SCSS, you can change the following section from the html/assets/css/theme.css file.

								
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-semi {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}