Scratch – article font size

Posted
27 April 2025

Continuing my incremental NetNewsWire theme build. Version 1 laid down the HTML template. Todays addition caters for your font size selection.

NetNewsWire is available on Mac and iOS and custom themes may be installed on both. The font sizing mechanism differs between the two.

Font sizing on iOS

iOS offers what Apple calls Dynamic Type as a means for developers to make their apps use the font size settings defined in the system accessibility settings. On my iPhone this is found in Settings > Accessibility > Display & Text Size > Larger Text.

On iOS, NetNewsWire exposes the specified font size as a number that substitutes the template variable [[font-size]] in your theme stylesheet.css.

Used thus:

body {
	font-size: [[font-size]]px;
}

Troubleshooting tip: NetNewsWire doesn’t yet allow us to inspect the article web view with dev tools. To see the substituted value (and that of other template variables) check out a NetNewsWire theme I built for this purpose: Template Variables.

On Mac this CSS remains unchanged as above. Fortunately the CSS parsing will ignore the invalid value.

Font sizing on MacOS

Dynamic Type doesn’t seem to be a thing on MacOS. However, NetNewsWire on Mac has it’s own setting that allows us to fiddle with font size used in the article view.

Again this variable is exposed to the theme author as a template variable [[text_size_class]]. Unlike on iOS, this variable is substituted within template.html and it’s value is not a number – it’s a class name.

The selected Article Text Size setting maps to a corresponding class:

It’s up to the theme to provide the CSS to assigns an appropriate sizing for each.

WCAG 2.1 success criterion 1.4.4 Resize text stipulates that we need to enable the font size to be doubled.

My sizing scale is therefore anchored at 200% for Extra Extra Large, and 100% for medium:

.smallText {
	font-size: 90%;
}

.mediumText {
	font-size: 100%;
}

.largeText {
	font-size: 125%;
}

.xLargeText {
	font-size: 150%;
}

.xxLargeText {
	font-size: 200%;
}

In the template I have already included this template variable in the <header> and <main> elements. So that the text in both can respond accordingly.

On iOS [[text_size_class]] is replaced with a empty string so there is no chance these approaches overlapping.

Beyond base sizing

I’ll get around to finessing the heading size hierarchy later when considering font choices. Until then, headings are sized as per default Safari browser styles. These use percentages and thus remain relative to the text size the theme has defined.

The one browser default size I’m overriding is for tables. Defining inherit here ensures table cell text size responds in the same manner as the headings.

table {
	font-size: inherit;
}

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.

Theme name tip: NetNewsWire uses the .nnwtheme file name to name the theme in the theme select, not the name in the Info.plist. Similarly NetNewsWire does nothing (yet) with the version number.

Next up

There’s lots to do, but one option is particularly glaring… Dark mode.