Design Notes

Custom font: Arvo

Beautiful, Readable, Unique

Arvo is a geometric slab-serif typeface family suited for screen and print, from Google Fonts. As a typographer, it is one of my top picks; I find it to be a beautiful and very readable typeface. Being a slab serif, it has a more unique appearance than the default, bland, sans serif fonts typically used.

Readable text type

Using a great font at the right size matters a great deal

The importance of making the main body of text easily readable can’t be overstated. Although users can now adjust the size at which they view text, if they know how, it is best to make every effort to make text readable in the first place. I have adjusted text sizes on this site. However, you are able to change font and sizes if you like, under Appearance – Customize – Typography. Note: Different fonts, at the same point size, often appear larger or smaller. Thus, there is not one size that works best for all fonts.

Background image

An image named gray-pin-dk.png is used on this site. This makes the white of the page pop and adds a subtle texture. The background can be removed or replaced, or a solid color can be chosen. Go to Appearance – Background to do this.

Headers

Permit Scanning, Keep Users from Clicking Off

Headers can help break up dense dense amounts of text, which otherwise make readers immediately click off of pages, according to Steve Krug, web usability consultant.

Headers also allow readers to scan for the information they seek. Headers seem to be under-used on the web. Of the 4 kinds of emphasis (font weight, color, style, scale), I find using color sparingly can be very effective. On this site I have used dark red for the H2 headers. Header colors should be different from the link color. The link color for this site is blue.
Note: Headers can also be links, and in that case they will be the link color.

Header Image

When a header image is used (the wide photo at the top of the pages), it automatically appears on every page. This can add consistency to your site, which can be a good thing. Should you prefer something different at the tops of your pages, as I often do, don’t use a header image. Instead, you can add a photo, slider, or simply large headline text to individual pages.

Sidebars

When a sidebar is used, it automatically appears on every page using the default template. If you don’t want a sidebar at all, use a full-width page template, no sidebar.

For different content in the sidebars on each page, you can use PageBuilder to create a new row, with a column to use as a custom sidebar. Insert the Visual Editor widget into that column. Then add whatever text or image you want in Visual Editor.