Scratch – text measure

Continuing my incremental NetNewsWire theme build. Version 11 (Scratch – post header) styled the post header and finessed links and rules.

I’ve been sitting on this new version, using it while I ponder the next focus. Well past due time to share the current increment.

Back pedalling on the style overrides

Previously I applied an aggressive !important to unset inline styles in feed content. This ultimately caused more trouble than it solved. To compromise I’ve kept the width override to ensure that otherwise fixed width content remains responsive.

More space

Although readable, the text felt cramped – particularly on my little phone. To add some air the global line-height has been increased. For similar effect I’ve also increased the page gutters.

The reduction of text density is most noticeable using small text on a larger screen. In this context you’ll see I’ve also added a limit to the length of the text measure.

For the sake of readability, increasing the line-height helps. However, an over-large line-height results in lines that feel disconnected from one another. Large line spaces also make the use of larger margins to help distinguish headings less effective.

Had to draw the line somewhere.

Nudge third level headings

Squished ’em a little for a more typographic affinity with the proceeding levels.

Ordered lists

For contrast, I found one opportunity to tighten some space. Specifically the left indent alongside short ordered lists. Ordered lists with ten or greater items get a slightly larger space to ensure space for two digits.

ol:not(:has(> li:nth-child(10))) {
	padding-inline-start: 2.1ch;
}
ol:has(> li:nth-child(10)) {
	padding-inline-start: 3.1ch;
}

Ain’t CSS lovely.

NewNewsWire 7

I’m thrilled to see NetNewsWire grow up with Brent’s ongoing care. I share a fondness for his cause to help lift the RSS boats. Between this post and my previous – NetNewsWire has turned 23 years old and released version 7:

Both of these require version 26+ of their respective OS’s – into which I’m yet to venture. As a result I have not seen NetNewsWire in liquid glass beyond the odd screenshot, let alone how the Scratch theme looks in it. I am not anticipating issues or even a need to make changes. Feedback is welcome.

Install

To enable a quick switch between different versions of this theme I’ve generated a zip of each version – incorporating the version number in the name:

Get the latest version on the Scratch project page.