Typography

Font families

Type scale

The type scale is built on a modular ratio. Use semantic HTML elements (h1–h6, p) and Tailwind size classes to apply the scale. Tamil text uses font-tamil utility class and automatically receives a slightly increased line-height (1.8) for legibility.

Tamil-specific guidance

• Always apply font-tamil class (or lang="ta") to Tamil script text so the correct font renders.
• Line-Height Auto-Scaling: Tamil script diacritics and vowel markers (மாத்திரை) extend significantly above and below the baseline. Tamil DS automatically intercepts and scales Tailwind line-height classes (like leading-none, leading-tight, leading-snug, and numeric leadings leading-3 through leading-10) under the scope of lang="ta" and .font-tamil to safe minimum line-heights to prevent vertical line collisions.
• Avoid Container Height Clipping: Never use a combination of fixed heights (e.g., h-5, h-8, h-10) and overflow-hidden on boxes containing Tamil text. This will crop tall vowel markers (e.g. ி, ீ, ு, ூ, ்). Use h-fit or min-h-* with comfortable vertical padding (py-*) instead.
• Avoid tight arbitrary overrides: Do not hardcode tight custom line-height values (e.g., leading-[1.1]) on Tamil text blocks.
• Avoid all-caps for Tamil text — Tamil script has no uppercase/lowercase distinction and text-transform: uppercase will cause rendering errors.
• Body Tamil text at 16px/1rem meets minimum legibility thresholds. Do not go below 14px for paragraph Tamil.
• Tamil digits (௧ ௨ ௩) may be used for cultural emphasis but default to Arabic numerals (1 2 3) in data-heavy UI.

Usage in code

Apply fonts via Tailwind utilities: