Typography
A clear standard for font style, size, and spacing to ensure readability and consistency across government platforms, supporting accessible and user-friendly text presentation.
Heading
Poppins font family is used for home page section titles, page headers, and important text elements to create a clear visual hierarchy and improve user navigation. Not applicable for rich-text.
Font size and weight
Each sizes includes font weight in Regular (400), Medium (500), and Semibold (600).
| Name | HTML Tag | Font Size | Line Height |
|---|---|---|---|
| Heading Extra Large | 60px (3.75rem) | 72px (4.5rem) | |
| Heading Large | 48px (3rem) | 60px (3.75rem) | |
| Heading Medium | <h1> | 36px (2.25rem) | 44px (2.75rem) |
| Heading Small | <h2> | 30px (1.875rem) | 38px (2.375rem) |
| Heading Extra Small | <h3> | 24px (1.5rem) | 32px (2rem) |
| Heading 2X Small | <h4> | 20px (1.25rem) | 28px (1.75rem) |
| Heading 3X Small | <h5> | 16px (1rem) | 24px (1.5rem) |
| Heading 4X Small | <h6> | 14px (0.875) | 20px (1.25rem) |
Body
Inter font family is used for paragraphs, descriptions, and general content to provide a comfortable reading experience for users.
Font size and weight
Each sizes includes font weight in Regular (400), Medium (500), and Semibold (600).
| Name | Font Size | Line Height | List Spacing | Paragraph Spacing |
|---|---|---|---|---|
| Body 6X Large | 60px (3.75rem) | 72px (4.5rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body 5X Large | 48px (3rem) | 60px (3.75rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body 4X Large | 36px (2.25rem) | 44px (2.75rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body 3X Large | 30px (1.875rem) | 38px (2.375rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body 2X Large | 24px (1.5rem) | 32px (2rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body Extra Large | 20px (1.25rem) | 28px (1.75rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body Large | 18px (1.125rem) | 26px (1.625rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body Medium | 16px (1rem) | 24px (1.5rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body Small | 14px (0.875) | 20px (1.25rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body Extra Small | 12px (0.75rem) | 18px (1.125rem) | 6px (0.375rem) | 12px (0.75rem) |
| Body 2X Small | 10px (0.625rem) | 12px (0.75rem) | 6px (0.375rem) | 12px (0.75rem) |
Rich Text Format (RTF)
Inter font family is used for styling long form content such as an article.
Note: The H1 tag in Rich Text Format (RTF) differs from the standard H1 Heading tag. This styling is intended solely for formatting content within an article section.
Font size and weight
Each sizes includes font weight in Regular (400) and Semibold (600) only.
| Name | HTML Tag | Font Size | Line Height | List Spacing | Paragraph Spacing |
|---|---|---|---|---|---|
| Heading 1 | <h1> | 30px (1.875rem) | 38px (2.375rem) | 6px (0.375rem) | 12px (0.75rem) |
| Heading 2 | <h2> | 24px (1.5rem) | 32px (2rem) | 6px (0.375rem) | 12px (0.75rem) |
| Heading 3 | <h3> | 20px (1.25rem) | 28px (1.75rem) | 6px (0.375rem) | 12px (0.75rem) |
| Heading 4 | <h4> | 18px (1.125rem) | 26px (1.625rem) | 6px (0.375rem) | 12px (0.75rem) |
| Heading 5 | <h5> | 16px (1rem) | 24px (1.5rem) | 6px (0.375rem) | 12px (0.75rem) |
| Heading 6 | <h6> | 14px (0.875rem) | 20px (1.25rem) | 6px (0.375rem) | 12px (0.75rem) |
| Paragraph | <p> | 16px (1rem) | 28px (1.75rem) | 6px (0.375rem) | 28px (1.75rem) |