Typography

By default the general typography follows Bootstrap 5's styling. When using heading tags for example, no additional style is defined.

Heading Example
<h1></h1>

h1. Heading

<h2></h2>

h2. Heading

<h3></h3>

h3. Heading

<h4></h4>

h4. Heading

<h5></h5>
h5. Heading
<h6></h6>
h6. Heading

Text Style

To get the theme style in the texts, it is necessary to assign classes to the elements. This is uniquely defined in the file theme.css

In this file you can change absolutely all the typography of the theme.

.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }

Note that you can use style classes on any text element, as in the following example where the classes text-style-1 and text-style-3 are used to form a block of text.

<h1 class="title white">
  <span class="text-1 text-style-1 text-outline">Lorem ipsum</span>
  <span class="text-2 text-style-3 text-italic">dolor sit amet <mark class="animated-underline tertiary">dictum</mark>.</span>
</h1>

Font Family

The font family is certainly one of the most important parts of a design concept. All the necessary configuration is set in the file font-family.css and defined as primary and secondary fonts in the file theme.css as you can see below.

:root {
  --primary-font: lato, sans-serif;
  --secondary-font: proxima-nova, sans-serif;
}

Shock Theme uses only two fonts from the Adobe Typekit that we feel are ideal for the overall design of the theme. If you want to change this, or add new font families, we recommend that you read this article from Google Fonts

1
Lato
Ab
2
Proxima Nova
Ab