• Blog
  • About
    • Contact
    • FAQ
  • New Reader

The Boyer Sisters

Real-life Advise + Inspiration for the Creative Gal.

5 Typography Tips for Bloggers

03/12/2015

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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.

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

5 Typography Tips for Blogger, fonts, type, design, graphic design for bloggers, blog design

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

Creativity 11 Comments Tagged With: Blogging Tips, Inspiration, Tips

About Charlotte

I am a passionate artist + curator of beauty in every sphere of life. Pretty graphics, brand identities, and pizza are my love language. I’m a self-taught guru in all things graphic & web design, photography, and branding.

VIEW POSTS BY CHARLOTTE

Remember...

We enjoy your comments so much! But please, if you don't have anything nice to say, refrain from expressing it on our blog. Boyer Sisters is a judgement-free zone, and we welcome all community engagement that comes from a place of love, rather than fear. Thanks for taking the time to comment! :)

Leave a Note Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments

  1. Kate says

    03/12/2015 at 1:09 PM

    Thank you thank you thank you for “The Terrible Typographic Time Traveling 4” tip!! Ugh! My dad is a graphic & UI/UX designer, and though I am not up to snuff on the principles of design, blatantly bad design makes me want to pull my hair out. 🙂

    Reply
  2. Hannah Barta says

    03/12/2015 at 1:32 PM

    I’m in the process of my second web design course right now, which I’m thankful I decided to take since I’m a blogger. Professional design is so important in the blogging world in my opinion, and far too few people utilize it. Even knowing just a little HTML and CSS can take a blogger a long way.

    I like your belief that every font has a voice. I’ve always been one of those weird people that loves different fonts and I can’t stand using the typical Arial or Times New Roman to write an academic paper. And I agree that mixing too many fonts looks a little ridiculous . . . I prefer to use two different ones maximum, and sometimes think just one is the best choice.

    Thanks for this post! I’m looking forward to the next one in the series 🙂

    Dance A Real: Fashion & Lifestyle
    walking in the air: Literary Musings

    Reply
  3. Abigail says

    03/12/2015 at 2:47 PM

    This really is SO COOL CHARLOTTE! I love learning more about stuff like this, and you make it so easy and fun!! Thank you for sharing!

    Reply
  4. Hana - Marmota says

    03/12/2015 at 3:44 PM

    a) the existence of slab styles – I did not know it was a distinct type!
    b) the overall nicely structured overview.
    I like the idea of type voice! Well, to be honest, I can’t quite picture it – I’m not quite as auditory as you obviously are, you being singers and musicians and me being not – but if I substitute “voice” with “character”, it makes sense!

    By the way, speaking of making it stand out, those white-on-pink headers (is there another word for this?) don’t quite stand out – at least not on my screen.

    Reply
  5. Anna says

    03/12/2015 at 4:56 PM

    I really enjoyed this article, Charlotte!! It was really informative, and though I don’t do any web design I have thought of several ways I can use the information. I have always been super impressed with this blog design, it is so attractive and well put together. 🙂

    Reply
  6. ariella says

    03/12/2015 at 11:12 PM

    This is a great article! Thanks so much for sharing!

    Reply
  7. bonita says

    03/13/2015 at 2:27 AM

    Well, I can’t really pick out which tip was the most helpful, but this is a great overview to Typography. Thank you so much for sharing! I found it really interesting, and I love how you illustrated your points. It really helped me to have a visual conformation of the do’s and don’ts. 😀 ❤

    xox,
    bonita of Lavender & Twill

    Reply
  8. Catherine Sorensen says

    03/13/2015 at 1:06 PM

    Excellent post Charlotte! I love words & typography, (small wonder, my Mother did calligraphy & taught my sister and I) so most of this was a welcome reminder. You did a fabulous job with the font examples & I really enjoyed the section on font voice. I analyze fonts all the time for suitability & context but not as people. =)

    oh, & thank you for the book recommendation! I’m looking forward to reading it once it’s in at the library. I hope that you’ll keep sharing this kind of post with us occasionally… =)

    God bless,
    ~ Catherine Sorensen

    Reply
  9. Jill says

    03/13/2015 at 3:02 PM

    I think you articulated this beautifully! I took a typography class in college and it was one of my favorite courses!

    Reply
  10. Abbey Noelle says

    03/15/2015 at 7:46 PM

    This was SO helpful, thank you! I’d really like to see some more how-to’s for photoshop.

    Reply
  11. Sanne says

    05/08/2017 at 3:27 AM

    I’ve just read this and loved it, but am sad to say that I love Comic. I just checked my old blog, but fortunately I didn’t use it there, haha. 🙂

    Reply

About the Boyer Sisters | Real-life Advise for the Creative GalHey, gal! We're Charlotte + Jessica, the Boyer Sisters. Around here, we present a raw, vibrant perspective on what it means to be a creative gal after God’s own heart. We believe in the breath-taking freedom that is found by putting Christ first in our lives and letting everything else follow.

Read More

Follow Along

  • Bloglovin
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Follow via Email!

Archives

  • June 2018
  • May 2018
  • April 2018
  • January 2018
  • December 2017
More from the Archives...

All images and content, unless credited otherwise, are copyright © Boyer Sisters. Do not use without permission.



© 2019 Boyer Sisters. All Rights Reserved
SITE DESIGN BY LOTTA'S WEB