One of the most important tasks when designing type is to create a hierarchy. People scan a page rather than reading everything top to bottom.
The text on a page can be broken down into smaller blocks that each serve a function and provide different types of information your viewers are interested in. By giving each of these blocks a different style you make your product more accessible, understandable, and help people make sense of what you are presenting.
Open the example use type styles to create a type hierarchy. Your first and most important step is to identify the different elements in the text. These might be things like:
- headings
- subheadings
- footers
- quotes
- prices
- descriptions
- etc.
Use these design concepts to complete the challenges:
- Color
- Size
- Weight
- Font Style
- Type Contrast
- Position
You can style the examples in Sketch. You can try these further challenges:
- The text has also been provided as HTML style this with CSS.
- Style both the Sketch file, and the HTML file.
- Style the Sketch file first, then use CSS and HTML to recreate what you see in sketch.