Font Weights, Styles, and Sizes10:53 with Hope Armstrong
Properly choosing and setting up our font family’s weights and styles will make all the difference when displaying them on our site. Remember, faux is no way to go.
[MUSIC] 0:00 Now that we've looked at some principles and have a background in typography, 0:04 we'll get into how to practically achieve good typography on 0:08 the web in the next few stages. 0:12 In the previous stage, we learnt how to choose fonts. 0:15 In this session, we'll start with the basics of a font family's, weights, and 0:19 styles, like bold and italics. 0:22 First, it'll be good to mention here that faux bold and 0:26 faux italic are faux pas, which simply translates to don't do them. 0:29 Faux bold or faux italic means it is a false bold or fake metallic. 0:35 These can occur when you only have one weight and style of a typeface. 0:41 Design programs in CSS have the ability to fake the bold or 0:46 italic style of that web font. 0:50 But believe me, it ain't pretty and it can hinder legibility. 0:53 A faux Bold is created by thickening up the original font. 0:58 This can create issues with legibility as counters close up, 1:01 dark patches of color can appear, and letters get distorted. 1:05 Type designers carefully craft their bold ways to correct these issues. 1:10 Faux italic texts created by obliging or 1:15 slanting the original font to a certain degree. 1:18 At first glance, you might think this looks okay, but let's take a closer look. 1:21 Italic versions of Serif type bases are actually created in a more cursive style. 1:27 They're not just slanted versions of the regular or Roman counterparts. 1:33 There can then some, and 1:38 often their letter forms are entirely different all together. 1:39 Notice the changes here such as how the cross bar on the e becomes more fluid or 1:43 how the f elegantly descends below the baseline. 1:49 Because italics are often use for emphasis on the web, 1:53 true italics can better emphasize words or phrases than faux italics because of this. 1:57 For San Serifs, this cursive nature is less accentuated. 2:03 So you might think that you can get away with the faux, but you can't. 2:08 Any time you oblique the font, the weight of the letter forms gets 2:12 unevenly distributed, which creates uneven color. 2:16 Also, certain letters can change entirely in a true italic, 2:21 such as a two story Roman A changing to a one story italic A. 2:26 Again, type designers meticulously 2:31 build italic versions of their fonts correcting these issues. 2:34 So be sure to utilize fonts that have bold and italics instead of trying to fake it. 2:38 This not only gives the user a better experience, but 2:44 it also improves the legibility and readability. 2:48 Be aware too that some typefaces online are sold as having italics, but 2:51 really they're just uncorrected, oblique versions of their fonts. 2:56 This is why when we discussed using a typeface, 3:01 you'll want to make sure it's well built with all the necessary weights and styles. 3:04 Let's unpack that. 3:09 Sometimes typefaces have a basic array of weights like normal and bold. 3:12 But other times a family of fonts can range from thin, to light, 3:17 to normal, to semi-bold to bold to black. 3:22 Let's look at the different weights of Open Sans using Figma. 3:26 As you can see, there's light, light italic, regular, italic, and so on. 3:31 Some fonts have additional styles such as hairline, which is even thinner than thin, 3:37 an ultra which is even thicker than extra bold or black. 3:43 For this entire text block, the family name is set as Open Sans, 3:48 but the text within is a different weight and/or style. 3:53 Click into the text to see what it's set to. 3:58 If you see a message about missing fonts, 4:01 download all the styles of Open Sans from Google Fonts. 4:03 Figma just has a few styles pre-installed. 4:08 In addition to those settings, we can also make the text underlined 4:12 We can format it in all caps. 4:20 This is preferable to typing it in all uppercase letters. 4:23 It's much easier to switch back to title case if you decide to change it later. 4:27 We can also format it in small caps, but only if the font supports it. 4:34 We see here that Open Sans doesn't support small caps. 4:41 Let's see it in Play Fair, a Google Font that support small caps. 4:45 Be careful to not choose false small caps as we want the true small caps 4:58 designed by the type designer. 5:02 Great, now you've gotten a handle on the basic formatting options. 5:07 Next I'll introduce you to the design project we'll work on in this course. 5:11 As I introduced concepts, I'll demo it and a design program called Figma. 5:16 To follow along, download their project files. 5:21 Here we see copy from the science fiction book, The War of the Worlds. 5:25 I've also added some headings. 5:30 The text is set an Alegreya from Google fonts. 5:33 I chose this typeface because of its roots and 5:36 literature due to the continent hand being a book. 5:39 Is diverse weights, italics, and the inclusion of small caps and 5:42 other features. 5:46 We'll use this file to play around with type. 5:48 As you can see, all the text is the same size, which really flattens the hierarchy. 5:51 I can make the heading bold to stand out, but there's even more we can do. 5:58 Let's talk about text size. 6:04 When designing for screens and a design program, you'll specify text in pixels. 6:06 A pixel is a fixed unit of measure that pertains to media with display screens, 6:12 such as a computer. 6:17 A good rule of thumb is to set your body text 6:19 anywhere relative to 16 pixels to 24 pixels. 6:21 Readers eyes are usually a few feet away from the screen. 6:26 So these larger sizes are necessary for comfortable reading, 6:30 whereas smaller text can strain and tire their eyes. 6:33 This range is diverse too as every typeface is different. 6:38 As we've seen before, 6:43 the x height of a typeface can greatly affect its perceived size. 6:44 So, use what you've learned and make a judgment call on what works best. 6:49 When in doubt, lean towards the larger size to be safe. 6:53 As the design gets implemented with code, 6:58 the text size will likely translate to a non-fixed unit. 7:01 While pixels make it easy to create exact designs with a fixed unit, 7:05 designs are viewed on a broad range of devices out in the wild. 7:09 But because this is a fixed unit of measure it can create 7:14 more work with responsive typography, which scales text size up or 7:18 down depending on the screen size. 7:23 So, pixel should be swapped out with responsive units like and 7:26 rems, which are relative units for font sizing. 7:31 This is incredibly helpful, scalable, and powerful for responsive typography. 7:34 But no need to act on that now, we'll work in pixels as we design. 7:41 And if you decide to develop with code, you can do so 7:46 with relative units in minds. 7:49 Once you've set your body text size, it's time to adjust the rest of the text. 7:52 Sizing your headings, paragraphs, and other text elements may seem a little 7:57 tricky, and it's not a great idea to just guess by shooting in the dark. 8:01 This can lead to inconsistent headings and paragraphs sizes, 8:07 which is why following a typographic scale can help immensely. 8:11 A scale gradually increases at a certain rate to ensure consistent proportions for 8:16 your font sizes. 8:21 The classic typographic scale increases in intervals of 1, 2, 3, and then 12. 8:24 It's been used for centuries and is reliable to adhere to, 8:30 especially if you're using 16 pixels as your base size. 8:35 16 pixels is great, but I'd like to enlarge the body copy to 20 pixels. 8:40 That size is not in the classic scale, but don't fret. 8:46 I'll look at typescale.com to build a type scale. 8:50 This site is incredibly helpful because you can set your base size, 8:54 test different scales, and even import Google web fonts. 8:58 Our base size is 20 pixels, let's choose the major third as I like it 9:03 sizing and we can change the font family to Alegreya. 9:08 Feel free to test out the different scales to see what they look like. 9:13 They're perfect fourth and fifth are also commonly used. 9:17 We're now given some sizes in ems and pixels. 9:21 Focus on pixels for now, ems are important when it comes to implementing it code. 9:24 Now, let's set the font size for the headings. 9:30 Here's the order of the headings by text size, title, paragraph headings, and 9:34 author name. 9:39 For simplicity, all around down to the nearest pixel. 9:41 Also, note that you don't need to use the largest text size, you can start and 9:44 stop anywhere within the scale so long as you choose adjacent sizes. 9:49 The largest heading will be our h1 or heading 1 at 48 pixels. 9:56 The next will be our h2 at 39 pixels, and the third will be our h3 at 31 pixels. 10:01 Then I'll set the body text to 20 pixels. 10:10 I'll go ahead and create a text style for each heading. 10:16 This sets us up for quick edits later on, and it keeps the text sizes consistent. 10:20 Great, now that setup, we still have a ways to go but 10:44 getting a proper body size and scale is a great place to start. 10:48
You need to sign up for Treehouse in order to download course files.Sign up