Paragraph

Paragraphs <p> describe the main structure of a text.

As all other font sizes relate to the base font size, defined in :root (16px) Paragraphs (1rem) and all other sizes should be defined in rem or em. In that way, on smaller (or huge) screens, you can simply adjust the font size in :root and all others will adapt.

In paragraphs you can also use bold (<strong>) text and italic (<em>) text.

There is also a <small> text size defined, for footnotes or similar.

Typography

In addition to these semantic and technical rules, all the specifications of our general typography naturally apply.

See it in action

bodytext (p) - Lorem ipsum dolor sit amet consectetur. Imperdiet vitae purus ut viverra massa facilisi massa eget. Orci vitae turpis praesent pretium congue ut eu ullamcorper mi. Amet sagittis euismod est sit pharetra urna venenatis.
Est eget gravida sit rhoncus purus massa nibh semper. Pellentesque amet eu a volutpat tincidunt dignissim vitae eget. Consectetur tincidunt tincidunt natoque risus. Urna at commodo bibendum vulputate et viverra nulla in. Bibendum eget sed massa ac sit elit id sed.

Noto Sans – Regular (400) – size: 16px | 1rem, line-height: 24px | 1.5rem

strong - Lorem ipsum dolor sit amet consectetur. Imperdiet vitae purus ut viverra massa facilisi massa eget. Orci vitae turpis praesent pretium congue ut eu ullamcorper mi. Amet sagittis euismod est sit pharetra urna venenatis.

Noto Sans – Bold (700) – size: 16px | 1rem, line-height: 24px | 1.5rem

em - Lorem ipsum dolor sit amet consectetur. Imperdiet vitae purus ut viverra massa facilisi massa eget. Orci vitae turpis praesent pretium congue ut eu ullamcorper mi. Amet sagittis euismod est sit pharetra urna venenatis.

Noto Sans – Italic (400) – size: 16px | 1rem, line-height: 24px | 1.5rem

small - Lorem ipsum dolor sit amet consectetur. Imperdiet vitae purus ut viverra massa facilisi massa eget. Orci vitae turpis praesent pretium congue ut eu ullamcorper mi. Amet sagittis euismod est sit pharetra urna venenatis.

Noto Sans – Regular (400) – size: 12px | 0.75rem, line-height: 24px | 1.5rem

CSS

body {
    font-family: 'Noto Sans', 'Segoe UI', 'Helvetica Neue', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.5rem;
}
strong { font-weight: 700; }
em { font-style: italic; }
small, .small { font-size: 0.75em; }
p { margin-top: 1.5rem; }