10 months ago



GET PRO DESIGN SKILLS 6 STEPS TO MEANINGFUL TYPOGRAPHY 1 READ THE CONTENT Meaningful typography starts with one thing — the content. Typographers know this since they’ll always read the book before they start typesetting for it. Unfortunately, it seemsthatmanywebdesigners underestimate the importance of contentinawebdesignprocess. They will often find excuses in the fact that the website doesn’t existyetsothere’snocontentto work with. When that’s the case, use content that is similar. If you’re designing a website about finance and economics, for example, find an article about that and read it. 2 CHOOSE A TYPEFACE BASED ON CONTENT Now you have read the content, you’re ready to choose your main typeface. If a website isabouttechnology,butis expected to have medium to long articles,useatypefacethatlooks abitmodernbutiseasytoread. If it’s an art gallery portfolio, you can get away with something edgy.Don’tuseLoremIpsumas placeholder text — it’s a strange form of the Latin language that has nothing to do with your website. Use the content from Step 1, in the language that will be used, and then design around that. 3 START MOBILE-FIRST An important step is to design the best reading experience for the screen that’s hardest to design for — mobile. Mobile-first is a fundamentally different approach to web design where progressive enhancement is favourable to graceful degradation. Don’t design the best reading experience for desktopscreensandthenadapt for mobile or, even worse, forget about mobile altogether. Choose a combination of font size and line height that works best on smaller screens. Your starting pointshouldbetheagreed-on browser default of 16 pixels. GREAT EXAMPLES Matej Latin picks a selection of typography that works well 4 ADAPT FOR LARGE SCREENS Don’t let mobile-first turn into mobile-only. The tools forshapingthebestreading experiences for different screens areinplaceandtheyshouldbe used.Largerscreensareusually further away from reader’s eyes so the base font size needs to be larger.18pixelsiswidely considered a good starting point. Don’t forget to limit the width of paragraphs — recommended for best reading experiences is up to 60charactersperline.Theline height needs to be looked at again — 1.4 or 1.5 times the font size is usually best. Wired — Wired comes with a typeface designed for web usage (Exchange Web) and neatly designed reading experiences for both, mobile (17 pixels and 1.3 line height) and desktop (19 pixels and 1.4 line height). The Independent — The Independent benefits from a bespoke typeface, Indy Serif, which seems very capable at delivering any type of news content on any medium. Well-shaped paragraphs offer a great reading experience. 46 _________________________________________________feature

GET PRO DESIGN SKIL 5 USE A SCALE It’snowtimetodefinea rangeofreusablefont sizesbasedonascaleandthe most common way to do that is to use a modular scale. Go to, enter your base font size and choose a scale. Itwillgiveyouarangeoffont sizestochoosefrom.Defininga scaleandtryingtosticktoitadds meaningtofontsizechoicesand prevents the chaos that often arises from randomly assigning them instead. MATEJ LATIN Lead UX/UI Designer at Auto Trader UK @matejlatin 6 SET A BASELINE GRID The next step is to start thinking about other text elements around the body text you should have designed by now. Titles, lists, captions, side comments, etc. To add meaning behind placing these elements on your website, it’s best to use a baseline grid. This grid originates from your body text line height. If your line height is 22 pixels, you need a vertical grid based on that. When that is in place, you’re ready to set the sizes and margins of other text elements so they’ll fit inside this grid. The Great Discontent — The Great Discontent uses Leitura News for its body text. Its unique style complements the type of content (interviews) very well. A large base size makes the content very easy to read. The Economist — The Economist comes with generously sized body text, topped with a crisp, slightly lighter typeface — Milo Serif Pro. Mobile-dedicated font size and line height help improve the reading experience. feature _________________________________________________47

Metro Revealed - Download Center - Microsoft