https://learnui.design/tools/typography-tutorial.html * UI Course * UX Course * Blog * Tools + Data Visualization Color Picker + Accessible Color Generator + Gradient Generator + Interactive Typography Tutorial * Design Hacks Learn the logic of great typography An Interactive Type Tutorial Why does this look awful? Example of bad typography ...and this looks great? Example of good typography In this 5-minute tutorial, you'll learn: * Best practices for styling text * How to pick great fonts * Typographical design patterns you can apply to your own designs Ready to get started? Just scroll down First, rotate your device to landscape orientation turn phone portrait to landscape (Or view on desktop for the best experience. Here's the link) Get Started The example The lesson Diaspora * Greg Egan1 Chapter 1:2 Orphanogenesis3 Konishi polis, Earth 23 389 025 000 000 CST 15 May 2975, 11:03:17.154 UTC 4 abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz The conceptory was non-sentient software, as ancient as Konishi polis itself.5 Its main purpose was to enable the citizens of the polis to create offspring: a child of one parent, or two, or twenty - formed partly in their own image, partly according to their wishes, and partly by chance. Sporadically, though, every teratau or so, the conceptory created a citizen with no parents at all. In Konishi, every home-born citizen was grown from a mind seed, a string of instruction codes like a digital genome. The first mind seeds had been translated from DNA nine centuries before, when the polis founders had invented the Shaper programming language to recreate the essential processes of neuroembryology in software. But any such translation was necessarily imperfect, glossing over biochemical details in favor of broad, functional equivalence, and the full diversity of the flesher genome could not be brought through intact. Starting from a diminished trait pool, with the old DNA-based maps rendered obsolete, it was crucial for the conceptory to chart the consequences of the new variations to the mind seed. To eschew all change would be to risk stagnation; to embrace it recklessly would be to endanger the sanity of every child. Welcome Today's example is the opening paragraphs of Greg Egan's sci-fi novel Diaspora. We're going to go from unstyled HTML to an awesome design. Ready? Get Started Choosing a Body Font First, let's choose a body font. For longform reading, our font must meet two criteria: 1. It must be legible 2. It must match the overall brand of the design We're typesetting a sci-fi book, so our brand is: * Futuristic * Scientific * Techie Which of these body fonts feels most appropriate for a sci-fi book set in 2975? Try It Out ( ) Source Sans ( ) EB Garamond ( ) Inter ( ) Noticia Text Check My Choice Line Length In unstyled HTML, text runs the full width of the screen. For desktop users, that makes it difficult to track from the end of one line to the beginning of another. So let's make the lines shorter. The ideal line length is 50-75 characters (or 2-3 alphabets ). * Much longer, and it's hard to move your eye from the end of one line to the beginning of the next * Much shorter, and the text feels like an unimportant sidebar Try It Out View Alphabet Guides [ ] Line Length [1000 ] [1000 ] px Continue Side Margins Adding side margins gives a more "designed" look. The iOS/Android default is 16px, but you have some wiggle room. You want enough so it feels intentional, but not so much it's just wasting space. Try It Out Side margins [4 ] [4 ] px Continue Font Size Font size also influences characters-per-line. What's ideal? For longform text on desktop, you want a font size that feels about the same as a well-printed book held at reading distance. That's typically 17-23px or so (but every font - and monitor - is different). Then re-adjust the line-length to be 50-75 characters (if necessary). For longform text on mobile, you want a font size that feels about the same as a well-printed book held at reading distance. That's typically 16-20px or so (but every font - and screen resolution - is different). Try It Out Font Size [16 ] [16 ] px Line Length [1000 ] [1000 ] px Continue Line Height The goal is to add enough line height that you can easily move your eyes from the end of one line to the beginning of the next. This means longer lines need more line height. At a minimum, the letters shouldn't collide. But you don't want so much that you could put a whole other line of text between your lines! You want enough line height that you can easily move your eyes from the end of one line to the beginning of the next. This means longer lines need more line height. On mobile, this means the default value is usually plenty -- though you can still tweak it a bit for effect. Try It Out Line Height [18 ] [18 ] px Continue Paragraph Spacing Of course, we need paragraph spacing too. The ideal paragraph space falls in a range: * It should be more than zero (which would be a normal line break) * It should be less than a full line-height To look designed and proper, a paragraph space should be its own thing - in between a single and double line break. Try It Out Paragraph Spacing [4 ] [4 ] px Line Height [18 ] [18 ] px Continue Choosing a Title Font Next task - let's pick a typeface for the chapter title. Whereas body fonts should (a) hint at the brand you want to convey, but (b) be legible above all, title fonts can be (a) quite strongly branded, (b) even at the expense of legibility. What title font sets the right vibe for a far-future sci-fi novel? Try It Out ( ) Abolition ( ) Karla ( ) Nunito ( ) Playfair Display Check My Choice Title Font Size The title is too small, right? Let's pick a size such that: * Normal, short chapter titles fit on one line * The longest reasonable chapter titles fit on 2 lines But also: * It should feel like a page title, not e.g. the name of the whole site Try It Out Font Size [32 ] [32 ] px Continue Choosing an Accent Font Next, let's choose an accent font - one that can be applied to short labels. Like title fonts, the main focus is on something that matches the brand (in this case: techie and sci-fi). Legibility is also a concern. Accent fonts are used for short snippets, so they can be decorative - but they need to be readable at their smaller-than-title sizes. Try It Out ( ) Bebas Neue ( ) Carbon ( ) DM Serif Display ( ) Varela Round Check My Choice The S.L.U.B. Pattern Since accent text is so short, we can often style it in more dramatic ways. For instance, I like to use something I call the SLUB pattern - smaller, lighter, uppercase, bold. Try making your accent text: * Uppercase, with some added letter-spacing * A size or two smaller than the body text * 70-90% opacity from the original (yielding a lighter variation) * Bold Try It Out Uppercase [ ] Bold [ ] Font Size [16 ] [16 ] px Opacity [100 ] [100 ] % Letter-Spacing [0 ] [0 ] em Next Step Spacing When adding whitespace in a design like this, think of one simple rule: outer spacing is greater than inner spacing. The space between any group of related elements should be greater than the space within the group. For instance: * Spaces 1 and 3 should be greater than space 2, since "Chapter 1:" and "Orphanogenesis" form a logical grouping * Space 4 should be greater than space 5, since the paragraphs form a logical grouping separate from the setting Etc. Try It Out Space 1 [8 ] [8 ] px Space 2 [8 ] [8 ] px Space 3 [8 ] [8 ] px Space 4 [8 ] [8 ] px Space 5 (Paragraph) [8 ] [8 ] px Next Step * UI Course * UX Course * Blog * Tools + Data Visualization Color Picker + Accessible Color Generator + Gradient Generator * Design Hacks Congrats -- you did it! From this... Diaspora * Greg Egan Chapter 1: Orphanogenesis Konishi polis, Earth 23 389 025 000 000 CST 15 May 2975, 11:03:17.154 UTC The conceptory was non-sentient software, as ancient as Konishi polis itself. Its main purpose was to enable the citizens of the polis to create offspring: a child of one parent, or two, or twenty - formed partly in their own image, partly according to their wishes, and partly by chance. Sporadically, though, every teratau or so, the conceptory created a citizen with no parents at all. In Konishi, every home-born citizen was grown from a mind seed, a string of instruction codes like a digital genome. The first mind seeds had been translated from DNA nine centuries before, when the polis founders had invented the Shaper programming language to recreate the essential processes of neuroembryology in software. But any such translation was necessarily imperfect, glossing over biochemical details in favor of broad, functional equivalence, and the full diversity of the flesher genome could not be brought through intact. Starting from a diminished trait pool, with the old DNA-based maps rendered obsolete, it was crucial for the conceptory to chart the consequences of the new variations to the mind seed. To eschew all change would be to risk stagnation; to embrace it recklessly would be to endanger the sanity of every child. ...to this Diaspora * Greg Egan Chapter 1: Orphanogenesis Konishi polis, Earth 23 389 025 000 000 CST 15 May 2975, 11:03:17.154 UTC The conceptory was non-sentient software, as ancient as Konishi polis itself. Its main purpose was to enable the citizens of the polis to create offspring: a child of one parent, or two, or twenty - formed partly in their own image, partly according to their wishes, and partly by chance. Sporadically, though, every teratau or so, the conceptory created a citizen with no parents at all. In Konishi, every home-born citizen was grown from a mind seed, a string of instruction codes like a digital genome. The first mind seeds had been translated from DNA nine centuries before, when the polis founders had invented the Shaper programming language to recreate the essential processes of neuroembryology in software. But any such translation was necessarily imperfect, glossing over biochemical details in favor of broad, functional equivalence, and the full diversity of the flesher genome could not be brought through intact. Starting from a diminished trait pool, with the old DNA-based maps rendered obsolete, it was crucial for the conceptory to chart the consequences of the new variations to the mind seed. To eschew all change would be to risk stagnation; to embrace it recklessly would be to endanger the sanity of every child. Your restyling looks a ton better than the original - and in the process, you've learned about: * Choosing fonts that match your brand * Styling text in a logical way * Handy typography patterns (like SLUB ) For a cheatsheet version of the lessons we've covered, sign up below: Get the typography checklist (& other design tips) Email Address [ ] First Name [ ] Last Name [ ] Get the Typography Checklist No spam. Over 50,000 subscribed. Two-click unsubscribe. And for the full online course featuring every strategy in this tutorial - plus hundreds of others - check out Learn UI Design, my online video course, which features: * 53 lessons explaining design in a left-brained, analytical way * Over 35 hours of video * A vault of me, Erik, redesigning student submissions * A student community with mentors for feedback and help And thousands of students! (And if you don't want to learn more, but still thought this was cool, please share this interactive tutorial on social media - I'll be forever indebted to you ) Learn UI Design Courses * Learn UI Design * Learn UX Design Free Tools * Data Visualization Color Picker * Accessible Color Generator * Gradient Generator * Interactive Typography Tutorial Blog * Home * Featured Posts * Beginner Posts * Advanced Topics Other * Design Hacks * Twitter (c)2022 Kennedy Design, Inc. * Made in Seattle We could do better Some folks might use Source Sans here, but it's not the best fit for something super technical and sci-fi feeling. One hint: I find that squared-off letterforms work better for techie brands such as this Pick Another Font We could do better EB Garamond has a very classic, formal appearance. We want something that has a modern edge. One hint: I find that squared-off letterforms work better for techie brands such as this Pick Another Font We could do better Inter is a fantastic, legible font, but it feels very neutral and clean. Instead, we want to find something with a bit more personality. One hint: I find that squared-off letterforms work better for techie brands such as this Pick Another Font Good Choice Noticia Text meets both requirements of a body font - (1) high legibility and (2) matches the brand. * You know it's highly legible since "Text" is in the name * The slightly squared letterforms - especially in a serif font - feel fresh and modern Continue Continue Good Choice The angular, geometric Abolition works great with the brand - and with our slightly squared-off body serif. Nice Continue We could do better Karla has this sort of quirky friendliness, which works for things that are more casual. But for a sci-fi story taking place in the year 2975, we want something a little... less casual. Pick Another Font We could do better The rounded Nunito is playful and fun, but our far-future sci-fi book demands something that feels more technical and mechanical. Pick Another Font We could do better Playfair Display is formal and classic, but neither of these qualities make sense for our sci-fi setting. Instead, we want something that feels like the future -- not the past. Pick Another Font We could do better Bebas Neue is a great font - and the punchiness of it certainy matches Abolition. But it's simply no good for small sizes. It's too compact, and its details too small. Pick Another Font Good Choice Carbon is as sci-fi as they get. Works like a charm Continue We could do better DM Serif Display is a great font, but would feel more at home as, say, a newspaper headline (the "Display" in its name means it's great for titles). In addition, let's pick something with a bit more of a sci-fi vibe. Pick Another Font We could do better Varela Round has its place - potentially even in a futuristic brand too. But its soft friendliness conflicts too much with the angular, precise title font. What would complement it instead? Pick Another Font