5

Ask DN: Do you mix serifs and sans-serifs?

5 years ago from

I try to only pick one typeface for a project or site. It feels better to me. However I think I need start mixing sans and serifs. I used to use more than one typeface, but then I started thinking more minimalistic. This could be hurting my design. Do you mix serifs and sans-serifs? Which do you use for headings? Which do you use for body?

I know this question can be answered with "it depends". But wanted to get some information regarding thought process along with what the overall community navigates toward.

13 comments

  • Kemie GuaidaKemie Guaida, 5 years ago

    In the traditional print world, the convention was sans for headlines, serifs for text. In the early days of the web setting text in a serif was not advisable because at low resolutions/small sizes you tended to run into legibility issues. Nowadays, I'd say either combination would work (depending, of course on individual font combinations).

    Medium, for example, uses a sans for headlines and ui elements, and a serif for text. A nice example of serif headlines & sans serif text: http://rokkan.com/

    Essentially: go for it.

    5 points
  • Bevan StephensBevan Stephens, 5 years ago

    If the two fonts have similar proportions (x-height etc...) then they will generally work better together.

    Also many font families have serif and sans serif versions that are designed to be paired together.

    4 points
  • Jesse HoyosJesse Hoyos, 5 years ago

    There is no one size fits all rule when it comes to pairing serifs and sans-serifs. Traditionally they teach that you should strive to have one of each in your type pairings. It provides a good sense of variety and flexibility to your designs. However, that "rule" has become a lot less popular recently because you can run into many legibility issues when using serifs on screen, especially if they are not Hi Res screens. Hence the ubiquitousness of sans-serifs on the web right now.

    So there is my long winded "it depends" answer. Now, I've personally noticed that some of the cool kids in the design world are bringing back serifs, especially high contrast display serifs. When used right these can make for very great aesthetic.

    if you take anything away from this comment, let it be this; you are doing you and your designs a great disservice by limiting your choices –in any regard– from the start. Peace.

    2 points
  • Amanda Franzoi, 5 years ago

    There's a site that shows some font combinations, including sans/serif: http://fontpair.co (it helps not just to choose fonts, but the style and weight to create more combinations etc); i usually use serif for body and sans for headings (montserrat and ovo are one of my fav combinations :D

    1 point
  • Jordan BrewerJordan Brewer, 5 years ago

    This is a great question! My general rule is to split it up and keep it to two typefaces. I do this because I like the split aesthetic; giving the user a greater distinction between titles and content and makes large content pages scannable.

    I gravitate towards a sans serif for headings and serifs for body. I used to like sans serifs in the body, but I got to reading some research and changed my tune to serifs in heavy text situations.

    1 point
  • Sam SolomonSam Solomon, 5 years ago

    Anecdotally, I've found it incredibly difficult to build application interfaces with serif fonts. Every time I attempt to design an application with serifs, I end up swapping for a san serif font.

    0 points
  • Chris GillisChris Gillis, 5 years ago

    Yes - and you are right "it depends" on the project, the client, the medium, etc.

    0 points
  • Steven ValladolidSteven Valladolid, 5 years ago (edited 5 years ago )

    Having a serif/san-serif pair for headings/body can actually be a great way to distinguish the two. I feel that using a single font with a heavier weight for headings is a "safer" approach to typefaces, especially for minimalism. Pairing fonts together requires more of an art.

    My rule of thumb is to not using more than two fonts for one piece. And as far as http://fontpair.co/ is concerned anything goes.

    0 points