This article will break down the process of selecting the best font to your design into 5 straightforward steps. I wrote this for web designers, but others can gain from reading it as well. Let’s get started.
STEP 1: FIND READABLE TYPEFACES
First rule, don’t overthink it. You won’t wish to comply with the enormous crowd of Helvetica users. And, you one way or the other ask your self, why Helvetica?
Well, let me inform you…
Cause it’s just so damn good! It fits right in with every design imaginable, it works well in small, as well as big sizes.
However, for individuals who have a robust distaste for Helvetica, here is a easy process I follow when selecting a type for the body content of my website. First, you pick a font, paid or free fonts, that you just like. Then, scale the font measurement down to around 10pt. If, you can still read the textual content without any squinting, congratulate yourself. You have chosen well, my friend.
STEP 2: DETERMINE SIZE & HIERARCHY
As a general rule, the font dimension on your content material needs to be 12pt. Some sites even use 14pt for higher readability.
The title will usually have a bigger font size. But, there is no hard and quick rule in visible hierarchy. It is all relative. You should utilize color to tell apart the most important title. Or, you would possibly just choose a totally completely different font to your titles to give them more that means, instead. The selection is yours.
STEP 3: BE LEADING & TRACKING
Leading is the area between every lines of text. Bad leading can make a tremendous piece of copy looks boring and hard to swallow. While, good leading can make an even bad copy looks readable. As a common rule, the usual CSS line-height for a block of text is 1.5 instances the font size.
Tracking refers to the space between each characters in a block of text to have an effect on its density and texture. The reader will perceive the textual content otherwise depending on the amount of spacing. Tight tracking, or negative letter-spacing, not only reduce the legibility and readability of text. It may additionally set off cultural affiliation of a more subjective typographic voice — the equivalent of a quick-talking automobile salesman. Conversely, the rise of letter-spacing in text (to an extent) increases legibility, and the cultural association is of a more goal voice.
STEP 4: SPLASH SOME COLORS
I’m not talking about coloration scheme here. Instead, this is about choosing the color mixture for better readability.
The widespread combine is black textual content against white background and white textual content in opposition to black background. However, you’ll be able to combine and match any coloration so long as the content material is readable.
STEP 5: GET PAIRING
Most of the time, it will not be sufficient to make use of just 1 font for your content. You would possibly need wish to use serif font on your title and sans-serif font for your content text. Or vice versa. There’s no absolute rule in selecting this mix. However, you’ll be able to based mostly your selection upon several finest practices.
First, combine a sans serif with a serif. It’s a classic mixture and almost inconceivable to get wrong.
Second, distinction font weights. Keep away from muddy typographic hierarchy by distinguishing elements within the hierarchy from one another.
Third, do not combine moods. Every typeface have its own personality. And, mixing the temper of typefaces can draw consideration to the typography instead of the message, which results in a poor design.
Finally, create a typographic texture variation. Play with font weight, measurement, stroke width, leading, kerning, and several other other factors. One straightforward way to see typographic texture is to squint at a structure till you possibly can’t read it anymore, but can still see the text when it comes to its total tonal value.