I’m the Grinch who grumbles about every WordPress theme. Except one. After years of resisting change, I finally switched FilterJoe to a modern, responsive theme: Twenty Sixteen—the new default theme included with WordPress 4.4.
An easy-to-read blog matters to me. Nothing WordPress offered in the last 7 years has tempted me away from the child theme I personally put a lot of effort into nearly 7 years ago.
My only temptation has been to leave WordPress for a simpler and more writing-focused platform like Ghost or Medium. While WordPress was for blogging at first, it expanded over the years into content management and an online application platform. The original focus on blogging has been diluted, and WordPress themes often reflect that.
However, WordPress now offers Twenty Sixteen for modern blogging, and it is good.
In this post, I detail how Twenty Sixteen makes me comfortable with it as a wonderfully content-focused blog theme.
But first, a little background on my reading-on-the-web obsession.
Why Care about Site Design for Reading?
I am not a professional designer. I just want to be able to read. Not just skim.
Read.
In the early years of my blog, I posted frequently about the challenges of reading text on the web and various fixes for it. I hated reading most sites and went through a several year period when I couldn’t do it without the use of ad blockers and text reformatting services such as Readability.
As for WordPress themes? Call me the Grinch. I grumble about every theme: Why is lengthy text so hard to read?
I always find some reason to reject a theme, whether too crowded, too tiny, or most importantly, full of distraction. I reject minimalist themes, which are almost universally too wide for comfortable reading, while dropping the sidebar-for-navigation option.
Clearly, typical themes work for many sites that have ads, buttons, images, videos, and more ads. I guess that’s why the default background is always white. But what about text? My content is primarily text, sometimes long. As I’ve previously written:
In my fantasy world, reading text on an electronic display is as easy as reading a paperback book, and in some ways easier thanks to hover text, hyperlinks, and resizing when needed.
So . . .
In early 2009 I chose a framework instead of a theme, the Thematic framework. It was the only free “theme building toolkit” at the time which made it easy to develop a custom child theme while providing a competent typographical base. I taught myself design and CSS. I fumbled. I stumbled. Eventually I could easily read text on FilterJoe.
I also wrote several articles describing techniques to make reading easier with either reformatting or clipping services. I wrote about newfangled devices like Kindles, Nooks, iPods, or tablets that made reading easier. I wrote about what I learned when designing my site.
A funny thing happened over the past 7 years. Other people started to care about reading text on the web. It started with impassioned pleas. Ad-strippers and on-screen text reformatting services (reader mode) became popular. Instapaper and later other services made it easy to clip text from pages for easier reading on more reader-friendly devices. Minimalist themes became fashionable. Mobile-friendly designs proliferated, making many web sites easier to read on a phone than a computer. New, simple blogging platforms sprung up to make it easier to write and read text.
In short, text-heavy content on the web is easier to read than it was 7 years ago. WordPress themes gradually became more readable and content-focused, reflecting this trend.
During the past year or so I’ve noticed a few new WordPress themes that are actually pretty good for reading. Given that Google this year told web developers to adopt responsive designs “or else,” I knew I should switch to one of these responsive themes. I still resisted. Being the Grinch, I always found some little thing or two I didn’t like.
However, when WordPress 4.4 was released, I took notice of the new default theme that came with it: Twenty Sixteen. There was little to dislike. Actually, I loved it. I switched within an hour of upgrading to WordPress 4.4 on December 9. I spent a couple days customizing it to match my color-scheme and branding. I also made a few other tweaks that I felt improved the reading experience even further.
With my long-winded introduction complete, it’s time to move on to all the little details that make this theme such a great fit for a content-focused blog.
It Starts and Ends with Content
What does it take to be able to easily read text? I personally find the paperback book format easiest for reading, so that’s where I take my design cues. It’s light, small and flexible. Text is black on a light (but not bright white) background. Width is 45-65 characters. Ample white space and margins are set in nice proportions to be easy on the eye. If you hold the book further away or closer, or use a magnifying glass, nothing about it changes.
Reading on many websites is difficult because most things that make a paperback book easy to read are not present.
I believe the reason I reject most themes is that they are too wide. Because computer screens are wide, many content creators feel the need to stretch text wide to take advantage of all that extra width. Theme designers accommodate them with a wide column for the main content.
Many pre-computer studies conclude that it is more difficult on average to read too-wide or too-narrow text, with roughly 50-75 characters per line as reasonable, and 66 characters per line as optimal. More recently, some studies are finding that line lengths above 75 characters increase reading speed. These studies don’t comment on eye fatigue, though they do comment on user preference, which varies. Staying within 50-75 characters per line evokes the least total negative reaction from readers. Most sites display over 75 characters per line on a typical computer display.
My old theme was 65 characters wide by fixing the width of the main text column at 430 pixels and matching it with a 15px sans serif font. Having such a narrow width for the main text column had advantages beyond character count, including:
- making it easy to read on mobile devices (despite not being responsive)
- making user-initiated scaling work gracefully (useful for users with poor eyesight)
I’ve seen many responsive sites that are much more difficult to read on a mobile device in spite of their so-called responsive design. Intrusive ads, slow loading, weird resizing stuff, text disappearing into nowhere. Is this something I really want? Nevertheless, the world is going responsive, and when done with readers in mind, it can be a better experience than what my old fixed-width theme offered.
So what are character counts like for Twenty Sixteen?
Twenty Sixteen has a responsive design, meaning that it changes based on the width of the device. Sometimes the number of characters is as high as 75, other times it as low as 35, depending on the width of the display window (viewport). On a vertically-positioned iPhone 5 (portrait) it’s at 35 but on most other common display sizes, it’s between 55 and 70. This performance is not just acceptable. It’s terrific.
Well . . . except for the 35-character width on phones. 35 jumbo-sized characters per line is hard to read as eyes are forced vertical and the screen needs to be scrolled often with so little content on the display. I experimented with a smaller phone font on my child theme but it looked like the typography needed work at the smaller size, so for the moment I’ve left the mobile font size unchanged for FilterJoe. I guess I can console myself that iPhone owners using Safari can use the built-in reader mode to choose a smaller font size if they like. Or, more simply, they can turn their phone sideways.
But other than the jumbo phone font, Twenty Sixteen very gracefully handles characters per line at a wide variety of display sizes. To see this, try reading this article on a wide screen. Stretch the window far to the right, then slowly narrow it and watch what happens. You’ll notice that the width for the main text area is kept to a maximum that limits the character count to around 75. You’ll notice that when it is sufficiently narrow, different parts of the design drop out. First the meta information column disappears (the author, date, and category information actually moves to the bottom of the post). Then the right sidebar disappears.
This is a significant improvement over my old theme. If you’re reading on a computer and want to completely focus on content, you can narrow the window until there is nothing left but the content. Way cool! Even though responsive design is intended to make the content readable on devices with smaller displays, you can take advantage on any size of computer display if all you want to focus on is content. This trick will work with most responsively-designed sites, not just Twenty Sixteen.
How does Twenty Sixteen do on everything else in the main content area? For the most part, just fine. Font, spacing, and typography choices are all easy on the eyes and therefore very readable. Zooming in or out of the page using browser controls produces the same results as changing display size—responsive design handles it gracefully. I’m not a fan of excerpts starting my posts, so I stripped them out with a small PHP change.
My only nit to pick is that none of the offered color schemes match a paperback novel. There’s the typical two schemes with too much contrast—black on white background and white on black background. To be fair, the default black-on-white style isn’t too bad—text is a slightly lighter shade of black (#1a1a1a) to reduce contrast. There’s an eye-killing black on bright-mustard-yellow background, and a red background that isn’t much better. There’s also a nice looking white on dark-grey background with muted contrast that is easy on the eyes.
However, these colors can easily be customized. I customized FilterJoe with the same colors I’ve used over the past 7 years. The idea is to mimic a background not too far off from paperback page color. Offer enough contrast to be clear, but not so much as to contribute to eye fatigue. Green for branding and links strikes me as more relaxing than typical web colors. It’s all in support of the goal of making the text as easy as possible to read.
Leave a comment below if you think there are ways I could make the reading experience even better.
Sidebar, Meta, Banner, Menu
With my so-called focus on content, one could reasonably argue that I should get rid of the right side bar and go with a one-column theme. I didn’t do that with either my old theme or Twenty Sixteen. I like to offer users navigational options for reading more content on my site. It also means there isn’t a massive margin surrounding the narrow content column. As I already mentioned above, a wonderful feature of responsive themes such as Twenty Sixteen is that readers can choose to make the right sidebar go away by shrinking the window or reading on a smaller device.
You may or may not agree with having a right sidebar. Twenty Sixteen accommodates. If you don’t place any widgets in the right sidebar, then there’s no right sidebar and it’s a one-column theme, though the menu up top hangs over into the right margin area.
So what do I think of Twenty Sixteen’s sidebar, when present? For the most part, it looks very good, with smaller fonts and the underline removed from links so as not to detract from content. Links in text widgets are underlined which is not in character with other widgets such as categories. So I got rid of the underlining with CSS (stumped me at first . . . box-shadow:none;). I also got rid of section separator lines which I felt distracted slightly from content.
The meta data on the left is very well done, with a subtle secondary color and smaller fonts by default so as not to detract from the main content. Most importantly, this pseudo-third column reduces space for the content column. This is a good thing as it keeps characters per line down below 75 in the main content area. The style of having nothing but a little meta data on a pseudo left column has been fairly popular in recent years, for good reason.
The menu is aligned to the right side of the page but disappears into just a button when the display narrows. This looks great except on really wide screens, when the menu overhangs the rightmost side of the sidebar, which looks odd to my eye given all the other clean lines in this theme. So I changed the styling on the menu so that it aligns with the left side of the sidebar on wide displays.
I have never been much of a fan of massive banners on blogs. So I reduced the banner size to my liking.
It may sound like I made quite a lot of changes. I guess I did. But they were minor changes, and it didn’t take too much CSS to do it.
Final Words
I tend to write long posts. Like this one. So I want my site to be as easy to read as possible. When I first launched the site, I spent way too much time messing with CSS and the changes were much more numerous than what I needed this time around, when I switched to Twenty Sixteen.
I love this theme. Reading is easy for sites using Twenty Sixteen, even without any customization. Great job Takashi Irie and everyone else who worked on this theme. You have my heartfelt admiration and thanks!
Looks great in my RSS feed (I use antiquated FeedDemon) too!
Yes, RSS is a terrific way to read with a uniform format that is going to be better than reading on 90-something % of web sites. I still use it myself to follow various blogs (in my case Newisfy on my iPhone). But for whatever reason, RSS didn’t catch on with the masses. Things like Twitter and Flipboard are way more popular, despite being a much less efficient form of delivering information.
The number of readers of FilterJoe who visit my site dwarfs the number who follow via RSS or email, so having an easy-to-read site matters.
Hi, I’m delighted to find another Twenty Sixteen Theme user. I hope you don’t mind me asking but how did you get the Home, About and Categories into your Menu? I am having problems sorting out my transition and I’d also like to be able to activate the sidebar but, to date, no luck. Any ideas? Thanks a million.
Hi Jean,
For both of your questions, you start by clicking on the Appearance Menu. Submenu items include Widgets and Menus.
To activate the right sidebar, you just start adding Widgets in the Widgets menu item.
To activate the Menu, first click Manage Locations from the Menus menu item, change primary menu to main. Then click Edit Menus and start dragging items you want into the menu.
That’s the abbreviated version – but now that you have all the keywords for these things you can get more help by Googling.
Twenty Sixteen seems better than fifteen considering the option to remove the sidebar and to move it right/left.
Thank you so much for this post. I participate in a short-fiction blog that uses the Penscratch theme and I find the bluish-gray text very difficult to read. I’ve tried to learn enough about the CSS to darken the font but I’m in over my head and don’t want to spend the time. Twenty Sixteen looks like the solution.
Dave – Note that the FilterJoe color scheme is not one of the few choices on Twenty Sixteen’s default color scheme screen. You’ll have to put in your own custom CSS if you want the FilterJoe color scheme. Or you could get a pretty reasonable experience just using Twenty Sixteen out of the box (black text on white background, but it’s a slightly less dark shade of black to avoid over-contrast).
How did you get rid of the line section separator lines?
The CSS to get rid of separators between widget sections is:
.widget { border: none; }I am also crazy about the minimal and intuitive feel of twenty sixteen. Can you share on how you get “Published: 12/23/15 Updated: 1/26/16” and the “Share this”. Was it a plug in?
“Share this” comes from the Jetpack plugin, which you may know about given that it’s produced by the same company that produces WordPress. If you’re not already familiar with Jetpack, note that it starts mostly disabled, so you have to go into settings and enable “Share this.”
Jetpack’s “Share this” button appears beneath the post, not to the side. If you’re fine with that, then there’s nothing else to do.
I wanted it to appear on the side under author and other meta information, so I had to make changes to PHP in my child theme to get it to appear on the left side. If you have never made changes to PHP, you need to know some things before you get started or you’ll crash your site and not know how to recover:
I don’t know PHP very well and because of that I crash my site when making PHP changes to it sometimes. So I always have my host’s file manager open to the directory with the PHP file I’m working on before I start attempting changes. That way, if I crash my site and can no longer use my admin panel, I can quickly restore the PHP file to how it was originally to get my site back up.
The changes to functions.php (in your child theme!) to remove the button and then content.php and content-single.php to place the share button to the left are actually pretty simple once you’re comfortable with PHP (and how to recover if you crash your site). Just paste the following to your child theme’s functions.php to first remove it:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } function jptweak_remove_share() { remove_filter( 'the_content', 'sharing_display',19 ); remove_filter( 'the_excerpt', 'sharing_display',19 ); if ( class_exists( 'Jetpack_Likes' ) ) { remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 ); } } add_action( 'loop_start', 'jptweak_remove_share' );Then you will need to copy two files to your child theme, content.php, and content_single.php. In each of these files, look for the following closing three lines of the entry-footer section (assuming you haven’t yet made any changes):
Insert the following code just before these three lines:
if ( function_exists( 'sharing_display' ) ) { sharing_display( '', true ); }You don’t need to know all this stuff about PHP if you’re happy with the “Share this” button appearing beneath your post.
The Published and Updated change was somewhat complicated for me to figure out how to get right. The good news is that twenty sixteen already sort of includes it, but it’s hidden. So you can unhide it with the following CSS:
.updated:not(.published) { display: inline; }Try this and you’ll see that it sort of works, but looks terrible. Unfortunately, to change it you have to alter some PHP (see last comment). I had to include following PHP in functions.php in my child theme (for many reasons, do NOT make such changes to twenty sixteen theme directly – put this into your child theme functions.php file!):
if ( ! function_exists( 'twentysixteen_entry_date' ) ) : /** * Prints HTML with date information for current post. * * This twentysixteen_entry_date() function overrides the twentysixteen default. * CSS is actually where I unhid "updated". However, that left an ugly mess which I fixed * here by putting in a more compact date format n/j/y, putting in date labels * (Published: , Updated ), and putting in a space hard-space space between Published and Updated. * @since Twenty Sixteen 1.0 */ function twentysixteen_entry_date() { $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>'; if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { $time_string = '<time class="entry-date published" datetime="%1$s">Published: %2$s</time><time class="updated" datetime="%3$s"> Updated: %4$s</time>'; } $time_string = sprintf( $time_string, esc_attr( get_the_date( 'c' ) ), get_the_date( 'n/j/y' ), esc_attr( get_the_modified_date( 'c' ) ), get_the_modified_date( 'n/j/y' ) ); printf( '<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark nofollow">%3$s</a></span>', _x( 'Posted on', 'Used before publish date.', 'twentysixteen' ), esc_url( get_permalink() ), $time_string ); } endif;I believe the above code is very good at removing the sharing buttons. However, that leaves open the question how to get them active on the side, below the date etc.
Katrinka – Thanks very much for pointing that out! You were right. I just modified the above code to also include inserting the sharing button to the left side of the post, as I do in FilterJoe. I think it is now complete. Please let me know if the instructions are now clear and correct.
Okay.
So, now tell me from where i can download this child theme, I love it, 😀
Thank you,
Jagabundhu – The FilterJoe child theme is now accessible from Github:
https://github.com/FilterJoe/twenty-sixteen-child-theme-filterjoe
I was fairly liberal with comments throughout the CSS and PHP, so that I can understand what I did if I have further changes to make at some point in the future.
Well, I was thrilled to read your entire post (no, it’s not too long!).
I’m a total newbie who just started using Twenty Sixteen because I wanted a clean, user-friendly theme. I’m still tweaking it, but my head is about to explode from all the info online, some of it conflicting. (I have been searching for an easy way to reduce, not remove, some of the extra space above and below the heading and posts, but I don’t feel comfortable messing around with CSS.) Anyway, your site looks great to me. I hate a busy interface. My motto is “Keep calm and keep reading”! : )
Luann – glad you like it! Unfortunately, you really need to learn CSS if you want to do much customization. It is definitely a time investment, so if you don’t want to learn CSS, you’ll have to choose the theme that comes closest to what you’re looking for and leave it at that. Typically the only thing you can customize for styling without CSS on WordPress Themes is color choices for background and various elements.
I agree that twenty sixteen is a very good, simple, fresh looking theme-I have been using ‘Genesis’ & ‘Woo’ frameworks for ages but I decided to use the 2016 theme as a temporary measure, and i discovered i liked it more than the premium themes!
I always believe the best thing about twentysixteen theme is the font style and size, pretty sure you are using the default, but joe what made you change the background? i find white equally interesting…love the contrast !!!
Hi Prat,
The defaults on Twenty Sixteen are very nice and I kept most of them. As for background color, try grabbing the nearest paperback novel and take a look at the page. You’ll see it’s not bright white. Bright white is helpful for eye popping ads, so you’ll often see it on glossy brochures and so forth. And perhaps that’s why it’s so ubiquitous on the web as it makes ads stand out better. The majority of sites serve ads, so far as I can tell.
FilterJoe doesn’t have ads, and the typical article is 2000-5000 words long, and some are even over 5000 words. So I designed the site for long-form reading. I believe less contrast is more soothing on the eyes when you’re reading something long. I suspect that’s why you don’t see bright white pages in books.
My initial site design had these colors and I kept them when I transitioned to the Twenty Sixteen theme. I’ll probably keep them forever as part of my FilterJoe branding.