Website: Fonts and Root

02. Fonts and Root

Set up the foundation of your styles

Mentor Seraphina

“Hiram, we need a proper :root and a clean base in the stylesheet. One that works and doesn’t look like someone cobbled it together in the darkroom.”
Seraphina leans against the table, arms crossed, as she brushes a glowing color palette onto parchment.

“We’re making a statement here. We need colors that sing, not whisper. A font that’s rebellious but readable. And a structure that feels just right.”

Your task

They are located in the fonts folder in WOFF and WOFF2 format.

Roboto Slab: RobotoSlab-SemiBold
Roboto Slab: RobotoSlab-Black
Roboto Condensed: RobotoCondensed-Regular
Roboto Condensed: RobotoCondensed-Bold
Roboto: Roboto-Regular
MaterialIconsRounded:
MaterialSymbolsRounded-VariableFont_FILL\,GRAD\,opsz\,wght.ttf

Powerful and expressive.

font-size-base: 1rem
font-size-large: 2.5rem
font-size-title: 1.5rem
line-height-normal: 1.7
line-height-small: 1.1
headline: ‘Roboto Condensed’, sans-serif
paragraph: ‘Roboto’, sans-serif
accent-font: ‘Roboto Slab’, serif
bold: bold

Die Seele der Rebellion

primary: #51301a
secondary: #b32e0f
dark: #1c1512
light: #faf5eb
highlight: #edb200
green: #2d7b09
transparent-dark: rgba(0, 0, 0, 0.4)

Ordered Aesthetic with Style

spacing-small: 0.5rem
spacing-base: 1rem
spacing-large: 2rem
spacing-extra-large: 6rem
border-small: 5px
border-large: 15px
border-round: 50%
shadow-light: 5px 5px 7px #0000003d
shadow-dark: 2px 2px 3px #000000

Solve the task here in the console [–> Open in a new tab]

CSS

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/RobotoSlab-SemiBold.woff2') format('woff2'),
        url('fonts/RobotoSlab-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/RobotoSlab-Black.woff2') format('woff2'),
        url('fonts/RobotoSlab-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('fonts/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Bold.woff2') format('woff2'),
        url('fonts/RobotoCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MaterialIconsRounded';
    src: url('fonts/MaterialSymbolsRounded-VariableFont_FILL\,GRAD\,opsz\,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ROOT */

:root {
    /* Colors */
    --primary: #51301a;
    --secondary: #b32e0f;
    --dark: #1c1512;
    --light: #faf5eb;
    --highlight: #edb200;
    --green: #2d7b09;
    --transparent-dark: rgba(0, 0, 0, 0.4);

    /* Fonts */
    --font-size-base: 1rem;
    --font-size-large: 2.5rem;
    --font-size-title: 1.5rem;
    --line-height-normal: 1.7;
    --line-height-small: 1.1;
    --headline: 'Roboto Condensed', sans-serif;
    --paragraph: 'Roboto', sans-serif;
    --accent-font: 'Roboto Slab', serif;
    --bold: bold;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-base: 1rem;
    --spacing-large: 2rem;
    --spacing-extra-large: 6rem;

    /* border-radius */
    --border-small: 5px;
    --border-large: 15px;
    --border-round: 50%;

    /* Shadows */
    --shadow-light: 5px 5px 7px #0000003d;
    --shadow-dark: 2px 2px 3px #000000;
}