Nuxeo Design Guidelines

Typography

Updated: May 10, 2021

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.

We'd love to hear your thoughts!

All fields required