Use display styles for the most prominent text on a page, such as hero headings and key statements.
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-font-size-display-lgsgds-font-weight-boldsgds-line-height-3-xlsgds-letter-spacing-tighterDisplay large light
Large expressive headings when the message needs scale with a softer tone.
sgds-font-size-display-lgsgds-font-weight-lightsgds-line-height-3-xlsgds-letter-spacing-tighterDisplay medium bold
Default display style for high-emphasis page titles and feature-led sections.
sgds-font-size-display-mdsgds-font-weight-boldsgds-line-height-2-xlsgds-letter-spacing-tighterDisplay medium light
Prominent titles that should feel spacious and less forceful than bold display text.
sgds-font-size-display-mdsgds-font-weight-lightsgds-line-height-2-xlsgds-letter-spacing-tighterDisplay small bold
Compact hero titles, feature headings, and strong editorial callouts.
sgds-font-size-display-smsgds-font-weight-boldsgds-line-height-xlsgds-letter-spacing-tighterDisplay small light
Display-level headings where hierarchy is needed without heavy visual weight.
sgds-font-size-display-smsgds-font-weight-lightsgds-line-height-xlsgds-letter-spacing-tighterThe Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.