Typography

Documentation and examples for CAKE typography, including global settings, headings, body text, lists, and more.

Global settings#

CAKE sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

  • For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
  • Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
  • Set the global link color via $link-color and apply link underlines only on :hover.
  • Use $body-bg to set a background-color on the <body> (#fff by default).

These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss. Make sure to set $font-size-base in rem.

Font family#

The $font-family-sans-serif variable is used to set the general font-family. By default we set this to our own font LidlFontCondPro. Additionally we set the two fallback fonts Calibri followed by Arial. This is in accordance with the design guidelines that must be applied to every Lidl project. Subsequently, further browser and operating system specific fallback fonts are defined.

Font weight#

The regular font weight: 400 uses LidlFontCondPro-Regular. We use semi-bold font variant for bold styling. Please use font-weight: 600 for bold style. To be able to use also font-weight: bold, we match the semi-bold font variant also to the font-weight: 700 value. We prefere to use the 600 value instead of bold. If you use Sass you can use the $font-weight-bold variable which also has a value of 600.

The LidlFontCondPro-Bold is available in font-weight: 800 extra-bold styling for the Pricebox.

Headings#

All HTML headings, <h1> through <h5>, are available.

Display#

If you need a heading to stand out, we recommend the .display-1 to .display-5 classes.

preview

<div class="display-1">Display 1</div>
<div class="display-2">Display 2</div>
<div class="display-3">Display 3</div>
<div class="display-4">Display 4</div>
<div class="display-5">Display 5</div>

Links#

preview

<a href="#">This is a Link</a>

To place links on darker backgrounds simply use the .negative variant of our links.

preview

<a class="link-negative" href="#">This is a negative Link</a>

Lists#

preview

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit<ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Unstyled list#

preview

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit<ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Responsive font sizes#

CAKE ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling CAKE.

To support RFS, we use a Sass mixin to replace our normal font-size properties. Responsive font sizes will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior. More about RFS and its configuration can be found on its GitHub repository.

custom fonts and $fonts-to-load#

If you need to add new fonts please use the variable $fonts-to-load. With this variable it is possible to generate a complete set of fonts. It is a comma seperated list of font properties. The properties representing a string list of params like: font family name, file name, font weight (default: normal), font style (default: normal), font path (defaulted by the variable $font-path). A mixin is generating the @cake-font-face's. You don't have to use all 5 properties every time, at least the first two parameters are required.

$fonts-to-load:     LidlFontCondPro LidlFontCondPro-Regular,
                    LidlFontCondPro LidlFontCondPro-Semibold 600,
                    LidlFontCondPro LidlFontCondPro-Semibold 700, // to match with `bold`
                    LidlFontCondPro LidlFontCondPro-Bold 800; // to match with `extra bold`

Mixed fonts are also possible:

$fonts-to-load:     MyFont MyFontCondPro-italic notmal italic "../myFonts/",
                    Roboto roboto-v19-latin-regular,
                    Roboto roboto-v19-latin-700 700;

Change log#

6.0.1 - 2021-06-24#

Changed#

  • Doc, SCSS: "Typography" | Update font-family definition ($font-family-sans-serif) by adding additional fallback-fonts Calibri, Arial directly after the default font-family LidlFontCondPro

5.1.0 - 2021-03-22#

Added#

  • Doc, SCSS: "Typography" | added .display-1 to .display-5 to theme

5.0.0 - 2021-01-28#

Changed#

  • Doc, SCSS: "Typography" | Rename font-face mixin to cake-font-face
  • Doc, SCSS: "Typography" | Rename build-font-faces mixin to cake-build-font-faces

4.3.0 - 2020-09-24#

Added#

  • Doc, SCSS: "Typography" | Added negative link styling

4.0.0 - 2020-06-25#

Changed#

  • SCSS: "Typography" | renamed _typography-content.scss to _typography.scss
  • SCSS: "Typography" | the import of typography-font-face SCSS file takes now place in the cake.scss file

3.6.0 - 2019-08-15#

Added#

  • Doc: "Typography" | fonts-to-load discription added