Typography
The default theme provides a set of styles and font sizes that work well together and with the layout grid. For details on creating or using themes, refer to Themes and styles.
The default font sizes from the typography object are displayed in the following example.
In the following code block, you can see the default typography object with all its properties:
RequestResponse
{
typography: {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "14px",
"lineHeight": "24px",
"fontWeight": "300",
"fontSize1": {
"fontSize": "12px",
"fontWeight": "400",
"lineHeight": "24px"
},
"fontSize2": {
"fontSize": "14px",
"fontWeight": "400",
"lineHeight": "24px"
},
"fontSize3": {
"fontSize": "16px",
"fontWeight": "400",
"lineHeight": "32px"
},
"fontSize4": {
"fontSize": "18px",
"fontWeight": "400",
"lineHeight": "32px"
},
"fontSize5": {
"fontSize": "20px",
"fontWeight": "400",
"lineHeight": "40px"
},
"fontSize6": {
"fontSize": "22px",
"fontWeight": "400",
"lineHeight": "40px"
},
"fontSize7": {
"fontSize": "24px",
"fontWeight": "400",
"lineHeight": "48px"
},
"fontSize8": {
"fontSize": "26px",
"fontWeight": "400",
"lineHeight": "48px"
},
"h1": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "28px",
"fontWeight": "400",
"lineHeight": "40px"
},
"h2": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "24px",
"fontWeight": "400",
"lineHeight": "36px"
},
"h3": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "20px",
"fontWeight": "400",
"lineHeight": "32px"
},
"h4": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "18px",
"fontWeight": "500",
"lineHeight": "28px"
},
"h5": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "16px",
"fontWeight": "500",
"lineHeight": "24px"
},
"h6": {
"fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
"fontSize": "14px",
"fontWeight": "500",
"lineHeight": "20px"
}
}
});