Projects/Usability/HIG/IconsAndText: Difference between revisions
| Line 9: | Line 9: | ||
* If Secondary Text is normally present but is empty in a particular instance, align the Primary Text to the vertical center. | * If Secondary Text is normally present but is empty in a particular instance, align the Primary Text to the vertical center. | ||
* Where icons are shown without text, always provide tooltip text and alternate text for accessibility. | * Where icons are shown without text, always provide tooltip text and alternate text for accessibility. | ||
* To be future-compatible with scalable interface functionality for high dpi displays, use units.smallSpacing in place of the 4px increments defined here. | |||
Revision as of 17:48, 23 July 2014
Purpose
The combination of icons and text can be used to identify items of data or actions in a user interface. Examples include toolbar actions, file and folder displays in a file manager, application listings and notifications.The layout should be consistent.
Guideline
- Where icons are shown with text, use the layout guidelines above.
- For 16x16px icons and smaller, the 8px margins may be reduced to 4px.
- If Secondary Text is normally present but is empty in a particular instance, align the Primary Text to the vertical center.
- Where icons are shown without text, always provide tooltip text and alternate text for accessibility.
- To be future-compatible with scalable interface functionality for high dpi displays, use units.smallSpacing in place of the 4px increments defined here.