Designing with Type Is More than a Font Choice

Lorna Hordos / February 24, 2019

, ,

You often can’t miss the typography treatment on product packaging and billboards. But what about the use of typography on websites and blogs? All of your site’s written components that appear on your posts, pages, and headings can affect its legibility and how it’s received by your readers.

Type can be a beautiful and important design element, but it can also be distracting if not used correctly. Who wants to spend time deciphering graffiti-style typography? Well, that depends: using uncommon typefaces sparingly (and in the right settings) can help to break up long stories or develop a brand’s personality.

Whether you’re selecting a platform for a new blog, or are improving your existing site, WordPress.com themes include more than enough font and typography options to distinguish your brand’s aesthetic. The following terms can help you understand how designing with type affects your site’s overall attractiveness, enabling you to create lasting first impressions and establish brand recognition.

Font

In a nutshell, font refers to the complete set of characters in a particular style. Fonts differ by name and look: elegant, casual, or modern, for starters. The font used on WordPress.com/go is called Georgia. Customizing your site with a suitable font helps with branding, as visitors begin to associate a site’s look with the brand’s overall messaging. For example, someone who runs a daycare business might use Google’s Bubblegum Sans font for a playful vibe.

Gutters

In typography, gutters are the blank (white) spaces between columns of text. Leaving white space between rows of text prevents neighboring sections from bleeding together.

A page's three-column layout of text with images

Justify

Notice how the right edge of this paragraph is ragged, while the left edge is neatly aligned? This is called “left-justified.” If you’re designing with type to create columns of text and want every edge to align, you can highlight the text and click Justify. Justify is found in the expanded toolbar of your site’s “Publish” page. The justify tool will stretch the shorter lines (making them the same length as the longer ones) by adding white spaces between the words.

Margins

Margins are the empty spaces surrounding blocks of text and images. If a page’s contents are outlined by a border, the margins fall between the border and the edges of the page. On this page, the text is flanked by white space or margins (without a border), and the image above is full-width. This leaves no space along the top or sides for margins, which increases its visual impact.

Tracking

Tracking refers to how closely words are spaced apart. Although you can use line spacing to tighten or loosen a block of text so that it aligns, that method isn’t always necessary.

Typestyle

Typestyle involves italics, bold, underline and other features that make text stand out. Similar to the diminishing impact of repeated exclamation points, improper typestyle use (or overuse) is typically frowned upon. Use typestyles sparingly and only when you really want to emphasize something.

Widows and orphans

If you’re an avid book or magazine reader, you’ve probably noticed an occasional incomplete sentence at the bottom of a page — that’s called a widow. The remainder of the sentence — an orphan — awaits you on the next page. If dangling words at the bottom or top of a column, paragraph, or webpage bother you, fix them manually by adjusting the previous line’s length.

Designing with type: sneak a peek

Now that you have a grasp on some common typography terms, why not familiarize yourself with various themes, focusing on how they set the mood with type? For instance, note how the Monet theme‘s crisp typography accentuates images. Or, check out the Booklet theme, which offers a seamless browsing experience.

Create your new blog or website for free

Get Started