General concept
Typography is divided into Headings and Body texts
Headings
A "Headline" is a prominent title or heading used to introduce or summarize content in a webpage, article, or document. It is typically larger, bolder, and more visually distinct than other text on the page, drawing attention to the main topic or message. Headlines serve to grab the reader's attention, convey the main idea, and provide structure to the content, making it easier to scan and understand.
- Headings are responzive texts with specific values for all breakpoints (mobile, tablet, desktop)
- It's not connected with h1, h2, etc. in the code. You can use h1 with Heading Small and also h1 with Heading Large
Body texts
"Body text" refers to the main content of a document, webpage, or publication, typically consisting of paragraphs, sentences, or blocks of text. It serves to convey information, provide details, and communicate ideas to the reader. Body text is typically formatted in a legible font and size, making it easy to read and comprehend. It constitutes the bulk of the content and is usually separated from headings, subheadings, and other structural elements within the document.
- Body texts are no responsive
- Body texts use font family Inter
- Component sizes are derived from body text line heights