v5.26.5

🔤 Typography

Heading styles and font weights for consistent typography throughout the design system

Overview

The Etihad Design System provides a carefully crafted typography system with multiple heading levels and font weights. These classes ensure consistent text styling across all components and pages.

Key Features

  • ✅ 6 heading levels (H1 - H6)
  • ✅ 5 font weights (Light, Book, Text, Medium, Bold)
  • ✅ Consistent sizing and spacing
  • ✅ Professional typography hierarchy
  • ✅ Responsive text sizes

Font Weight Variations

All heading and text elements can be styled with 5 different font weights:

Type CSS Class Font Weight Desktop Size Desktop Line Height Mobile Size Mobile Line Height
📌 Heading Levels
H1 ey-heading-1 ey-font__light 250 60px 80px 32px 48px

Heading H1
H2 ey-heading-2 ey-font__light 250 48px 64px 28px 40px

Heading H2
H3 ey-heading-3 ey-font__light 250 40px 48px 24px 32px

Heading H3
H4 ey-heading-4 ey-font__light 250 32px 40px 22px 32px

Heading H4
H5 ey-heading-5 ey-font__light 250 24px 32px 20px 24px

Heading H5
H6 ey-heading-6 ey-font__light 250 20px 24px 18px 24px

Heading H6
📝 Body Text
Large ey-font__light--large 250 18px 24px 18px 24px

Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large

Medium ey-font__light--medium 250 16px 24px 16px 24px

Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium

Small ey-font__light--small 250 14px 20px 14px 20px

Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small

XS ey-font__light--xsmall 250 12px 16px 12px 16px

Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small

XXS ey-font__light--xxsmall 250 11px 16px 11px 16px

Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small

Type CSS Class Font Weight Desktop Size Desktop Line Height Mobile Size Mobile Line Height
📌 Heading Levels
H1 ey-heading-1 ey-font__book 350 60px 80px 32px 48px

Heading H1
H2 ey-heading-2 ey-font__book 350 48px 64px 28px 40px

Heading H2
H3 ey-heading-3 ey-font__book 350 40px 48px 24px 32px

Heading H3
H4 ey-heading-4 ey-font__book 350 32px 40px 22px 32px

Heading H4
H5 ey-heading-5 ey-font__book 350 24px 32px 20px 24px

Heading H5
H6 ey-heading-6 ey-font__book 350 20px 24px 18px 24px

Heading H6
📝 Body Text
Large ey-font__book--large 350 18px 24px 18px 24px

Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large

Medium ey-font__book--medium 350 16px 24px 16px 24px

Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium

Small ey-font__book--small 350 14px 20px 14px 20px

Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small

XS ey-font__book--xsmall 350 12px 16px 12px 16px

Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small

XXS ey-font__book--xxsmall 350 11px 16px 11px 16px

Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small

Type CSS Class Font Weight Desktop Size Desktop Line Height Mobile Size Mobile Line Height
📌 Heading Levels
H1 ey-heading-1 ey-font__text 400 60px 80px 32px 48px

Heading H1
H2 ey-heading-2 ey-font__text 400 48px 64px 28px 40px

Heading H2
H3 ey-heading-3 ey-font__text 400 40px 48px 24px 32px

Heading H3
H4 ey-heading-4 ey-font__text 400 32px 40px 22px 32px

Heading H4
H5 ey-heading-5 ey-font__text 400 24px 32px 20px 24px

Heading H5
H6 ey-heading-6 ey-font__text 400 20px 24px 18px 24px

Heading H6
📝 Body Text
Large ey-font__text--large 400 18px 24px 18px 24px

Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large

Medium ey-font__text--medium 400 16px 24px 16px 24px

Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium

Small ey-font__text--small 400 14px 20px 14px 20px

Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small

XS ey-font__text--xsmall 400 12px 16px 12px 16px

Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small

XXS ey-font__text--xxsmall 400 11px 16px 11px 16px

Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small

Type CSS Class Font Weight Desktop Size Desktop Line Height Mobile Size Mobile Line Height
📌 Heading Levels
H1 ey-heading-1 ey-font__medium 500 60px 80px 32px 48px

Heading H1
H2 ey-heading-2 ey-font__medium 500 48px 64px 28px 40px

Heading H2
H3 ey-heading-3 ey-font__medium 500 40px 48px 24px 32px

Heading H3
H4 ey-heading-4 ey-font__medium 500 32px 40px 22px 32px

Heading H4
H5 ey-heading-5 ey-font__medium 500 24px 32px 20px 24px

Heading H5
H6 ey-heading-6 ey-font__medium 500 20px 24px 18px 24px

Heading H6
📝 Body Text
Large ey-font__medium--large 500 18px 24px 18px 24px

Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large

Medium ey-font__medium--medium 500 16px 24px 16px 24px

Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium

Small ey-font__medium--small 500 14px 20px 14px 20px

Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small

XS ey-font__medium--xsmall 500 12px 16px 12px 16px

Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small

XXS ey-font__medium--xxsmall 500 11px 16px 11px 16px

Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small

Type CSS Class Font Weight Desktop Size Desktop Line Height Mobile Size Mobile Line Height
📌 Heading Levels
H1 ey-heading-1 ey-font__bold 700 60px 80px 32px 48px

Heading H1
H2 ey-heading-2 ey-font__bold 700 48px 64px 28px 40px

Heading H2
H3 ey-heading-3 ey-font__bold 700 40px 48px 24px 32px

Heading H3
H4 ey-heading-4 ey-font__bold 700 32px 40px 22px 32px

Heading H4
H5 ey-heading-5 ey-font__bold 700 24px 32px 20px 24px

Heading H5
H6 ey-heading-6 ey-font__bold 700 20px 24px 18px 24px

Heading H6
📝 Body Text
Large ey-font__bold--large 700 18px 24px 18px 24px

Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large Body Large

Medium ey-font__bold--medium 700 16px 24px 16px 24px

Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium Body Medium

Small ey-font__bold--small 700 14px 20px 14px 20px

Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small Body Small

XS ey-font__bold--xsmall 700 12px 16px 12px 16px

Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small Body Xtra Small

XXS ey-font__bold--xxsmall 700 11px 16px 11px 16px

Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small Body XXtra Small