Tips for a better reading experience online

Jeremy Sarber

Alpha and Omega Ministries has a new website. As a semi-regular listener of James White’s The Dividing Line and part-time web developer, I was quick to notice the announcement.

I was also quick to be somewhat disappointed.

Please don’t misunderstand me. The new site is an improvement, and I like the layout and ease of finding material. The structure is excellent, but I still have a complaint. The text is too small.

First of all, setting a font size on the web using pixels isn’t ideal. Relative units (i.e., rems or ems) are preferable. Pixel units may prevent visitors from choosing a custom font size within their browser. People who need larger fonts may lose the ability to increase font size.

Second, a thirteen-pixel font is too small for pretty much anyone. If you want me to read your content on a screen, please make the reading experience comfortable.

Ideally, a comfortable reading experience means each line of text will contain between seventy and eighty characters, including spaces and punctuation. When I view aomin.org on my laptop, the width of a post is approximately 893-pixels wide. I would increase the font size to twenty-six pixels with a line-height of forty-four pixels.

My styles for text would look something like this:

body { max-width: 893px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; font-size: 26px; line-height: 44px; padding: 27px; } h1 { font-size: 54px; line-height: 84px; margin-bottom: 44px; } h2 { font-size: 42px; line-height: 67px; margin-top: 71px; margin-bottom: 27px; } h3 { font-size: 33px; line-height: 54px; margin-top: 44px; margin-bottom: 17px; } h4 { font-size: 26px; line-height: 44px; font-weight: bold; margin-bottom: 11px; } p, ul, ol, blockquote { margin-bottom: 44px; } ul, ol { margin-left: 44px; } .grt li { margin-bottom: 17px; } ul ul, ul ol, ol ul, ol ol, blockquote p { margin-bottom: 0; }

Again, I would avoid the pixel unit, but that gives you an idea. Also, my code doesn’t include styles for mobile devices.

Since Alpha and Omega Ministries is using the Kleo theme for WordPress, maybe James, Rich, or someone can easily adjust font sizes within the theme’s options. Brothers, you should consider it.