+
+ The line-height of typographic elements is an multiple of 6px on mobile and multiple of 8px
+ on desktop. In addition to line-height, baselines are adjusted with vertical padding
+ (the sum of those paddings will be 6px on mobile or 8px on desktop). As a result one can
+ position following typographic elements with margins that are also multiples of 6px (or 8px).
+
+
+ N.B. box-sizing is border-box, so borders affect to the total height of elements.
+
+
+ TODO: breakpoints for desktop are missing (desktop fonts needs to be extracted.
+
+
+
(H1 (.h1Font): Lorem ipsum dolor sit amet
)}
+ description="Biggest font style. Used in main heading on a page. "
+ styling={h1FontStyling}
+ />
+ (H2 (.h2Font): Lorem ipsum dolor sit amet
)}
+ description="Works as a subtitle. Inline component using .h2Font can be aligned with .h1Font to the same baseline by dropping it 18px (e.g. with margin-top)."
+ styling={h2FontStyling}
+ />
+ (H3 (.h3Font): Lorem ipsum dolor sit amet
)}
+ description="Works as a subtitle and in sidebar menu."
+ styling={h3FontStyling}
+ />
+ (H4 (.h4Font): Lorem ipsum dolor sit amet
)}
+ description="Works as a subtitle."
+ styling={h4FontStyling}
+ />
+ (H5 (.h5Font): Lorem ipsum dolor sit amet
)}
+ description="Can be used as a subtitle and also as a label font for form inputs."
+ styling={h5FontStyling}
+ />
+ (H6 (.h6Font): Lorem ipsum dolor sit amet consectetur adebisci velit
)}
+ description="Works as a subtitle."
+ styling={h6FontStyling}
+ />
+ (Default font (.bodyFont, p, button, etc.): Lorem ipsum dolor sit amet
)}
+ description="Paragraphs and other body texts."
+ styling={bodyFontStyling}
+ />
+ (Tiny mobile text (.tinyFont): Lorem ipsum dolor sit amet
)}
+ description="Very small print."
+ styling={tinyFontStyling}
+ />
+
+