Typography
Typography establishes hierarchy and trust. In government services, clarity is not optional — every citizen, regardless of literacy level, device or connectivity, must be able to read and act on what they see.
Principles
Three rules behind every type decision.
Optimise for readability
Every size, weight and line-height decision serves the reader first. Decorative or arbitrary type choices undermine trust in government interfaces.
Communicate hierarchy clearly
Use the type scale to signal importance — not color alone. Any UX4G screen should be scannable; the user should know what to read first.
Accessible for everyone
UX4G serves citizens across all literacy levels, device types and network conditions. Type decisions meet WCAG 2.1 AA and GIGW 3.0 minimum sizes.
Typefaces
Two families, each with a role. Both cover Hindi and English.
Type scale mirrors the Figma spec; heading font family is under review.
Noto Sans
UI typeface · all product interfaces
--ux4g-font-family-baseDesigned by Google to render text in all scripts. "Noto" stands for "No Tofu" — the blank boxes (□) shown when a font lacks a character. Noto Sans renders consistently in Hindi and English.
Weights: Regular 400 · Medium 500 · Semibold 600 · Bold 700. Used for all headings, body text, labels and UI.
Noto Sans Display
Display typeface · Display styles only (36px+)
--ux4g-font-family-displayAn optical variant of Noto Sans tuned for large display sizes, with slightly more refined stroke contrast and wider tracking so headings stay legible at scale. Reserve it for the Display category; everything else uses the base family.
Weights: Semibold 600 · Bold 700.
Font stack
/* Base — all UI text */
font-family: "Noto Sans", system-ui, sans-serif;
/* Display — large editorial headings only */
font-family: "Noto Sans Display", "Noto Sans", sans-serif;
Type scale
Five style categories, each with a fixed scale. Toggle Default / Strong on any style to switch between its lighter and heavier weight.
Display
Noto Sans Display.ux4g-display-l-defaultHero banners — exceptional, full-page landing only
.ux4g-display-m-defaultLarge campaign or section hero headings
.ux4g-display-s-defaultSection title on a dashboard landing
.ux4g-display-xs-defaultSection-level hero in compact layouts
Heading
Noto Sans.ux4g-heading-xxl-default<h1>Top-level page title (form, dashboard, landing)
.ux4g-heading-xl-default<h1–h2>Primary section heading
.ux4g-heading-l-default<h2>Secondary section heading
.ux4g-heading-m-default<h3>Card title, panel heading
.ux4g-heading-s-default<h4>Sub-section heading
.ux4g-heading-xs-default<h5>Small heading, grouped fields title
.ux4g-heading-xxs-default<h6>Smallest heading — sidebar label, data table column header
Title
Noto Sans.ux4g-title-l-defaultComponent title in a card or modal
.ux4g-title-m-defaultForm section title
.ux4g-title-s-defaultSmall label-weight title, button group heading
Body
Noto Sans.ux4g-body-l-defaultLong-form instructions, multi-paragraph content
.ux4g-body-m-defaultDefault body text for most UI
.ux4g-body-s-defaultHelper text, secondary descriptions
.ux4g-body-xs-defaultCaptions, legal text, timestamps — minimum usable size
Label
Noto Sans.ux4g-label-xl-defaultForm field labels (default)
.ux4g-label-l-defaultSecondary labels, table column headers
.ux4g-label-m-defaultBadge text, chip labels, tag text
.ux4g-label-s-defaultMicro labels — status tags, compact data; use sparingly
Font weights
Four weights. Use them sparingly — visual emphasis only works if it's rare.
Aa
Regular 400
Body text, descriptions, form labels
Aa
Medium 500
Labels, UI controls, navigation items
Aa
Semibold 600
Sub-headings, emphasis, navigation
Aa
Bold 700
Headings, page titles, CTAs
Usage guidance
Quick-reference card for the most-asked designer question — "which style do I use here?"
| If you need… | Use this |
|---|---|
| Page or screen title (main h1) | Heading/XXL · Heading/XL |
| Section heading (primary division) | Heading/L · Heading/M |
| Card or panel title | Heading/M · Title/L |
| Form section title | Title/M |
| Form field label | Label/XL · Label/L |
| Default body / paragraph text | Body/M Default |
| Instructions / longer copy | Body/L Default |
| Helper text below an input | Body/S Default |
| Caption, timestamp, legal text | Body/XS Default |
| Button label | Label/XL Strong |
| Badge, chip or tag text | Label/M · Label/S Strong |
| Navigation item | Label/XL Default |
| Data table column header | Heading/XXS · Label/L |
| Large display / campaign hero | Display/S · Display/XS |
Responsive behaviour
UX4G type tokens are currently fixed at all breakpoints. At small breakpoints (≤576px) and below, reduce Display and large Heading styles to keep mobile legible.
| Style | Desktop | Recommended mobile |
|---|---|---|
| Display/L | 60px | 40px (Display/S) |
| Display/M | 52px | 36px (Display/XS) |
| Display/S | 40px | 36px (Display/XS) |
| Heading/XXL | 40px | 32px (Heading/XL) |
| Heading/XL | 32px | 28px (Heading/L) |
| Heading/L | 28px | 24px (Heading/M) |
Body, Label and Title styles render well at every breakpoint without adjustment. Token-level responsive scaling is on the UX4G roadmap.
Accessibility
GIGW 3.0 and WCAG 2.1 AA are mandatory for all Government of India digital services. Type sizes and structure must clear these thresholds.
| Rule | Why |
|---|---|
| Minimum body size 16px (absolute floor 12px) | Smaller text fails AA for many readers |
| Line height ≥ 1.5× the font size for body text | WCAG 1.4.12 — spacing for low-vision readers |
| Don't override letter-spacing into unreadable values | Custom tracking breaks legibility for dyslexic readers |
| Text resizes to 200% without loss of content | WCAG 1.4.4 — browser zoom must work |
Heading level rules
- Use only one <h1> per page — typically the page title.
- Use heading levels in descending order. Don't skip (no h2 → h4).
- Use headings for structure, not visual appearance. For a heading look without semantic meaning, use a Title or Label style.
- Screen reader users navigate by headings — correct semantic structure is as important as color contrast.
Line length & readability
Aim for 50–90 characters per line, including spaces. Shorter lines are easier to track from line end to line start; very long lines increase reading fatigue.
✓ Optimal (max-width: 720px)
Government digital services must be accessible to all citizens regardless of their technical literacy, language preference, or assistive technology needs.
✗ Too wide (no max-width)
When text spans the full width of a large monitor it becomes extremely difficult to track from the end of one line to the beginning of the next, which significantly reduces reading speed and comprehension for all users — especially those with cognitive disabilities or reading difficulties.
Hindi Typography
Hindi script requires additional line-height and careful font selection for readability.
Devanagari (Hindi)
डिजिटल भारत पोर्टल
Line-height: 1.8 (increased for ascenders/descenders)
Dos and Don'ts
Seven common decisions, summarised.
Dos
- Use Heading/2XL for the single h1 page title
- Use heading levels in order (h1 → h2 → h3)
- Use Body/M Default as the default reading text
- Use Label/XL for form field labels
- Use the Strong variant for emphasis within a size
- Use rem-based sizes — let browser zoom work
- Use Display styles only for large hero contexts
Don'ts
- Use multiple h1s on one page
- Skip heading levels for visual effect
- Use sizes smaller than 12px for any text
- Use Heading/XS as a form label (wrong semantic role)
- Increase font size to add emphasis
- Hard-code px values that block user zoom
- Use Display for body content or normal page headings