Display styles are predefined combinations of typography variables for large expressive headings, so you do not need to choose each value individually.
Display styles are used for the most prominent text on a page, such as hero headings, landing page statements, and other moments where strong visual emphasis is needed.
Display large bold
Strongest page moments, including hero statements and campaign-level messages.
sgds:text-display-lgsgds:font-boldsgds:leading-3-xlsgds:tracking-tighterDisplay large light
Large expressive headings when the message needs scale with a softer tone.
sgds:text-display-lgsgds:font-lightsgds:leading-3-xlsgds:tracking-tighterDisplay medium bold
Default display style for high-emphasis page titles and feature-led sections.
sgds:text-display-mdsgds:font-boldsgds:leading-2-xlsgds:tracking-tighterDisplay medium light
Prominent titles that should feel spacious and less forceful than bold display text.
sgds:text-display-mdsgds:font-lightsgds:leading-2-xlsgds:tracking-tighterDisplay small bold
Compact hero titles, feature headings, and strong editorial callouts.
sgds:text-display-smsgds:font-boldsgds:leading-xlsgds:tracking-tighterDisplay small light
Display-level headings where hierarchy is needed without heavy visual weight.
sgds:text-display-smsgds:font-lightsgds:leading-xlsgds:tracking-tighterThe Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.