{"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>\nWhat is typography?<\/h3>\n