Legend
Legends help users navigate a visualization by describing the relevant visual properties, such as fills, patterns, and symbols. For live visualizations, legends also explain any available interactivity that isn’t obvious in the visualization interface.
FEWS NET visualizations always use legends, but the legend format varies depending on the type of visualization.
Chart
Use the chart legend for all charts.
Components
The legend contains:
Title, for live maps
Instructions, for live maps if needed
Sections, if needed:
Section titles
Items
Items
Padding and spacing
16px on all sides
8px horizontal between title and instructions
4px horizontal between instructions icon and text
18px vertical between bottom line of title text (or instruction text, if present and wrapped) and items (or first section title, if present) (margin)
8px vertical between section title and items in section (not applicable)
16px vertical between sections, if present (not applicable)
8px horizontal between item symbol and text (extends legend item width for png images, might want to reduce)
24px horizontal between items (extends legend item width for png images, might want to reduce)
24px vertical between items when wrapped (considerably higher than now)
40px minimum space between the longest text line and the download button, when the button is present (there is no download button in the legend)
8px between the title and download button, when the button is wrapped below the title (there is no download button in the legend)
Layout and responsiveness
Legend width fills the visualization frame
Legend height hugs the enclosed components
Item symbols sit left of item text and are vertically centered to text
Item text wraps below to additional lines if needed
Items hug left and wrap to additional lines if needed
For live charts:
Title hugs left, instructions sit to the right of the title and hug left
Instruction icon and title are vertically centered to instruction text
Instruction text wraps below to additional lines if needed
Background
The legend background uses White (#FFFFFF).
Symbols
The item symbol for items describing data represented as a bar is a 20px square with background fill matching the bar color and .45px border line, USAID Black (#212721).
The item symbol for items describing data represented as a line is a 50px wide horizontal line with 6px stroke weight, round cap, with fill matching the line color. Dotted or dashed lines should use the same pattern in the symbol. Dotted or dashed symbols may be modified to better represent the line pattern. (Will likely be too long for png images, symbol width is defined by line width. Might consider a separate set of values for pngs.)
Icons
The instructions icon is 16px square enclosing a circle with a lowercase “i” inside centered, Info Blue (#2B6CB0).
Typography
FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.
Style name | Application notes | Font | Line height | Color |
---|---|---|---|---|
Legend title | 14px (10.5pt) Regular | 120% | USAID Black Dark (#090B09) | |
Legend section subtitle |
| 14px (10.5pt) Semibold | 120% | USAID Black Dark (#090B09) |
Legend text |
| 14px (10.5pt) Regular | 120% | USAID Black Dark (#090B09) |
Legend instructions | 14px (10.5pt) Regular | 120% | Info Blue (#2B6CB0) |
Map
Use the map legend for all maps.
Components
The legend contains:
Title, for live maps
Instructions, for live maps if needed
Section boxes:
Section title
Descriptive text
Subsections, if needed:
Section subtitle
Items
Items
Padding and spacing
16px on top and sides
8px on bottom
8px horizontal between title and instructions
8px vertical between title and instructions, when wrapped
4px horizontal between instructions icon and text
8px vertical between bottom line of title text (or instruction text, if present and wrapped) and first section box
Inside section boxes:
8px on top
16px on sides and bottom
12px vertical between bottom line of section title text and items, or first subsection title if present
For subsections:
8px vertical between subsection title and items
12px vertical between subsections
8px vertical between section boxes
120px minimum width for each item
8px horizontal between item symbol and text
8px minimum horizontal space between items
8px vertical between items when stacked in single column
4px vertical between items when stacked in multiple columns
Layout and responsiveness
For static maps:
Legend falls below the map body
Legend width fills the visualization frame
Legend height hugs the enclosed components
For live maps:
Title hugs top left, instructions sit to the right of the title and hug left
Instruction icon and title are vertically centered to instruction text
Instruction text wraps below to additional lines if needed
For live maps 1200px wide or wider:
Legend sits to the right of the user-interactive zone
Legend width and components fill available space
Legend becomes narrower, to minimum width of 252px, before wrapping
Legend height fills available space
For live maps 1199px wide or narrower:
Legend falls below the user-interactive zone
Legend width and components fill the visualization frame
Legend height hugs the enclosed components
Section boxes stack vertically, below title and instruction text if present
Item symbols sit left of item text and are vertically centered to text
Item text wraps below to additional lines if needed
Items sit in a single horizontal line hugging left
If available horizontal space is narrower than can fit all items on one line with minimum horizontal spacing, items wrap into two equal width columns that fill the available horizontal space. Items stack vertically and hug left within these columns. If minimum space between any two vertically aligned items in these columns is not available, items wrap into a single column.
Background
Legend background uses White (#FFFFFF)
Section box background uses Gray 1 (#F4F5F5), except Remote Sensing maps, which use White (#FFFFFF)
Border
Section boxes of Remote Sensing maps use a 1px, Gray 3 (#D1D3D4) border
Corners
Section boxes use a rounded corner with 4px radius
Symbols
The item symbol for items describing data represented as a fill is a 20px wide, 14px high rectangle with background fill matching the fill color and texture and .45px border line, USAID Black (#212721).
The item symbol for items describing data represented as a bubble is a []
Icons
The instructions icon for live maps is 16px square enclosing a circle with a lowercase “i” inside centered, Info Blue (#2B6CB0).
Typography
FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.
Style name | Application notes | Font | Line height | Color |
---|---|---|---|---|
Legend title | 14px (10.5pt) Regular | 120% | USAID Black Dark (#090B09) | |
Legend section title | 14px (10.5pt) Bold | 120% | USAID Black Dark (#090B09) | |
Legend section subtitle | 14px (10.5pt) Semibold | 120% | USAID Black Dark (#090B09) | |
Legend text |
| 14px (10.5pt) Regular | 120% | USAID Black Dark (#090B09) |
Legend instructions | 14px (10.5pt) Regular | 120% | Info Blue (#2B6CB0) |