Typography

The LIDL Font was developed for the various topics and applications of LIDL's brand communication and represents the brand values and the brand core on a typographical level.

It helps you to present your design and content as clearly and effectively as possible according to the LIDL standard.

LIDL Font Condensed Pro#

  • It looks informative, useful and efficient.
  • In combination, they represent the variety of topics and actions and, at the same time, are 100% LIDL.
  • Use any base color of brand-primary, danger, success, info or warning as text color as long as it has a high contrast ratio in interaction with backgrounds.
  • All types of headings should primarily be used in single line scenarios.
  • Capital letters are not allowed. The only exceptions are sections heads and buttons.

Regular
Semibold
Bold

 TypefaceText-styleUsage
Regular Small, Basic, Largefor body text, links, tables, lists, input-fields, etc.
SemiboldSmall Bold, Basic Bold, Large Bold, Headlines, Displays, Section head, Brand claim, Button textfor headlines, labels, highlights, etc.
BoldPricebox addon, Pricebox small, Pricebox mediummainly used for priceboxes and their addons

Small#

  • The typeface is always regular.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG14pxsmall regular (LG)
MD-XS12pxsmall regular (MD-XS)

Small bold#

  • The typeface is always semibold.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG14pxsmall bold (LG)
MD-XS12pxsmall bold (MD-XS)

Basic#

  • The typeface is always regular.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG18pxbasic regular (LG)
MD-XS16pxbasic regular (MD-XS)

Basic bold#

  • The typeface is always semibold.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG18pxbasic bold (LG)
MD-XS16pxbasic bold (MD-XS)

Large#

  • The typeface is always regular.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG22pxlarge regular (LG)
MD-XS20pxlarge regular (MD-XS)

Large bold#

  • The typeface is always semibold.
  • The line-height is 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG22pxlarge bold (LG)
MD-XS20pxlarge bold (MD-XS)

Brand claim#

  • Brand Claim is the company's customer approach.
  • It is positioned next to the LIDL logo in the header component.
  • The typeface is always semibold.
  • It is always shown in brand-primary-base.
  • The line-height is 120%.
BreakpointFont size Preview
LG18pxBrand claim (LG)
MD-XS16pxBrand claim (MD-XS)

Button text#

  • The text-style is only used in our button component.
  • The typeface is always semibold.
  • The line-height is 120%.
BreakpointFont size Preview
LG18pxButton text
MD-XS16pxButton text

Headlines#

  • The page headlines are displayed in 5 levels.
  • All levels have different font sizes.
  • There are fixed font sizes from level 5 to level 1.
  • The typeface is always semibold.
  • The line-height is 120%.
  • Left, center, and right alignment are available for all headline levels.

Headline (Level 1)#

BreakpointFont sizePreview
LG34pxheadline 1 (LG)
MD-XS32pxheadline 1 (MD-XS)

Headline (Level 2)#

BreakpointFont sizePreview
LG30pxheadline 2 (LG)
MD-XS28pxheadline 2 (MD-XS)

Headline (Level 3)#

BreakpointFont sizePreview
LG26pxheadline 3 (LG)
MD-XS24pxheadline 3 (MD-XS)

Headline (Level 4)#

BreakpointFont sizePreview
LG22pxheadline 4 (LG)
MD-XS20pxheadline 4 (MD-XS)

Headline (Level 5)#

BreakpointFont sizePreview
LG18pxheadline 5 (LG)
MD-XS16pxheadline 5 (MD-XS)

Displays#

  • The display text-style is defined in 5 levels.
  • All levels have different font sizes.
  • There are fixed font sizes from level 5 to level 1.
  • The typeface is always semibold.
  • The line-height is 120%.
  • Left, center, and right alignment are available for all display levels.

Display (Level 1)#

BreakpointFont sizePreview
LG56pxdisplay 1 (LG)
MD-XS32pxdisplay 1 (MD-XS)

Display (Level 2)#

BreakpointFont sizePreview
LG52pxdisplay 2 (LG)
MD-XS28pxdisplay 2 (MD-XS)

Display (Level 3)#

BreakpointFont sizePreview
LG48pxdisplay 3 (LG)
MD-XS24pxdisplay 3 (MD-XS)

Display (Level 4)#

BreakpointFont sizePreview
LG44pxdisplay 3 (LG)
MD-XS20pxdisplay 3 (MD-XS)

Display (Level 5)#

BreakpointFont sizePreview
LG40pxdisplay 3 (LG)
MD-XS16pxdisplay 3 (MD-XS)

Section head#

  • Section heads have only one size and font.
  • It matches level 4 of the headlines, but is written in capital letters.
  • The text of a section head is always centered on the screen.
  • The typeface is always semibold.
  • The line-height is 120%.
BreakpointFont sizePreview
LG22pxsection headline 1 (LG)
MD-XS20pxsection headline 1 (MD-XS)

Pricebox#

  • The line-height is 100%.

Addon#

  • The typeface is bold.
  • These font sizes are only used for additional text of our pricebox, i.e. prefix, currency, recommended retail price (rrp).
BreakpointFont size Preview
LG14pxPricebox - addon (LG)
MD-XS12pxPricebox - addon (MD-XS)

Basic quantity#

  • The typeface is regular.
  • These font sizes are only used for the basic quantity text of our pricebox.
  • The line-height is 120%.
BreakpointFont size Preview
LG12pxBasic quanitity (LG)
MD-XS10pxBasic quanitity (MD-XS)

Small#

  • The typeface is bold.
  • These font sizes are for a small pricebox which is used on our product tile on our search result page.
BreakpointFont size Preview
LG36pxPricebox - small (LG)
MD+SM28pxPricebox - small (MD+SM)
XS20pxPricebox - small (XS)

Label#

  • The typeface is bold.
  • These font sizes are for all priceboxes which use a label.
BreakpointFont size Preview
LG18pxPricebox - label (LG)
MD+SM16pxPricebox - label (MD+SM)
XS14pxPricebox - label (XS)

Medium#

  • The typeface is bold.
  • These font sizes are for a medium pricebox which is used on our product detail page.
BreakpointFont size Preview
LG44pxPricebox - medium (LG)
MD+SM36pxPricebox - medium (MD+SM)
XS28pxPricebox - medium (XS)

Lists#

  • Lists are used for text structuring.
TypeAttributesPreview
BulletsBulletpoints are special text characters whose form depends on the system.
Size and color depend on the font style of the copy text.		 lists: bullet
NumberedNumbers are text characters of the font.
Size and color depend on the font style of the copy text.		lists: numbered

Spacing & measurements#

TypeAttributesPreview
Vertical spacing 32px between headline (Level 1) and other headlines or body text.

16px between headline (Level 2) and other headlines or body text.

8px between headline (Level 3) and other headlines or body text.

32px between body text and body text or headlines.

8px between headline (Level 4) and other headlines or body text.

8px between headline (Level 5) and other headlines or body text.		spacing: forms
Vertical spacing 16px between section headline (Level 1) and body text.

32px between body text and body text or headlines.		spacing: forms

Our workflow#

  • All text styles are included in our CAKE UI Fundamental file.
  • Use only these styles!
  • The desired line-height can be calculated in your preferred tool in the line-height input field by using multiplication:
    • Font size * line height decimal number and then press enter. For example 120% line height for 18px text is calculated this way:
      18 * 1,2 = 21,6
      Line height calculation

Change log#

8.5.0 Fundamental & 8.5.0 Web - 2021-11-29#

Added#

  • Doc: "Typography" | Line height calculation is added to our workflow section

8.2.0 Fundamental & 8.2.0 Web - 2021-08-19#

Added#

  • Doc: "Typography" | Added font-weight to all the pricebox text styles

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "Typography" | Clean up the documentation for the right structure and sentence case

8.0.0 Fundamental & 8.0.0 Web - 2021-06-24#

Added#

  • Sketch, Doc: "Typography" | New basic quantity, label text-style is available

5.7.0 Fundamental & 5.7.0 Web - 2021-02-18#

Added#

  • "Typography" | Added text-alignment left, center, right: Small, Basic, Large, Display, Headline (LG & MD-XS)
  • "Typography" | Added text-style: display 1-5 (LG & MD-XS)
  • "Typography" | Added description: display

4.4.0 Core & 4.4.0 Web - 2020-04-09#

Added#

  • "Typography" | Added description: page headlines and section headlines always semibold

4.2.0 Core & 4.2.0 Web - 2020-01-16#

Added#

  • "Typography" | Added text-style: button (MD-XS)
  • "Typography" | Added description: guidelines for capital letters

3.2.2 Core & 3.2.2 Kit - 2019-07-04#

Fixed#

  • "Typography" | Fixed description: incorrect image path for numbered lists

3.2.1 Core & 3.2.1 Kit - 2019-06-26#

Fixed#

  • "Typography" | Fixed description of text-style "button-text": line-height specification from "140%"" to "120%"