Get a free trial // 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]( 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).


    # 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)

    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]( 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed