The Design Basics for Bloggers series helps bloggers learn basic design principles. This will help you improve the visual design of your blog and visual assets, as well as give you more understanding and insight when working with designers.
Typography is easily overlooked. Selecting a font or several fonts is easy right? Ask any designer whose spent a day or two looking through fonts to find the perfect combination and they will tell you otherwise! Typography can change the look of a blog in an instant giving it an entirely new look and feel with one change. It’s a great way to easily and quickly change the feel of your blog’s design to match your brand.
What Is Typography?
Typography is “is the art and technique of arranging type to make written language legible, readable, and appealing when displayed” (source Wikipedia).
What does this mean for bloggers?
Blogging is all about attracting and keeping readers. If readers can’t read your writing, or have a hard time doing this they will just leave. You don’t want that, so having good typography on your blog will most importantly help keep your loyal readers happy.
[bctt tweet=”Good typography makes your readers happy!”]
Secondarily, good typography will contribute to your blog’s brand. Being consistent in your typography across your branding materials, from your blog to your physical materials like business cards to the graphics you use on social media and even in your videos will all contribute to the continuity of your brand. This makes your content easily recognizable and stand out as belonging to your blog.
Basic Typographical Concepts
The height and width of a font contribute to its size. Certain fonts are inherently large, others are smaller. Font sizes are measured in a variety of methods including points, pica, millimeters and pixels. Most commonly in web design they will be measured in pixels.
This is the vertical space between each line. Think back to your school days when you were required to use double spacing in your writing assignments, that would be your leading.
Tracking is the space between characters and is applied evenly throughout all characters.
Kerning is similar to tracking but relates to the spaces between characters with the goal of creating a harmonious look. You may notice in some fonts that there seems to be a large or an overly small space between certain characters, usually things like V or A. This would be due to poor kerning, ideally you want all of your characters to look like the spaces between them belong there. That no one character is smooshed, or too far away from another.
This is the width of a block of text. For ease of reading you want to keep the measure of a block of text manageable. An overly long measure can become difficult to read, as can overly short measures.
Scale & Hierarchy
Scale and Hierarchy is the related differences in size between text. For example the difference in sizes between a heading and a paragraph or a title and the paragraph of a blog post. Scale and hierarchy aren’t necessarily only defined by comparative sizes. They can also be achieved by emphasizing other text differences such as color, or font shapes (thin fonts vs. thick fonts).
How do you select fonts for your blog?
Knowing some basic typography terminology and concepts is great, but ultimately you want to know how you can find the perfect fonts for your blog. By using these concepts you can select fonts that will enhance your blog and make your content stand out. Keep in mind the following tips when you are searching for fonts to use in your blog:
- Remember Your Brand – Every font has its own personality. You want your fonts to reinforce your brand. If you have a traditional brand, a traditional font would be good. If you have a very modern brand, a sleek modern font will be what you are looking for.
- Use No More than 3 Fonts – Any more than t hat it will be overwhelming for your readers. I suggest using one font for your headings, one for your paragraph text and if you want to use a third, use it for emphasis, special uses or branding.
- Make Sure It’s Legible – Script fonts are beautiful! They aren’t always great for reading though! Use script fonts and other hard to read fonts in moderation. In general they are best used on headings or other rare instances. Don’t use them for your main paragraph text! You should also be mindful of very thin fonts, particularly if they are in low contrast to the background. I’ll be the first to admit they look great, but they can be hard to read.
- Make it Large Enough – Headings of course should be suitably large, but so should your paragraph text! Don’t make your text too small. It can be very hard to read. Remember, people might be viewing your site on anything from a smart phone to their big screen smart TV!
- Opposites Attract – Opposites in fonts attract! Thick fonts paired with thin fonts, Serifs paired with sans-serif, traditional with modern, scripts with simple fonts, all of these are great combinations.
- Avoid Clichés – Cliché fonts really should never be used, these include the notorious Comic Sans and Papyrus. They are over done and really there are much better options out there. So if you are not in fact using Comic Sans in your comic, do not use it on your blog. Ever.
Where can you find fonts to use on your blog?
There are lots of places to find fonts out there! First, look at your theme options, many themes come with built-in font selections and may even include the entire Google Fonts library! This makes it as easy as selecting an option to change the fonts on your blog. If your blog’s theme doesn’t have this feature, there are still lots of sources for you to find both free and paid fonts. I won’t list ALL of them here, as there are indeed lots of places to look, but I will share some of the BEST places to find awesome fonts.
Google Fonts – THE best resource to find completely free fonts.
Font Squirrel – Tons of awesome free fonts, plus a very useful web font converter.
daFont – Lots of free fonts in a variety of styles. Be sure to check the license for each font, not all are free for commercial use.
The following link for Creative Market is an affiliate link. That means if you purchase an item by using my link I will receive monetary compensation. I only recommend services and sites I love, and I’m a happy Creative Market customer.
TypeKit – Adobe’s Typekit features lots of professionally designed fonts, most are paid, however some free ones are also available.
Improving your blog’s typography is a great way to immediately and easily update the whole look and feel of your blog. Changing themes not required! By learning a few of the basics of typography you can apply them to your blog’s own visual assets and give your readers a great experience while building the visual branding of your blog.