Comfortable Reading Typography for Posts (SCSS)
Tunes the line length, line height and spacing of headings, paragraphs and lists inside blog posts for long-form reading.
Opens WPIDE on
Code
$measure: 68ch;
$line-height: 1.7;
$flow: 1.25em;
.single-post {
.entry-content,
.wp-block-post-content {
line-height: $line-height;
> p,
> ul,
> ol,
> blockquote {
max-width: $measure;
}
> * + * {
margin-top: $flow;
}
h2,
h3,
h4 {
margin-top: $flow * 2;
margin-bottom: $flow * 0.5;
line-height: 1.25;
}
li + li {
margin-top: 0.4em;
}
}
}Notes
The measure limits the width of text blocks; wide and full-width blocks are not affected.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.