There are two kinds of weight in UI design—visual weight and font weight. Visual weight, in general, can be creates through the use of negative space, color, and contrast. | Q | A | | ------------------------------------------ | ----------------------------------- | | What are two kinds of weight in UI design? | Font weight, visual weight | | What are ways to create visual weight? | Negative space<br>Color<br>Contrast | But font weight applies to, well, *fonts*—to words and type specifically. According to Matt Damon Smith, font weight affects three things: the perceived hierarchy of information, the readability of text, and (sometimes) the affordance of action. | Q | A | | --------------------------------- | ------------------------------------------------------------------------------------------------- | | Font weight affects, what things? | Perceived hierarchy of information, readability of text, and (sometimes) the affordance of action | In CSS, the `font-weight` property accepts two kinds of values: keywords and numeric values. There are four keywords: lighter, normal, bold, and bolder. And there are 9 numeric values: 100 - 900. | Q | A | | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | | What *categories* of values does `font-weight` accept in CSS? | Keywords, numeric values | | What keywords does `font-weight` accept in CSS? | Lighter, normal, bold, bolder | | What numeric values does `font-weight` accept in CSS? | 100-900 | Typically, I *could* use 100 or 200 font weights for really large headlines; in smaller sizes they can be nearly impossible to read. 300, 400, and 500 weights are usually used for body copy. And 600, 700, 800, and 900 weights are usually reserved for headings (unless I'm shooting for a chunkier style). | Q | A | | ----------------------------------------------------- | -------------------------------------------------------------------- | | Typically, when should you use 100-200 font weights? | Really large headlines (because it's harder to read in most context) | | Typically, when should you use 300-500 font weights? | Body copy | | Typically, when should you use 600-900 font weights? | Headings, unless you're going for a chunkier style | Many common fonts only have a couple of weights: 400 (regular) and 700 (bold). If I try to artificially alter these fonts toward other weights, the system might do it on its own, creating a "faux-bold" or "faux-italic." I should generally *beware* these, as actually creating a bold weight for a typeface involves careful attention to letterforms that systems cannot be relied on to do properly. | Q | A | | ------------------------------------------------------------------------------------------------ | ----------------------------------- | | What is it called when the OS artificially creates a weight that is not currently in a typeface? | Faux-bold, faux-italic, etc | ## Exercises