Typography
Good use of typography makes it easier for customers to interact with a digital experience.
Luna’s typography principles
Characterful
Each brand has a unique font that forms a key part of its visual identity.Flexible
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.Responsive
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
| Name | Style | Font size | Line height | Responsive alternative for screens larger than 720px |
| Display 7 | Mary Ann Extra Bold | 62px | 76px | |
| Display 6 | Mary Ann Extra Bold | 50px | 62px | Display 7 |
| Display 5 | Mary Ann Extra Bold | 40px | 50px | Display 6 |
| Display 4 | Mary Ann Extra Bold | 32px | 40px | Display 5 |
| Display 3 | Mary Ann Extra Bold | 26px | 32px | Display 4 |
| Display 2 | Mary Ann Extra Bold | 22px | 26px | Display 3 |
| Display 1 | Mary Ann Extra Bold | 20px | 26px | Display 2 |
| Label 2 | Arial Bold | 16px | 24px | |
| Label 1 | Mary Ann Extra Bold | 18px | 24px | |
| Body 2 | Arial Regular | 18px | 26px | |
| Body 1 | Arial Regular | 16px | 24px | |
| Caption | Arial Regular | 14px | 22px |
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).
| Element | Suggested default display size | Alternative small display size |
| <h1> | Display 5 | Display 4 |
| <h2> | Display 4 | Display 3 |
| <h3> | Display 3 | Display 2 |
| <h4> | Display 2 | Display 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.