[Rivalry]

[img]http://upload.vstanced.com/images/2018/02/16/xLE.png[/img]

---

Welcome to Tutorial Tuesday, works's weekly series teaching you how to become a better designer. Our tutorials are often non-specific; our aim is to improve the soft skills that underlie all aspects of design, especially your thinking skills. This week, I'll be sharing some tips to help you create a bulletproof typographical system in 5 minutes.

---

AT A GLANCE
-

Typography is hard. Below, I'll split the process of making a typographical system in two: sourcing your fonts, and then creating a basic system using those fonts. I've included a few 'typehacks' which will hopefully streamline what can otherwise be a daunting process and make creating nice-looking text a breeze!

---

INTRO TO TYPOGRAPHY
-

Typography's all about setting text. Whenever you see typography, just think 'text'. It's difficult to get right, and 'typographer' is a full-time job. It's also immediately obvious when someone gets typography wrong in their design: their text may be hard to read, badly-balanced, low-quality, or just plain ugly. A typographical system refers to the overall usage of fonts within a project; when you decide on title, sub-title, and body text, you've just created a basic typographical system. This system should remain consistent throughout a project (i.e. don't randomly switch the fonts you're using halfway through your web design, for example). Inconsistency can make your design difficult to follow, or confusing. Therefore, a typographical system is one of the first things you should decide upon when starting a project because you'll have to stick with it (making only minor tweaks) throughout. Let's look at some tips!

---

CHOOSING FONTS
-

I promised five minutes in the title of this thread, and I want to caveat that here before we get stuck in. Putting together a basic type system can take 5 minutes with a little practice, but - as with everything in life - the longer you spend on it, the better the results will be. Bear that in mind!

However, since we're going for the streamlined approach we're going to use Google Fonts. Google Fonts is an excellent resource for many reasons: the fonts are high-quality, they can be embedded straight into a website, there's a big range of fonts available, it's a trusted and safe source, and the licence is extremely generous (you're allowed to do pretty much anything with these fonts).

The fonts you'll want will change from project to project, of course. However, generally your title font should be big and attention-grabbing; you can preview what different fonts will look like in different sizes with your text of choice very easily on Google Fonts, allowing you to locate suitable title fonts quickly. Your body text, meanwhile, should be a more understated font which doesn't draw the eye away from the title font, and is easily legible at smaller sizes. For example, Chicle would probably not be a good body font for most projects, but it might work well as a title font. You should also generally use different fonts for title and body text: using the same font for both can look a bit bland and hard to follow. Therefore, your aim for font pairings should be to generate contrast between the body and title fonts; this is mainly achieved using size (i.e. body text is small while title text is large), but can also be achieved using colour, positioning, and - of course - font choice.

TYPEHACK #1 - pairing fonts can be a nightmare. There are so many options, and many fonts look ugly together. A quick and easy way to find a great pairing is to pair a serif font with a sans-serif font. This generates large amounts of contrast between title and body text, making your job of making different bits of text stand out more straightforward. For example, Playfair Display looks great as a title when paired with something like Open Sans as a body text (scroll down). Conversely, you can have a sans-serif font as the title and a serif font as the body text (though don't do this with Playfair, which isn't suited to body text use imo).

TYPEHACK #2 - this leads into our second typehack to make figuring our typography out easier. Google Fonts also suggests pairings for you; navigate to a font's page and scroll down. On the left of every page there's a 'popular pairings' list. Sometimes this list is very dubious, so take it with a pinch of salt (and the list will never have interesting or unusual pairings, because it just shows the most popular pairings), but it can be useful in a pinch!

---

CREATING A TYPOGRAPHICAL SYSTEM
-

Okay, so you've got some fonts! Now you need to assemble them into a typographical system. Let's put this together quickly.

TYPEHACK #3 - A good rule of thumb is that the body text should be half the point size of the title text: if your title text is 24pt, try making the body 12pt. This keeps everything relative and proportioned. Note, however, that this is only a guide and doesn't work with every font pairing! You may need to tweak sizes as you go along. Make sure you pause after fixing on a font pairing's sizes and check that it looks good when zoomed out; what looks good zoomed in in Photoshop sometimes doesn't look so great when you're actually reading it at the size it's supposed to be displayed at.

TYPEHACK #4 - Increase the spacing. I've mentioned this before in my tutorials, but an easy way to make virtually anything look better in a design is to give it more breathing room ('negative space') around it. The same applies - up to a point - with text. The Adobe Creative Cloud is notoriously miserly when it comes to allocating automatic line spacing; I generally increase the line spacing for body text a little bit to give the text more room to breathe (and thus it looks better). You can do this in Photoshop by selecting your text layer, looking to the right of the screen at the toolbars stacked over there, and finding the little 'A' icon. Click it, and then find the icon I've circled here. Change 'Auto' to your desired setting. Just below that setting is the 'kerning' setting, which affects how far individual letters are spaced apart. You should also play around with this!

By now, you should have a nice font pairing, well-spaced and with plenty of contrast. If you find more contrast is needed, you can always make the title a different colour to the body text, or increase the spacing between the two sections of text (indeed, many people even insert dividers between their title and body text).

[img]http://upload.vstanced.com/images/2018/02/16/xLL.gif[/img]

[ryan⚜]

Honestly never even realized Google's font-pairing was so extensive. Great info, especially when setting up thread designs or sites.

[ThomasGB]

I always struggle once it cames to choose fonts , specially on my front-end projects

this is going to help me , I didn't knew also that google is providing font pairing , this gonna help

Thanks OP