Video Overview

Fonts

You can add custom fonts by either saving the font files in the static/assets/fonts folder & using an @font-face import, or by linking to an external stylesheet such as Adobe Fonts or Google Fonts.

Once fonts are added set them as Root Variables for use within your CSS.

:root {
    --soliel: soleil, sans-serif;
    --helvetica: helvetica, sans-serif;
}

Root HTML Styles

Base text styles for the project are declared against the HTML attribute using the Root Font Variables. Because these control the html attribute they will become the default font settings inherited by all website text unless you specify otherwise.

The size of all other text will be specified relative to the html font-size attribute so it should always be set to an absolute value. Line-height and letter-spacing should be specified using a relative value in em so they are responsive.

:root {
    --html-font-family: sans-serif;
    --html-font-size: 18px;
    --html-font-weight: 300;
    --html-font-style: normal;
    --html-line-height: 1.8em;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--black);
}

Heading Styles

Font styles for the H1 - H6 heading elements are controlled using the Root Font Variables. By default only font-size, font-weight and line-height vary with all other attributes being inherited from the Root HTML Styles specified above.

The font-size for headings should always be specified as relative to the --html--font-size variable using a size in rem. Line-height and letter-spacing should still be specified using a relative value in em.

:root {
    --h1-font-family: inherit;
    --h1-font-size: 2.5rem;
    --h1-font-weight: 700;
    --h1-font-style: inherit;
    --h1-line-height: 1.3em;
    --h1-letter-spacing: inherit;
    --h1-text-transform: inherit;
    --h1-text-decoration: inherit;
    --h1-color: inherit;
}

Responsive

Because all font-size, line-height and letter-spacing attributes in the project are specified in relative measurements (rem & em) they will all adjust proportionally when the base HTML font-size is changed.

The Framework uses Media Queries to responsively adjust only the --html--font-size variable at each breakpoint. This in turn changes all relative attributes without the need for additional CSS.

@media only screen and (max-width: 1100px) {
    :root {
        --html-font-size: 17px;
    }
}

Additional Customisation

The default configuration of the Framework maintains the same proportions of text, line height & letter spacing on all screen sizes. There may however be occasions where additional customisation is needed, for example to change the relative size of the H1 - H6 items to the base html font size for a given breakpoint.

This can be achieved by adding a custom media query to the style.css stylesheet to adjust the desired root variable.

@media only screen and (max-width: 501px) {
    :root {
        --h1-font-size: 2rem;
    }
}