Typeface: Inter
--nuxeo-app-font: 'Inter', Arial, sans-serif;
Type Scale
The default pixel size is 13px.
| Scale category | Weight | Size (pt/px/rem) | Letter-spacing | Line-height | Usage |
|---|---|---|---|---|---|
| Headline 1 | 400/Regular | 32px/2.46rem | 0px | 40px/3.08rem | For layout headings. |
| Headline 2 | 400/Regular | 28px/2.15rem | 0px | 36px/2.77rem | For layout headings. |
| Headline 3 | 400/Regular | 20px/1.54rem | 0px | 26px/2rem | For component and layout headings. |
| Headline 4 | 600/Semi-Bold | 16px/1.23rem | 0px | 22px/1.69rem | For component and layout headings. |
| Headline 5 | 700/Bold | 14px/1.08rem | .24px | 20px/1.54rem | For component and layout subtitles. |
| Headline 6 | 600/Semi-Bold | 14px/1.08rem | .16px | 20px/1.54rem | For component and layout subtitles. |
| Body-01 | 400/Regular | 13px/1rem | .16px | 20px/1.54rem | For paragraphs. It is a good size for comfortable, long-form reading. Used for body copy in components. |
| Caption | 400/Regular | 10px/.77rem | .32px | 16px/1.23rem | For explanatory helper text that appears below a field title within a component. |
(Once we change to default pixel size 14px.):
| Scale category | Weight | Size (pt/px/rem) | Letter-spacing | Line-height | Usage |
|---|---|---|---|---|---|
| Headline 1 | 400/Regular | 32px/2.28rem | 0px | 40px/2.86rem | For layout headings. |
| Headline 2 | 400/Regular | 28px/2rem | 0px | 36px/2.57rem | For layout headings. |
| Headline 3 | 400/Regular | 20px/1.43rem | 0px | 26px/1.86rem | For component and layout headings. |
| Headline 4 | 600/Semi-Bold | 16px/1.14rem | 0px | 22px/1.57rem | For component and layout headings. |
| Headline 5 | 700/Bold | 14px/1rem | .24px | 20px/1.43rem | For component and layout subtitles. |
| Headline 6 | 600/Semi-Bold | 14px/1rem | .16px | 20px/1.43rem | For component and layout subtitles. |
| Body-01 | 400/Regular | 14px/1rem | .16px | 20px/1.43rem | For paragraphs. It is a good size for comfortable, long-form reading. Used for body copy in components. |
| Caption | 400/Regular | 12px/.86rem | .32px | 16px/1.14rem | For explanatory helper text that appears below a field title within a component. |