TiddlyWiki Legibility Tip: font-size

Did you know that you can set your TiddlyWiki font using the latest in accessibility CSS?

<!--more-->

Simply go to $:/ControlPanel > Appearance > Theme Tweaks > Settings and set the following:

• Font size: clamp(12px, 1.2vw + 0.5rem, 16px)
• Line height: 1.5
• Font size for tiddler body: clamp(14px, 1.5vw + 0.5rem, 16px)
• Line height for tiddler body: 1.7

Basically, what clamp(12px, 1.2vw + 0.5rem, 16px) is saying is to set the minimum font size to 12px and the maximum to 16px. Depending on the viewport, adjust the font sizes by 1.2vw + 0.5rem. While for the content, it's clamp(14px, 1.5vw + 0.5rem, 16px), same as the default but the minimum font size is 14px.

These are good settings for the following reasons:

• It is flexible to the viewport size
• It is small screen friendly, minimum font size of 14px for the content while 12px for everything else
• It is good for desktop and larger screens with a maximum of 16px
• The user can still zoom or set their own user font size

Why 14px and 12px?

• 12px is the generally accepted hard size for minimum font legibility
• 14px is the recommended minimum font size for reading

Any smaller than these is generally hard for adults and senior citizens, and thus, not good for accessibility.

Why 16px?

16px is the most common default browser size and what we are used to when surfing the net. 18px is also a good choice if one wants to give more larger font size for larger screens, but unfortunately for tablet devices, even a small one, they go by the maximum 18px if in landscape mode.

Of course, if one wants to, it is possible to resolve this by adding viewport-based CSS, but that is beyond the scope of this blog post.

Line height

I found 1.5 is excellent for clamp(12px, 1.2vw + 0.5rem, 16px) (UI elements) while 1.7 for clamp(14px, 1.5vw + 0.5rem, 16px) (reading). This is a personal preference. However, do note that if you're writing using various scripts—Hangeul, Nihongo, Baybayin, Hebrew, Phoenician, Latin/Roman—the line height should match each script otherwise it she glyphs might cramp together and make it harder to read in small viewports or consume too much space in larger screens.

For example:

• Latin/Roman script: 1.5 is good as a minimum
• Hangeul and Nihongo: 1.6
• Baybayin: 1.7
• Hebrew and Phoenician: 1.7

That's it for this quick, no-edit blog post!

**

<!-- / SPDX-SnippetBegin / / SPDX-SnippetCopyrightText: © 2025 JC John Sese Cuneta <https://im.youronly.one/p/contact-us/> · Yelosan Publishing. SPDX-License-Identifier: BSD-3-Clause / --> <footer class="h-entry copyright calcopyright" prefix="spdx: http://spdx.org/rdf/terms#" property="copyrightNotice" typeof="CreativeWork" vocab="http://schema.org/" style="padding: 1rem; border-top: 1px solid; margin-top: 2rem;"><small style="font-size: clamp(0.7rem, 0.8rem + 0.2vw, 1rem);"> «<cite class="calwork" lang="en-PH" property="name" typeof="CreativeWork" style="font-style: normal;"><a class="h-card p-name u-url" href="https://dalisay.youronly.one" property="url" title="Guhit Dalisay (구힛 달리사이): The Wayfarer's Frozen Codex" typeof="WebSite" style="color: unset; text-decoration: underline;">Guhit Dalisay (구힛 달리사이): The Wayfarer's Frozen Codex</a></cite>» © <time datetime="2026" property="copyrightYear">2026</time> <span class="cal__source" lang="fil" property="author" typeof="Person" style="text-transform: capitalize;"><a class="h-card p-author p-name u-url" href="https://iam.youronly.one" property="name url" rel="author noopener noreferrer" title="Yohan Yukiya Sese Cuneta" style="color: unset; text-decoration: underline;">Yohan Yukiya Sese Cuneta</a></span>.<br> License: <span class="u-license" property="license" typeof="spdx:License"><a href="https://creativecommons.org/licenses/by-sa/4.0/" property="spdx:name" rel="license spdx:CC-BY-SA-4.0" title="Attribution-ShareAlike 4.0 International (SPDX-License-Identifier: CC-BY-SA-4.0)" style="color: unset; text-decoration: underline;">Attribution-ShareAlike 4.0 International</a></span> (<span class="u-license" property="license" typeof="spdx:License"><a href="https://creativecommons.org/licenses/by-sa/4.0/" property="spdx:licenseId" rel="license spdx:CC-BY-SA-4.0" title="Attribution-ShareAlike 4.0 International (SPDX-License-Identifier: CC-BY-SA-4.0)" style="color: unset; text-decoration: underline;">CC-BY-SA-4.0</a></span>), except otherwise noted. </small></footer> <!-- / SPDX-SnippetEnd */ -->