Design Specs
Typeface
Headings
InterParagraph
Inter| Type | 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.
Tables
Product Screenshots
Infographics
Email Subscription
The email subscription box is wisefully kept at the end of the article, and has a distinct design than rest of the article.
What We Like
Sprinto's blog design stands out in following ways:
- The content of the article is encapsulated in a block styled layout, which keeps reader concentrated throughout.
- CTAs to try out different features of Sprinto strategically align to the article's content. For example, if the article is about HIPAA compliance, then CTA copy is as written accordingly. This makes CTAs seamlessly blend with the article content.
- There are near zero distractions while reading or scrolling the article. It almost feels like you are reading the book.
