Typography

Overview

How to use

Browse the examples below and choose the arrangement that fits your content. Expand Build this example to see the Sitefinity widget, layout, content fields, and appearance settings. Add the widget to your page, follow the setup instructions, and preview on desktop and mobile before publishing.

Heading Level 1. 68px. 76 line height. Bold.

Heading 1 • 68/76

Heading Level 2. 44px. 52 line height. Bold.

Heading 2 • 44/52

Heading Level 3. 36px. 44 line height. Bold.

Heading 3 • 36/44

Heading Level 4. 24px. 32 line height. Bold.

Heading 4 • 24/32

Default Body. 18px. 26 line height. Regular.
Default Body • 18/26

Lorem ipsum dolor sit amet consectetur. Feugiat elementum ut pharetra congue. Sit nibh morbi egestas tellus ac arcu. Viverra arcu euismod quis integer lorem. Lectus ut dictum eget orci accumsan scelerisque. Pharetra diam quis lorem morbi suspendisse vel ipsum nunc gravida. Sagittis malesuada lacus velit fames iaculis. Eget proin nec diam montes orci nisi mi commodo. Adipiscing mauris eget nulla arcu ornare ut a. Enim cursus purus mattis massa diam ac.
Body 34. 34px. 42 line height. Regular.
Body 34 • 34/42
Lorem ipsum dolor sit amet consectetur. Feugiat elementum ut pharetra congue. Sit nibh morbi egestas tellus ac arcu. Viverra arcu euismod quis integer lorem. Lectus ut dictum eget orci accumsan scelerisque. Pharetra diam quis lorem morbi suspendisse vel ipsum nunc gravida. Sagittis malesuada lacus velit fames iaculis. Eget proin nec diam montes orci nisi mi commodo. Adipiscing mauris eget nulla arcu ornare ut a. Enim cursus purus mattis massa diam ac.
Body 22. 22px. 32 line height. Regular.

Body 22 • 22/32
Lorem ipsum dolor sit amet consectetur. Feugiat elementum ut pharetra congue. Sit nibh morbi egestas tellus ac arcu. Viverra arcu euismod quis integer lorem. Lectus ut dictum eget orci accumsan scelerisque. Pharetra diam quis lorem morbi suspendisse vel ipsum nunc gravida. Sagittis malesuada lacus velit fames iaculis. Eget proin nec diam montes orci nisi mi commodo. Adipiscing mauris eget nulla arcu ornare ut a. Enim cursus purus mattis massa diam ac.

Body 14. 14px. 20 line height. Regular.

Body 14 • 14/20
Lorem ipsum dolor sit amet consectetur. Feugiat elementum ut pharetra congue. Sit nibh morbi egestas tellus ac arcu. Viverra arcu euismod quis integer lorem. Lectus ut dictum eget orci accumsan scelerisque. Pharetra diam quis lorem morbi suspendisse vel ipsum nunc gravida. Sagittis malesuada lacus velit fames iaculis. Eget proin nec diam montes orci nisi mi commodo. Adipiscing mauris eget nulla arcu ornare ut a. Enim cursus purus mattis massa diam ac.

Body CTA. 18px. 20 line height. Bold.
Body CTA • 18/20
Lorem ipsum dolor sit amet consectetur. Feugiat elementum ut pharetra congue. Sit nibh morbi egestas tellus ac arcu. Viverra arcu euismod quis integer lorem. Lectus ut dictum eget orci accumsan scelerisque. Pharetra diam quis lorem morbi suspendisse vel ipsum nunc gravida. Sagittis malesuada lacus velit fames iaculis. Eget proin nec diam montes orci nisi mi commodo. Adipiscing mauris eget nulla arcu ornare ut a. Enim cursus purus mattis massa diam ac.