Typography
Comprehensive typography system for MSQ mobile and admin applications. Includes English and Korean mobile typography using Poppins and Pretendard, and admin typography using Inter.
Note: Hover over any typography card to copy the CSS class. Each system includes display text, headings, and body text styles with complete specifications.
English Mobile Typography
Typography system for the English version of the MSQ mobile app using Poppins font family.
Font Family: Poppins, sans-serif
Regular (400)Medium (500)Semibold (600)Bold (700)
Headings
Heading 1
Title - H1
Font Size40px
Line Height48px
Letter Spacing-1.6px
Font Weight400
Heading 2
Title - H2
Font Size36px
Line Height40px
Letter Spacing-1.28px
Font Weight400
Heading 3
Title - H3
Font Size32px
Line Height36px
Letter Spacing-1.12px
Font Weight400
Heading 4
Heading - H4
Font Size28px
Line Height32px
Letter Spacing-0.96px
Font Weight400
Heading 5
Heading - H5
Font Size24px
Line Height28px
Letter Spacing-0.8px
Font Weight400
Heading 6
Heading - H6
Font Size20px
Line Height20px
Letter Spacing-0.64px
Font Weight400
Body Text
Body XLarge
Create a design playbook that outlines the department's expectations, best practices.
Font Size18px
Line Height28px
Letter Spacing-0.09px
Font Weight400
Body Large
Create a design playbook that outlines the department's expectations, best practices.
Font Size16px
Line Height24px
Letter Spacing-0.08px
Font Weight400
Body Medium
Create a design playbook that outlines the department's expectations, best practices.
Font Size16px
Line Height20px
Letter Spacing-0.07px
Font Weight400
Body Small
Create a design playbook that outlines the department's expectations, best practices.
Font Size14px
Line Height18px
Letter Spacing-0.06px
Font Weight400
Body XSmall
Create a design playbook that outlines the department's expectations, best practices.
Font Size12px
Line Height16px
Letter Spacing0px
Font Weight400
Label Text
Label text
Font Size16px
Line Height20px
Letter Spacing-0.07px
Font Weight400
Korean Mobile Typography
Typography system for the Korean version of the MSQ mobile app using Pretendard font family.
Font Family: Pretendard, sans-serif
Regular (400)Medium (500)Semibold (600)Bold (700)
Display
Display Large
๋ก๋ ์
์จ ํ
์คํธ
Font Size56px
Line Height72px
Letter Spacing-1.68px
Font Weight400
Display Small
๋ก๋ ์
์จ ํ
์คํธ
Font Size40px
Line Height52px
Letter Spacing-0.8px
Font Weight400
Headings
Title / H1
๋ก๋ ์
์จ ํ
์คํธ
Font Size32px
Line Height40px
Letter Spacing-0.64px
Font Weight400
Title / H2
๋ก๋ ์
์จ ํ
์คํธ
Font Size28px
Line Height36px
Letter Spacing-0.56px
Font Weight400
Title / H3
๋ก๋ ์
์จ ํ
์คํธ
Font Size24px
Line Height32px
Letter Spacing-0.48px
Font Weight400
Headings / H4
๋ก๋ ์
์จ ํ
์คํธ
Font Size20px
Line Height28px
Letter Spacing-0.4px
Font Weight400
Headings / H5
๋ก๋ ์
์จ ํ
์คํธ
Font Size16px
Line Height20px
Letter Spacing-0.32px
Font Weight400
Label / H6
๋ก๋ ์
์จ ํ
์คํธ
Font Size14px
Line Height20px
Letter Spacing0.14px
Font Weight400
Body Text
Body / Large
๋ก๋ ์
์จ ํ
์คํธ
Font Size16px
Line Height24px
Letter Spacing0.0057em
Font Weight400
Body / Medium
๋ก๋ ์
์จ ํ
์คํธ
Font Size16px
Line Height26px
Letter Spacing0.0057em
Font Weight400
Body / Small
๋ก๋ ์
์จ ํ
์คํธ
Font Size12px
Line Height18px
Letter Spacing0.0096em
Font Weight400
Admin Typography
Typography system for the MSQ admin app using Inter font family.
Font Family: Inter, sans-serif
Regular (400)Medium (500)Semibold (600)Bold (700)
Headings
Heading 1
Heading H1
Font Size32px
Line Height36px
Letter Spacing-0.64px
Font Weight400
Heading 2
Heading H4
Font Size28px
Line Height32px
Letter Spacing-0.56px
Font Weight400
Heading 3
Heading H5
Font Size24px
Line Height28px
Letter Spacing-0.48px
Font Weight400
Heading 4
Heading H4
Font Size20px
Line Height20px
Letter Spacing-0.4px
Font Weight400
Heading 5
Heading H5
Font Size16px
Line Height20px
Letter Spacing-0.32px
Font Weight400
Heading 6
Heading H6
Font Size14px
Line Height20px
Letter Spacing-0.32px
Font Weight400
Body Text
Body XLarge
Create a design playbook that outlines the department's expectations, best practices.
Font Size18px
Line Height28px
Letter Spacing0.288px
Font Weight400
Body Large
Create a design playbook that outlines the department's expectations, best practices.
Font Size16px
Line Height24px
Letter Spacing0.256px
Font Weight400
Body Medium
Create a design playbook that outlines the department's expectations, best practices.
Font Size16px
Line Height20px
Letter Spacing0.224px
Font Weight400
Body Small
Create a design playbook that outlines the department's expectations, best practices.
Font Size14px
Line Height18px
Letter Spacing0.192px
Font Weight400
Body XSmall
Create a design playbook that outlines the department's expectations, best practices.
Font Size12px
Line Height16px
Letter Spacing0.16px
Font Weight400