Grow your CSS skills. Land your dream job.

Matching sans-serif and serif fonts.

  • # July 3, 2013 at 9:52 pm

    Hello everyone!

    I have a quick question pertaining typography and general design.

    Recently, I was working on my [personal blog](http://srikarg.github.io/) and decided to switch from the all sans-serif font design to a sans-serif for headers/headlines and serif for blog post text design. As I was looking for fonts to fulfill my goals, I came across a problem/question.

    My question is, how do I match the sans-serif font with the serif font? Is there a technique or is it just blind taste/how well the fonts go with the website?

    Also, I’m not so sure if I posted this in the right category (sorry if I didn’t, there really should be a typography category).

    Thanks,
    srig99

    # July 4, 2013 at 10:19 am

    I don’t have a formula although there are many websites / blogs offering advice – (top 3 on google)

    http://webdesign.tutsplus.com/articles/typography-articles/a-beginners-guide-to-pairing-fonts/

    http://tutvid.com/20-amazing-free-font-pairings/

    http://www.creativebloq.com/typography/20-perfect-type-pairings-3132120

    However something I’ve been trying recently is working from the `

    ` style up… I used to work `

    ` down but by starting with the paragraph typeface / spacing / size allows you to get a better feel of what’s right for your design / content.

    # July 4, 2013 at 2:45 pm

    Thanks for the links and advice @iknowdavehouse! Generally, I start working from top to bottom, but bottom to top sounds like a good idea…I hope someone has a formula or something to find out pairs though…Maybe @chrisburton? I heard that he’s the typography expert in this forum…

    # July 4, 2013 at 7:22 pm

    Well, [this article on Smashing Magazine](http://www.smashingmagazine.com/2013/04/17/making-sense-type-classification-part/) might have some good hints. When I match I tend to look at what the fonts are based on (time period, foundry, etc), and compare the glyphs side-by-side, as well as comparing the x-height.

    # July 5, 2013 at 1:09 pm

    Thanks for the article and tips @Melindrea…I guess I would just compare the styles, history, and general mood of both fonts.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".