A Basic Guide to Web and Design Font Pairing

Choosing the right font pairing is important for any type of marketing, but especially when you’re creating a website. Fonts can convey the mood, context and deeper meanings beyond just words on a page.

There are certain guidelines to follow when pairing fonts, but not many unbreakable rules. The biggest rule to follow–the fonts being paired should always complement one another. Most of the time, it’s a good idea to pair fonts together that are of the same family. A great example of this can be seen when pairing serifs with sans serifs. Serifs usually contain a small flair at the end of each character stroke while sans serifs, as the name implies, are devoid of the flairs at the end of the stroke.

Also, if you can find fonts that are members of super-families, then you will have your choice of styles, classifications and line weights to choose from with the added bonus that each of the fonts are designed to complement each other.  All this being said, let’s take a look at 15 of the most common font pairings and discuss how they complement each other. 

This font pairing is an example of a serif and san serif pairing that complement each other. Playfair Display is usually used for the heading, because of its flair. Then Source Sans Pro is chosen as the paragraph text because of its readability.

Neon Rain Web and Design Font Pairing Raleway / Ubuntu
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

These fonts pair well as heading and text because they look similar, but the Raleway lends itself to the bold context and looks better as the heading. Ubuntu is evenly spaced, and the characters are nice and even.

Neon Rain Web and Design Font Pairing Open Sans Condensed / Open Sans
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

The Open Sans Google font is very versatile. It is very readable in large blocks of text and headings. It can be used for almost any purpose. The condensed version makes maximum use of character spacing, which makes it great for the block text while using Open Sans for the headings.

Neon Rain Web and Design Font Pairing Merriweather / Montserrat
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

These fonts are actually interchangeable as headings and text. Merriweather is a good match because of its easy readability and contrasting style. Montserrat is very versatile in its simplicity and is often used by designers.

Neon Rain Web and Design Font Pairing Fjalla One / Cantarell
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Commanding attention in headlines is Fjalla One’s bread and butter. It’s not the most versatile font, but it’s attention-grabbing style make it a great headliner font. Cantarell is the same with paragraph text. It doesn’t work for everything, but is very readable and pairs well with more flashy fonts.

Neon Rain Web and Design Font Pairing Oswald / Droid Serif
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

These two fonts find themselves mostly in the business world on documents for attorneys and business people. Oswald works great for headlines no matter its weight and line style while Droid Serif is very classical and similar to fonts usually reserved for literature as it’s very easy to read in paragraph text.

These fonts are on the less serious side and convey more of an artistic, whimsical feel. You wouldn’t want to use Amatic SC for your body text because it would drive your readers mad, but it’s great for catching attention as a headliner.

Neon Rain Web and Design Font Pairing Roboto / Roboto Condensed
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

This futuristic family of fonts finds themselves most at home in technical publications. However, they are very versatile and can be used on most any typographic project. They are very clear, evenly spaced and easy to read.

Neon Rain Web and Design Font Pairing Roboto Slab / Raleway
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

This is the serif version in the Roboto family. It’s also very versatile but has a more classical style than its other family members. It pairs very well with Raleway when used in all caps as a bold heading.

Neon Rain Web and Design Font Pairing Merriweather / Lato
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Lato is great for computers because it works at different resolutions. Merriweather is also very skimmable and is great for long blog posts that readers want to go through quickly.

Neon Rain Web and Design Font Pairing Oswald / Lora
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Oswald is an attention catcher while Lora is a very clean and professional serif font. They pair very well together as headliner and paragraph text.

Neon Rain Web and Design Font Pairing Montserrat / Vollkorn
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Both are very readable on computer screens. Montserrat is good for things such as navigational menus on websites. Vollkorn is a good choice for small blocks of text on websites. These fonts pair well together on web pages.

Neon Rain Web and Design Font Pairing Eczar / Work Sans
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Eczar is a very exotic font and can be used in various weights. It’s great for headlines, but having to stare at it throughout a paragraph would be very tedious. That’s where Work Sans comes in. It is very flowy and easy to read and lends itself to paragraph text.

Neon Rain Web and Design Font Pairing Archivo Black / Tenor
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

For bold, attention-grabbing headlines, Archivo Black is hard to beat. Then Tenor complements it by being very easy to consume in the detail headings of magazine articles.

Neon Rain Web and Design Font Pairing Cardo / Pathway Gothic One
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

You’ve probably seen these two fonts used together on calendars and schedules of events and itineraries. They lend themselves to highlighting small blocks of short text in sequences.

Which Font Pairing Should You Use?

There are infinite pairings of fonts that can be used for a myriad of reasons. Some are very versatile while others are very specific. Some are great for headlines, but would soon drive you mad if you were to use them while writing a paragraph. Remember Comic Sans Serif? Very whimsical in email signatures, but you would pull your hair out having to read a short blog post composed entirely of that font.

Some fonts are great for paragraph text on computer screens because they are easy to read and won’t tire out your eyes while others are better suited for books and magazines because they are sharper on printed pages and provide better contrast. Additionally, you’ll want to consider how a font looks at specific sizes. This is because font size affects the total line length or how many words fit across your content area. Too long and the user feels like they are reading an essay. Too short and the user feels they are reading a children’s book.

The best advice we can give is to look at your project as a whole before publishing a new page. If it looks good and conveys the impression that you’re trying to get across, then consider yourself a winner. The biggest issue seen with font pairing tends to be when people want to get too fancy or overly artistic with their project. When text is too busy on a page, it can work against you and deter site visitors from wanting to stick around.

Have questions about your web pages and whether or not you’re using the best font pairings for your content? Contact us today and let us help you out!

Filled under: Web Design

Comments

  1. cait runes says

    I delight in, lead to I discovered exactly what I used to be looking for. You have ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye

  2. cyberhackid says

    I was looking at some of your articles on this site and I believe this internet site is really instructive! Keep on posting .

  3. power simulator roblox says

    I’m impressed, I have to admit. Genuinely rarely should i encounter a weblog that’s both educative and entertaining, and let me tell you, you may have hit the nail about the head. Your idea is outstanding; the problem is an element that insufficient persons are speaking intelligently about. I am delighted we came across this during my look for something with this.

  4. Oliver Vaughan says

    Thanks for your short article. I would also love to say that the health insurance brokerage service also works best for the benefit of the coordinators of the group insurance coverage. The health broker is given a list of benefits wanted by an individual or a group coordinator. What a broker really does is hunt for individuals or maybe coordinators which usually best match those needs. Then he provides his ideas and if the two of you agree, the actual broker formulates a binding agreement between the two parties.

  5. Thomas Piper says

    Itís my first visit to this web page, and I am really surprised to see such a fastidious quality YouTube video posted at this place.

  6. Jack Pullman says

    In fact itís known as Search engine optimisation that when i search for this post I found this website at the top of all websites in search engine.

  7. Sam Rees says

    I also believe that mesothelioma is a unusual form of cancer malignancy that is commonly found in people previously subjected to asbestos. Cancerous cellular material form in the mesothelium, which is a defensive lining which covers many of the body’s areas. These cells typically form from the lining in the lungs, belly, or the sac that encircles the heart. Thanks for revealing your ideas.

  8. Tim Wilkins says

    I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite certain I will learn a lot of new stuff right here! Good luck for the next!

  9. Mary Skinner says

    An attention-grabbing discussion is price comment. I believe that it’s best to write more on this matter, it won’t be a taboo subject but usually people are not sufficient to speak on such topics. To the next. Cheers

  10. Jason Terry says

    It’s really a great and useful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.

  11. Hannah Lee says

    Good post. I be taught one thing more difficult on completely different blogs everyday. It should always be stimulating to learn content from other writers and practice just a little something from their store. I’d desire to use some with the content on my blog whether or not you don’t mind. Natually I’ll provide you with a hyperlink on your net blog. Thanks for sharing.

  12. Jake Smith says

    I absolutely love your blog.. Pleasant colors & theme. Did you create this amazing site yourself? Please reply back as I’m attempting to create my own blog and would love to learn where you got this from or exactly what the theme is named. Thank you!

  13. Carol Rampling says

    Good day! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa? My site covers a lot of the same topics as yours and I believe we could greatly benefit from each other. If you’re interested feel free to send me an e-mail. I look forward to hearing from you! Superb blog by the way!

  14. Grace Wilson says

    I would like to point out my admiration for your kind-heartedness for individuals who should have assistance with this concern. Your very own dedication to getting the message all-around appeared to be pretty functional and have helped women much like me to realize their goals. Your invaluable key points entails so much a person like me and substantially more to my peers. Thanks a ton; from all of us.

  15. Tracey Hemmings says

    I seriously love your website.. Great colors & theme. Did you develop this site yourself? Please reply back as I’m trying to create my very own blog and want to find out where you got this from or exactly what the theme is named. Thank you!

  16. Jake Underwood says

    What’s up, can any body assist me how to get this video tutorial from this site, I have watched and listen it now but would like to get it.

  17. Elizabeth Underwood says

    I in addition to my guys have been taking note of the excellent helpful hints on your web page and so all of the sudden got an awful feeling I had not expressed respect to the blog owner for them. All of the men were definitely for this reason thrilled to study them and have seriously been tapping into those things. Thank you for simply being indeed considerate and for considering some magnificent subjects millions of individuals are really wanting to be informed on. My sincere apologies for not expressing appreciation to earlier.

  18. Jacob Russell says

    What i don’t understood is actually how you are not really much more well-liked than you might be right now. You’re very intelligent. You realize therefore significantly relating to this subject, made me personally consider it from so many varied angles. Its like men and women aren’t fascinated unless it’s one thing to accomplish with Lady gaga! Your own stuffs nice. Always maintain it up!

  19. Steven Morrison says

    We stumbled over here coming from a different web address and thought I might as well check things out. I like what I see so i am just following you. Look forward to looking into your web page yet again.

  20. Warren Henderson says

    I’m still learning from you, but I’m improving myself. I absolutely liked reading all that is written on your blog.Keep the stories coming. I enjoyed it!

  21. Amelia Sutherland says

    Thank you for the auspicious writeup. It in reality was a enjoyment account it. Look advanced to far added agreeable from you! By the way, how could we keep up a correspondence?

  22. Caroline Fisher says

    Also I believe that mesothelioma cancer is a uncommon form of many forms of cancer that is commonly found in those previously subjected to asbestos. Cancerous cellular material form within the mesothelium, which is a protecting lining that covers a lot of the body’s bodily organs. These cells typically form inside lining on the lungs, abdomen, or the sac that encircles the heart. Thanks for revealing your ideas.

  23. Colin McDonald says

    I was just looking for this info for a while. After 6 hours of continuous Googleing, finally I got it in your site. I wonder what is the lack of Google strategy that do not rank this kind of informative sites in top of the list. Normally the top websites are full of garbage.

  24. Natalie Baker says

    Hi! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no back up. Do you have any methods to prevent hackers?

  25. Bella Lyman says

    Yes I am also in search of Flash tutorials, as I want to learn more regarding flash, thus if you have please post it at this place.

  26. Theresa Greene says

    This website can be a walk-through for all the data you wished about this and didn’t know who to ask. Glimpse right here, and you’ll definitely discover it.

  27. frigorificos de puntarenas ferry says

    El C tendrá una suspensión muy sofisticada (hay gente a la que no le gusta, segun comentan en este mismo portal, en la prueba del clase E), pero en los demas aspectos mecanicos es del montón directamente del furgon de cola (en motores asi era, hasta que le han puesto el 3 litros diesel). La flexibilidad está pilotada de manera independiente con 2 estados en cada eje; autoadaptativa en función del estilo de conducción, del perfil de la carretera y de la velocidad. Respecto a los dueños de los Mercedes, estos me hacen también por lo general mucha gracia.

  28. mandrinadora en china says

    Nuestra extensa gama de herramientas de gran precisión está a la disposición de su máquina con cabezal móvil para ayudarle a fabricar cualquier componente de hasta 40 mm (1.5 pulg.) de diámetro. Customer-supplied materials are not useable in the Firstcut process.

  29. Neil Marshall says

    Today, I went to the beach with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

  30. Jennifer Thomson says

    I think that a foreclosed can have a important effect on the debtor’s life. Property foreclosures can have a Seven to several years negative impact on a borrower’s credit report. A borrower who has applied for a home loan or any loans for that matter, knows that a worse credit rating is usually, the more tough it is to acquire a decent financial loan. In addition, it may affect the borrower’s power to find a respectable place to let or rent, if that will become the alternative housing solution. Great blog post.

  31. Neil Dickens says

    It’s really a great and useful piece of information. I am glad that you shared this helpful information with us. Please keep us informed like this. Thanks for sharing.

  32. Stewart Lambert says

    Why YouTube videos are shared everywhere? I think one motive is that these are easy to get embed script and paste that script somewhere you want.

  33. reparacion de refrigeradores says

    Se requiere amplia experiencia en manejo de caja y en el análisis del perfil del solicitante (no excluyente) aptitud comercial para el cierre del crédito, manejo posnet, caja y moneda extranjera. Nos encontramos en la búsqueda de un Auxiliar de Repuestos para formar parte del plantel de Posventa de un Importante Concesionario Oficial FORD.

  34. Joan Morrison says

    Somebody essentially help to make seriously posts I would state. This is the very first time I frequented your web page and thus far? I amazed with the research you made to make this particular publish extraordinary. Great job!

  35. Paul Avery says

    Hello there, I think your blog might be having internet browser compatibility problems. Whenever I look at your website in Safari, it looks fine however, when opening in IE, it’s got some overlapping issues. I merely wanted to give you a quick heads up! Apart from that, wonderful site!

  36. Benjamin Piper says

    Wow! this cartoon type YouTube video I have viewed when I was in primary level and now I am in institution of higher education and viewing that once more at this time.

Leave a Reply

Your email address will not be published.