Good use of typography makes it easier for customers to interact with a digital experience.

Luna’s typography principles


Each brand has a unique font that forms a key part of its visual identity.


The Luna system does not set certain sizes or weights for specific headers. Sizes can be chosen for any semantic heading according to what works best for the design.


Luna typography automatically scales up and down to respond to different viewport sizes.

The Luna type system

Each brand that uses the Luna system has its own individual font. But they are all applied to the Luna system, which maps the font to a hierarchy from smallest (‘caption’) to largest (‘Display 7’) with a consistent line height.

Responsive behaviour

In line with mobile first principles, the table below shows how type appears on smaller screens using the web type stack. Each display option has a responsive alternative, which is the size it will adopt on screens larger than 720px.

Whilst these styles are responsive by default, you can prevent this behaviour if needed.

Web type stack

NameStyleFont sizeLine heightResponsive alternative for screens larger than 720px
Display 7Mary Ann Extra Bold
Display 6Mary Ann Extra Bold
Display 7
Display 5Mary Ann Extra Bold
Display 6
Display 4Mary Ann Extra Bold
Display 5
Display 3Mary Ann Extra Bold
Display 4
Display 2Mary Ann Extra Bold
Display 3
Display 1Mary Ann Extra Bold
Display 2
Label 2Arial Bold
Label 1Mary Ann Extra Bold
Body 2Arial Regular
Body 1Arial Regular
CaptionArial Regular

iOS type stack

If you're a Sainsbury's colleague, the iOS type stack for Sainsbury's and Argos can be accessed through Figma:

Android font stack

If you're a Sainsbury's colleague, the Android font stack for Sainsbury's and Argos can be accessed through Figma:

Accessing our fonts within Figma

If you're a Sainsbury's colleague, all our brand fonts are available to use within the 'Text Styles' feature in Figma.

Display sizes in action

Below we’ve set out some sensible starting points for when to use different display sizes. You’ll see that the largest size suggested is Display 5.

But remember that these are recommendations. There may be times when there’s a case to use different display sizes for headings, including Display 6 or 7. You’re free to do so according to the needs of your design and your users.

Suggested mapping of display sizes to headers

The table below shows how the type scale can be mapped to common HTML elements. There’s an alternative ‘small’ size mapping which may work better for more information dense screens (for example, some colleague applications).

ElementSuggested default display sizeAlternative small display size
<h1>Display 5Display 4
<h2>Display 4Display 3
<h3>Display 3Display 2
<h4>Display 2Display 1
<h5>Display 1
<body>Body 1

Tips for engineers implementing type

Using SASS

In Sass you can make use of the ln-font mixin to apply one of the type styles to a custom component (e.g. @include ln-font ('display-1');). Alternatively you can use the pithily named ln-font-size-and-line-height, which funnily enough just includes the font size and line-height properties without the family/weight/etc.

Using HTML

When building out HTML there is also a utility class for each of the type options. Making use of .ln-u-display-1, for example, will apply MaryAnn ExtraBold and the relevant font sizing to the element. In React you can similarly use the ≤Display1≥ component to apply this styling to its children.

Controlling the responsive style variant

To control when the responsive style variant is applied, you can change the value of $ln-fonts-scaled-breakpoint to a breakpoint option detailed on the layout page.

If you want to prevent text from scaling, there are fixed variants of both the mixins (ln-font-fixed) and utility classes (.ln-u-display-1-fixed) that will stay at the initial style regardless of screen size. When using the React components you can apply the ‘fixed’ prop (<Display1 fixed/>) to achieve this.

Was this page helpful?

Get in touch

We’re on hand to answer any questions you have or help you with your next project.