{"id":283420,"date":"2019-02-27T08:28:27","date_gmt":"2019-02-27T15:28:27","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283420"},"modified":"2019-09-10T15:54:43","modified_gmt":"2019-09-10T22:54:43","slug":"typography-for-developers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/typography-for-developers\/","title":{"rendered":"Typography for Developers"},"content":{"rendered":"

Taimur Abdaal leads design at Retool<\/a>, a fast way to build internal tools. They’re working on a new design system for their platform, to let anyone easily build beautiful custom apps. Typography will be a huge part of this and Taimur wrote this based on that experience.<\/p>\n

You may have read the title for this post and thought, “Why on earth does a developer need to know anything about typography?” I mean, there\u2019s already a lot on your plate and you\u2019re making hundreds of decisions a day. Should you use React or Vue? npm or Yarn? ES6 or ES7? Sadly, this often leaves something like type as an afterthought. But, let\u2019s remember that web design is 95% typography<\/a>:<\/p>\n

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.<\/p><\/blockquote>\n

Even though we deal with content everyday \u2014 whether reading, writing, or designing it \u2014 typography can be daunting to delve into because it\u2019s filled with jargon and subjectivity, and it\u2019s uncommon to see it taught extensively at school.<\/p>\n

This is intended as a practical guide for developers to learn web typography. We\u2019ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We\u2019ll go over the principles of typography and the CSS properties that control them, as well as handy tips to get good results, quickly.<\/p>\n

<\/p>\n

What is typography?<\/h3>\n

First and foremost, typography is about usability. Type is the user interface<\/a> for conveying information, and conveying information is what we\u2019re here to do on the web. There are many levers we can pull to affect the usability of reading text, and only by being deliberate about these can we create a pleasant experience for our users.<\/p>\n

After (and only<\/em> after) usability, typography is about emotion. Do the letters complement your content, or contradict it? Do they amplify your brand\u2019s personality, or dampen it? Applied to the same text, different type will make people feel different things. Being deliberate about typography lets us control these feelings.<\/p>\n

\"\"
Same text, different personalities. I\u2019ll bet the first experience is much more expensive. Typefaces: Bodoni 72 (Top), Tsukushi A Round Gothic (Bottom)<\/figcaption><\/figure>\n

Despite what many golden ratio enthusiasts<\/a> might try to tell you, typography isn\u2019t an exact science. Good guidelines will get you most of the way there, but you\u2019ll need to apply a little intuition too. Luckily, you\u2019ve been reading text your whole life \u2014 books, magazines, the Internet \u2014 so you have a lot more untapped intuition than you think!<\/p>\n

What\u2019s in a font?<\/h3>\n

Let\u2019s start off by getting a handle on some basic terminology and how fonts are categorized.<\/p>\n

Typeface vs. Font<\/h4>\n

This is how the two have traditionally been defined and distinguished from one another:<\/p>\n

    \n
  • Typeface:<\/strong> The design of a collection of glyphs (e.g. letters, numbers, symbols)<\/li>\n
  • Font:<\/strong> A specific size, weight, or style of a typeface (e.g. regular, bold, italic)<\/li>\n<\/ul>\n

    In essence, a typeface is like a song and a font is like its MP3 file. You\u2019ll see both terms used in typography literature, so it\u2019s worth knowing the distinction. “Font vs. Typeface” is also a bit of meme in the design community \u2014 you might see it crop up on Twitter, so it\u2019ll help to be “in the know.”<\/p>\n

    \n

    HOW 2 MAJOR IN GRAPHIC DESIGN:
    – CHOOSE A FONT
    – "ITS CALLED A TYPEFACE NOT A FONT"
    – CHOOSE A GODDAMN TYPEFACE
    – U MADE THE WRONG CHOICE<\/p>\n

    — Deena (@itsDeenasaur) November 2, 2014<\/a><\/p><\/blockquote>\n

    \n

    I may have used font and typeface interchangeably in this story. Please send all complaints to usuck@whocares.tk. https:\/\/t.co\/IuHHmlaNAT<\/a><\/p>\n

    — Tristin Hopper (@TristinHopper) January 14, 2019<\/a><\/p><\/blockquote>\n