Reading on a Screen

This page demonstrates the Lectio Bear theme designed by Zachary Taylor.

Theme: GitHub · License: MIT

On-Screen Legibility

How to make text easier and more comfortable to read on screens is not a settled issue. Designers have traditionally adapted print methods — column layouts, baseline grids, type scales — to organize digital text. However, because screens vary widely in size, lighting conditions, and viewing distance, a few fundamental principles are often more useful than relying on a single technique.

Typography

The body copy uses Georgia, a typeface designed by Matthew Carter in 1993. Unlike many serif fonts adapted from print, Georgia was designed to remain clear and legible even at low resolutions.

Headings and all interface chrome use DM Sans, a geometric sans-serif with variable weights. This pairing is a classic choice: serif for extended reading and sans-serif for orientation and navigation.

A few properties that matter for long-form reading:

Line height: set to 1.7, slightly above the conventional 1.5. The extra leading gives the eye a clear path to follow.
Measure: the column is capped at 720px, approximately 70–75 characters per line at body size. Longer lines increase the distance the eye must travel between line ends, while shorter lines disrupt the rhythm.
Font size: 1.08em (~17.3px), a small but meaningful step up from the browser's 16px default.

Heading Levels

This is an h3. It uses the same DM Sans typeface as h1 and h2, scaled down proportionally. All headings include letter-spacing: -0.02em to tighten spacing and make it appear intentional rather than default at display sizes.

Blockquote

The book is a machine for reading.

— Umberto Eco (paraphrase)

Blockquotes use a left border with --border-color, italicized text, and --blockquote-color. This slightly muted tone distinguishes quoted material from primary text without obscuring it.

Aside

The theme includes a custom .aside class for notes that aren't quotations. The styling resembles a blockquote.

Using blockquotes for non-quotation text can cause accessibility issues for screen readers and other assistive technologies. The .aside class resolves this problem.

However, Markdown doesn't have an aside syntax element. Since BearBlog passes through HTML in Markdown, asides are created with an HTML block:

Note: This principle applies to paragraph text. Display type follows different conventions.

Be aware: Because .aside is an HTML block, standard Markdown syntax such as **bold** is not processed within it. Use HTML inline elements instead: <strong>, <em>, <code>, etc.

Table

Several fonts widely used in the early web era now feel dated, while others still work well.

Typeface	Designer	Year	Notes
Georgia	Matthew Carter	1993	Still an excellent screen serif
Verdana	Matthew Carter	1996	Optimized for low-res; feels too wide on modern displays
Trebuchet MS	Vincent Connare	1996	Holds up reasonably well at small sizes
Times New Roman	Monotype / Stanley Morison	1931	Adapted from print; not designed for screens
DM Sans	Colophon Foundry	2018	Variable; excellent at both display and UI sizes

Code

Inline code uses a monospace font such as SFMono-Regular, Consolas, and Menlo, with a lightly tinted background to distinguish it from surrounding text.

Code blocks use the .highlight or .code class, and BearBlog automatically applies these classes to fenced code blocks:

font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.95em;
padding: 2px 5px;

Lists

An unordered list of principles that generally apply across most reading contexts:

Line length matters more than most designers assume.
Contrast should be high but not absolute. Pure black on pure white is harsher than it needs to be.
The color of visited links is an underused feature.
Motion effects should be behind prefers-reduced-motion, since not all users want animated interfaces.

An ordered list for a process or sequence:

Define a type scale before adjusting individual element sizes
Set line height and measure before adjusting color
Test in both light and dark modes from the start, not as an afterthought
Check contrast ratios with a tool. Human perception is not a reliable instrument.

Links and Visited State

Links appear in --link-color (a restrained blue in light mode and a lighter version in dark mode). Visited links shift to --visited-color, a lighter shade. This distinction is intentional: it may be unfashionable, but it remains genuinely useful, particularly in online documentation.

You can see the difference between an unvisited link and a visited link.

Horizontal Rule

Used as a section separator, distinct from a heading change.

Strong and Emphasis

Running text can include bold via <strong>, which uses --heading-color and font-weight: 600, making it slightly darker than body text. Italic inherits from the body. Georgia's italic is a true italic, not a sloped roman, and reads well at body sizes.

Dark Mode

This theme responds automatically to prefers-color-scheme: dark. No JavaScript, no toggle, no class swap. If your OS is in dark mode while reading this, you are already seeing the alternate palette.

The dark background uses #141414, providing enough darkness to read easily in low light without feeling like a dark void. The text color is #e0e0e0, offering a subtle softness at the contrast edge rather than pure white.