Please enable JavaScript.
Coggle requires JavaScript to display documents.
Design (Hierarchy (Text hierarchy (Font weights (A normal weight (400 or…
Design
Hierarchy
How import and element appears in relation to one another
Highlighting import information while de-emphasizing secondary and tertiary information
Text hierarchy
Don't rely solely on font size
Use heavier font weights or softer colors to emphasize or de-emphasize
Colors
Two to three shades of gray
Font weights
A normal weight
400 or 500
A heavier weight
600 or 700
Don't use anything below 400
Contrast
Reducing contrast between background and foreground to de-emphasize
Find a lighter color with the same H but different S and L
Reducing opacity would lead to dull and see-through text
De-emphasizing
De-emphasizing competing content to make important content stand out
Labels
Using the label: value format hinders presenting a hierarchy
Skips labels
Known formats
Email addresses
Can be understood from the context
A department under a name
Combining labels and values
12 left in stock
De-emphasized labels
Labels as supporting content
Emphasized data
Emphasized labels
When the user is going to look for the label
Information dense pages