Use heading styles to structure pages, introduce sections, and help readers scan content.
Heading styles are used to organise page structure and content hierarchy. They work best for section titles, page headers, and other navigational or structural headings.
Heading XL bold
Top-level page headings when a strong structural title is needed.
sgds-font-size-heading-xlsgds-font-weight-boldsgds-line-height-xlsgds-letter-spacing-tightHeading XL light
Top-level headings that stay prominent with a lighter voice.
sgds-font-size-heading-xlsgds-font-weight-lightsgds-line-height-xlsgds-letter-spacing-tightHeading large bold
Major section headings or page areas that need clear separation.
sgds-font-size-heading-lgsgds-font-weight-boldsgds-line-height-lgsgds-letter-spacing-tightHeading large light
Major headings when the surrounding layout already provides strong hierarchy.
sgds-font-size-heading-lgsgds-font-weight-lightsgds-line-height-lgsgds-letter-spacing-tightHeading medium semibold
Default heading style for section titles and common content hierarchy.
sgds-font-size-heading-mdsgds-font-weight-semiboldsgds-line-height-mdsgds-letter-spacing-tightHeading medium light
Medium headings that need a quieter relationship with nearby content.
sgds-font-size-heading-mdsgds-font-weight-lightsgds-line-height-mdsgds-letter-spacing-tightHeading small semibold
Smaller section headings, grouped content titles, and card headings.
sgds-font-size-heading-smsgds-font-weight-semiboldsgds-line-height-smsgds-letter-spacing-tightHeading small light
Small headings where the hierarchy should stay subtle.
sgds-font-size-heading-smsgds-font-weight-lightsgds-line-height-smsgds-letter-spacing-tightThe Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.