

Avoid using the same size for both fonts.Conflicting is when we use 2 or more fonts that are very alike but have some particularities, but, like the name says is very trick, so pay extra attention to these elements: I used here the Roboto Slab type, it’s simple right? Looks like a lot of different fonts but it’s just a big family 🙂Ģ- Conflicting: This one is the hard and most difficult to get right.
#Conflicting typeface examples how to#
Concordance is the easiest one to do, but don’t mean that your design is poor, if you choose a good font and know how to turn it interesting to the client’s eyes there’s no way to go wrong with the concordance.

There are 3 principles for typefaces, and are really easy to identify but be very careful, or instead of a nice design, you will confuse your potential client.ġ- Concordance: This one is when is used in design all fonts from the same family, like Arial font, you can use some words in bold, italic, etc… But it will be the same font family, so for this principle make sure you are picking a superfamily type, so you can have multiple variations. But are you using it right? Or your designer is using it, right? Well, let’s learn a little more about the difference and how important it is, ready? The basic building, is here where your potential client will read about your business and reach you. This is an example of what to avoid when pairing typefaces.Type is one of the most important pieces of a design. But look at those “a”,”g” and “t” between the two fonts. Here is an example of Adobe Caslon (title) paired with Century Gothic (body). If these differences stand out then they don’t go together. Typefaces can be very different in the way the individual characters are displayed. Fonts with Clashing Personalities – Curlz and Edwardian Script Tip #3 Avoid Disparate Typefaces Got the idea right? If not, see below the effects. fonts on lines 2 and 3 in the image above). Imagine using playful Curlz as the header for a page written in decorative Edwardian Script (i.e. And when pairing typefaces, make sure the typefaces you choose do not have clashing personalities. Typography – Font Personalityįirst off, make sure you are choosing the right typefaces to reflect the personality of your website. Typefaces have personality – yes, believe me! For example, have a look at some of the fonts in the below image. Which looks better? Comparison of Serif and San Serif Pairing – Lato and Merriweather Tip #2 Avoid Typefaces with Conflicting Personalities In the example below, on the left you have Lato (title) and Lato (body) and on the right Merriweather (title) and Lato (body). Pairing a Sans Serif typeface for the header with a Serif typeface for the body is a classic combination. Sans Serif fonts do not have these serifs. A font that has the small projecting features called “serifs” at the end of strokes is called Serifs. Lato TypefaceĪs I mentioned in a previous article, there are two types of fonts – Serif and Sans Serif. In this case, a single typeface provides 6 variations. The fonts shown below are Lato Light, Lato Light Italic, Lato Regular, Lato Italic, Lato Bold, Lato Bold Italic. For example, here is Lato – a typeface – with 6 fonts. Each such variation is considered a different font. Within a single typeface, there will be fonts of varying weights (i.e. In this article, I will give you some tips for pairing typefaces for the best duo for your website.Ī typeface is a family of fonts. In my article about Typography for Website Design, I mentioned that Rule #1 is to limit the number of Typefaces/Fonts used.
