Design Specs
Typeface
Headings
InterParagraph
InterType | Font Size ( In Pixels ) | Weight | Line Spacing ( In Pixels ) |
---|---|---|---|
H1 | 40 | 700 | 52 |
H2 | 30 | 700 | 40 |
H3 | 22 | 700 | 32 |
H4 | - | - | - |
Paragraph | 18 | 400 | 32 |
Color
Heading
0E0B3DParagraph
0E0B3DLink Hover
0068FAArticle Hero
Sprinto has adopted a rather simple but intuitive approach to their hero section.
It features the blog title, author name, date of publishing, and then opens up with the introduction.
On the right sidebar, it shows articles you may like, social share buttons and a CTA to one of their services. The good part is it is not sticky.
Article Body
Sprinto has played a bit conservative when it comes to limiting the width of the article body. It's just 854 px wide, including all the padding and margins.
Inter is one of the best choices for paragraph fonts here, as it provides for excellent readability, even with smaller font size. But Sprinto has ensured to keep the fonts bit bigger for better viewing experience especially on mobile devices.
TL;DR
Some articles have a TL;DR section added just after the intro paragraph. The typeface - "Courier" carry a pre-formatted styling which makes it stand out from the contemporary Inter.
Table of Contents
The table of contents is included in the article body itself, and are not shown separately on the sidebar.
Custom Blocks
Certain articles contain custom blocks meant to highlight key points, pro tips and in some cases to showcase Sprinto Advantage.
Blog Imagery
Featured Image
Sprinto follows its brand style guide and creates custom featured images for each of their articles.
Those featured images bear the title of the article with company logo and website URL.
This makes their blog hub beautiful and cohesive.
In-content Images
To expand and illustrate their content better, Sprinto uses a combination of custom designed images which includes tables, infographics and their products' screenshots.