Redefine default heading values in Grommet theme #5469
Labels
design
Design and/or UX
documentation
Add the documentation for something
enhancement
New feature or request
Package
Choose from the list:
Is your feature request related to a problem? Please describe.
The default font sizes are poorly defined. This list should help organize our defaults
Describe the solution you'd like
The defaults should be:
S
Heading 1: 1.5rem (24px)
Heading 2: 1.15rem (18px)
Heading 3: 1rem (16px)
Heading 4: .75rem (12px)
Paragraph: .75rem (12px)
Text: .625rem (10px)
M
Heading 1: 2rem (32px)
Heading 2: 1.5rem (24px)
Heading 3: 1.15rem (18px)
Heading 4: 1rem (16px)
Paragraph: 1rem (16px)
Text: .75rem (12px)
L
Heading 1: 2.25rem (36px)
Heading 2: 2rem (32px)
Heading 3: 1.5rem (24px)
Heading 4: 1.15rem (18px)
Paragraph: 1.15rem (18px)
Text: .875rem (14px)
XL
Heading 1: 3rem (48px)
Heading 2: 2.25rem (36px)
Heading 3: 2rem (32px)
Heading 4: 1.5rem (24px)
Paragraph: 1.5rem (24px)
Text: 1rem (16px)
Note specific font styling:
Headings: Bold, 5% letter spacing
Paragraph: Medium
Text: Medium
For the time being, this does not touch on breakpoint values.
Grommet theme for reference
Additional context
Link to Github repos using the FEM Grommet theme: https://github.com/zooniverse/front-end-monorepo/network/dependents
The text was updated successfully, but these errors were encountered: