Use Type Size and Weight to Depict an Information Hierarchy
This is a simple, but effective, method for organizing your views and making them instantly understandable for a wide range of users. Let’s look at an example of how not to do this in an imagined “Calendar” app user interface:
Figure 10.1: This example shows all the type in the pop-over at the same size and weight
Simply by altering the type size by a noticeable factor, we can show the user the most relevant information first:
Figure 10.2: This example shows how using different type sizes (or weights) can help differentiate information
Scale up the information that you want users to see first, or that you think they’ll find most useful, and they can read on further for extra detail.
Another option is to use type weight instead of scale, as in this example. Using a selection of bold, regular, and light typefaces has a similar effect to altering type size, but reduces...
