Puppertino

/

Examples

/

Layout

Layout

Text is the motor of websites and apps. Without them there would be no actual usage for them. So in Puppertino we created a font sizing to rule them all. Puppertino includes a base font called Inter. We also have included a curated list of font sizes. You can use the layout component using the CSS of Layout or downloading the full CSS (Not recommended if you are just going to use this component).

Aa
Inter

The font is defined in every CSS that exists, it can be change easily if you desire to use another one.

Layout.

We have included a curated list of font sizes for you to use based on human guidelines and transformed into rem for accesibility. You can use all of these font sizes just by adding the p-layout class to your body tag. And it looks like this:

Title 1 (h1)

Title 2 (h2)

Title 3 (h3)

Content (p)

Other classes.

There also are other classes that feature other optional sizes. These sizes can come in handy in other types of scenarios.

Large Title (p-large-title)

Title 3 (p-headline)

Callout (p-callout)

Subhead (p-subhead)

Footnote (p-footnote)

Caption (p-caption)