5 Typography Tips for Bloggers

Hello dears! I am quite excited to begin my series of posts about blogging & design once again. It’s really a love-hate situation with these types of posts for me, since I know I am really not that knowledgeable in most areas of blogging… and at the same time, I am. Ugh. I guess it’s how hard it is for me to articulate myself in these posts, ya know? I took a quiz on Facebook the other day about what your “dream job” should be, and I got a Motivational Speaker. Yay. I don’t think so 😛

Anyhow! Today I am going to attempt to share with you all 5 tips for better typography! What is typography you ask? According to the dictionary it is…

“The Style and Appearance of Printed Matter.”

… Or in the blogger’s case, typed matter 🙂 So, yes dears, I will be teaching you what I know about fonts, typefaces, styles, how to arrange them, how not to arrange them, etc. I attribute much (if not all) of my present knowledge on this topic to my wonderful Dad, who is a professional graphic designer and brand consultant. I have also studied various books on graphic design, the most influential being Graphic Design Referenced, out of which book I obtained some of the information that I state in this post.

Defining Type

I thought it would be best to begin this post by laying out all the technical names and definitions of styles and faces of type.

Genealogy

On the left hand of the chart titled “genealogy”, I have laid out for you what exactly Type Family, Typeface, and Font mean. Too often I myself get these names confused, but no more since creating this chart!

It’s pretty self-explanitory: a Type Family is literally a family of type, whose members can be either of a condensed weight, slab style, italic, bold etc.

A Typeface is one of the members of the Type Family (you know, like the face of a family member?).

Finally, a Font is a Typeface set to a specific size.

Types of Type

On the right hand of the chart I have laid out the most popular styles of type:

Serif type has little “feet” and extra little lines coming off the basic construction of the typeface, which are called serifs. This style of type is really quite unique, because it is the most easily read (the little serifs lead you on to the next glyph [letter], making the copy as a whole easy to read). The type family  Times is one of the most popular of this style of type, and is the one I have on display above. This type style is great for all uses, especially body copy.

Sans-Serif type is pretty much Serif without the serifs (sans meaning without) 🙂 Helvetica is one of the most used and well known Sans-Serif type family, and is the one I have as an example in the chart. This style of type is great for all uses, once again, although it is especially good for body copy.

Slab type is like Serif masculinized. The designers of this style pretty much took the delicate serifs of the Serif style and made them more blockish. The Rockwell type family is one of the more popular forms of this type style, although I have a member of the Roboto Family (Roboto Slab) on display above. This type style is great in moderate use (I always say, in regards to typography, all in moderation!), but I wouldn’t recommend it for body copy. This style would shine its best as an accent font for banners or the main typeface for a logo.

Script type is best put as cursive handwriting professionalized. This style is definitely one of the hardest to read, but plays beautifully as an accent font, and when used well, the main font for a logo (think Coca-Cola, or our BFS logo). I would whole-heartedly recommend you abstain from using this style of type in any predominate way in your blog design. Sans-Serif and Serif are most definitely the way to go when selecting a typeface that is to be used over a broad spectrum of projects. The font I have on display in the chart is Lavanderia from Lost Type Foundry.

Black Letter type is definitely the most archaic and hard to read type style out there. This type style is born out of the medieval era typography, and you can definitely tell! Please, only use this type style if it works perfectly with your branding, and then in extreme moderation. Treat it in the same way as you would the Script style type, and then even more so.

Alright, now that we have all the definitions and what not covered, onto the 5 tips!

Type has a Voice Too

One of the most amazing principles of typography is one that my Dad taught me while at a conference-like event. We were examining some of the banners hanging around the the event area, and I was explaining how much I liked the eclectic, bold use of the many fonts used in the design of the banners. It was then that my Dad taught me how to look at the fonts as voices. I think that the best way to explain this method of typography examination would be to imagine in your head the voice of a glamorous movie star from the 40s and 50s, a war general, and a little child. Now take those stereotypes, and try to put a typeface to their voice. In my head, I imagine Audrey Hepburn for my movie star, with a light, airy voice. The typeface I would put with her would be the delicate, sophisticated lines of a Serif type, specifically Times. Next, for my war general, I picture Stonewall Jackson, with what I imagine to be his strong, confident baritone. With that I attribute a bold Slab face. Finally, for my little child, I think of Shirley Temple with her high-pitched sweet tone of speech. With her I think of the playful, delicate Script type family Coquette (pictured at the bottom of my graphic above).

This way of examining type is so helpful when deciding what typeface to place where in a copy of text. Take my graphic above as an example: TYPE (Stonewall Jackson) has a (Audrey Hepburn) Voice (a learned, colorful school teacher) too (Shirley Temple). Do you see how all those worked together to help you understand the point of my statement? This tip can be incredibly helpful in design, and I know I have used it many times ever since my Dad taught it to me those years ago.

On Using Script

This next tip is a definite “don’t”, and also proof that you shouldn’t use script style type in a predominate way (i.e.- a header, blog post title, or, horror of horrors, blog copy. I’m sorry ladies, I don’t care if it looks like handwriting in a journal, it’s annoying, illegible, and just plain not fun for the reader. I’ve been there, done that. Save yourself the embarrassment and work. Just don’t do it.). The graphic above is pretty self-explanitory: DON’T EVER USE SCRIPT IN ALL CAPS!!! I’ve seen this done too many times for my own good, and every time I see it I shudder… Just don’t do it friends. It’s always at least 99.99% illegible 99.99% of the time.

Once again, self-explanitory. In the graphic above, I illustrate exactly what I’m trying to point out: script type used tastefully and in moderate amounts creates a beautiful effect in typography.

Leave It Alone

Another set of don’ts for your book:

• DON’T put a stroke (outline) directly on the text. The proper way to do this (if you must do it at all) is to create the text with a stroke on it, and then layer a duplicate of that text without the stroke on top of it. Applying a stroke directly to the text warps and messes up the beautiful, intricate work the typographer put into the face. It’s kind of like putting a tacky keychain on a Chanel purse. Just don’t do it.
• DON’T warp the type. If you want a typeface of a different width or height, please for the love of words DON’T “customize” the typeface. Just. Don’t. Please. If only for my sake.
• DON’T over-mix typefaces. It’s just super tacky.

Ok, my rants are over now 🙂 Let’s move onto some happy “do’s”!

Hierarchy

Hierarchy can be super tricky at times, because it is easy to make up something just way too overdone and huge, and then have an imbalanced piece of design. My two tips for creating elegant, poised hierarchy are these:

• Always make the point (header) of the banner the easiest to read, and the text that catches a person’s eye first. This is a no-brainer, I know, but sometimes it’s super easy to overthink things and make everything stand out with no level of hierarchy. You can use effects like size, color, tracking, weight, height and upper & lowercase styles for making a line of text stand out the most. But, like I always say, all in moderation. The #1 best way to look at a piece of text which is supposed to be a header, against the description (which could either be composed of text or images) is to look away, then loosely examine the graphic as a reader, and see what catches your eye first, then fix or leave alone as needed.
• Make the description accent and compliment the header. Once again, a no-brainer. An example of this would be, if you’re header is all caps and greyscale (Black/White/Grey), and of a bold weight, make your description mildly colorful, lowercase, and of a lighter weight (and obviously smaller than the header size). If you are using a colorful script font, make the description small, simple, and colorless. I guess you could think of a description in terms of this quote from Ginger Rogers: “I did everything he did, but backwards and in high heels”.

Make Your Text Stand Out

It is a scientifically proven principle that white text stands out against a dark background better than dark text against a light background. This is a great principle to have jotted down in your mental notebook of design principles. I have used it countless times for our girls’ blog banners and graphics. Get creative with it, and have fun. But, always remember, all in moderation. Always. (i.e– try not to use this principle in a predominate way, like for your blog post copy.)

Can you tell I’m passionate about proper design? Oh, you couldn’t? Well maybe the next principle will help prove that point…

The Terrible Typographic Time Traveling 4

This is not a tip (thus I didn’t count it in the “5”), it’s a connotation (read: command), which has more weight in my mind than just a “tip”.

Just. Don’t. Just. Don’t. Just. Don’t

Multimedia Banner Ideas

So, we’ve gotten through my 5 tips! Yay! Now for some fun inspiration when designing blog media! I’ve come up with three designs that illustrate using typography in a multimedia fashion which I hope will inspire you:

• Use a photo background for texture. Also, did anyone notice the white text against the dark background? 😉 (Note: Try to use a photo that illustrates the point of the graphic. Don’t just use flowers because they’re pretty.)
• Play with pattern for the background of text. Now, I’m a photoshop addict, so I don’t know if this is possible in other multimedia editing software other than photoshop (I could do a tutorial for those of you interested in this effect!). Anyhow, this is a super fun thing that really adds to the text and takes it to a whole new level. But, if I said it once, I’ll say it again: all in moderation. And try to choose a pattern that makes the text just as legible as when it was without the pattern.
• Use a photo to frame your text. I do this so often for our girls’ blog banners, it’s not even funny. Try to purposefully take a photograph that you can effortlessly insert text into. It’s a super easy, yet impactful effect that I think every blogger should know.

Alright, that’s all I have to share for today! There are countless more typography principles that I didn’t share in this article, but I tried to cover the basics that I as a blogger could improve from. I’m not saying that I know everything, and I have most certainly not mastered this art of design. All the same, I hope you benefitted from this post, and will be able to implement these concepts & principles in your own blogging journey.

Which tip was the most helpful for you?

xo,

-Charlotte, the youngest sister & singer

CREDITS // Author & Graphic Designer: Charlotte Boyer