Use of type in the desktop: Semantic use of fonts in the interface

Registered by Iain Farrell

Most GTK themes, including Ubuntu’s Light themes, currently use a single font — one typeface in one size and one weight — for nearly all interface elements. This makes some things harder to see than they should be, some things larger than they should be, and generally looks monotonous.

To fix this, we should evaluate what exactly Ubuntu does, what other operating systems do, what would look most beautiful, and how we will achieve it.

Blueprint information

Status:
Not started
Approver:
Ivanka Majic
Priority:
Undefined
Drafter:
Matthew Paul Thomas
Direction:
Needs approval
Assignee:
Andrea Cimitan
Definition:
Approved
Series goal:
Accepted for natty
Implementation:
Unknown
Milestone target:
milestone icon ubuntu-11.04-beta-1

Related branches

Sprints

Whiteboard

[Copied from Gobby document: multimedia-design-n-type-in-the-desktop]

There is a single system-wide application font option, which is used almost everywhere. At the moment, applications need to define fonts very manually. On the other hand, MacOS X and Windows have a huge variety of font styles that application developers can choose for particular cases.

We need to identify different font styles that would be useful across applications. Find a general set of styles. One approach is to collect screenshots from a variety of desktop applications in Ubuntu and make notes about how they can be fine-tuned. These styles should all build on a baseline font that the user can configure as usual.

From the baseline different siuations will scale up or down and users will be able to adjust around these baselines if they want to.

Should identify information hierarchy for a number of applications
 - GIMP
 - Appearance prefs
 - Font prefs

Define Compact windows, which should have smaller font sizes than application main windows.

Actively discourage developers from using arbitrary, absolute values for fonts; we should make sure applications move towards font styles instead.

Controls like for example the choose font list box could be a lesser opacity so user is drawn more to content they want to interact with.

Sizes:
Baseline: Checkbox
Slider values: Smaller than baseline
Titlebar: unique case - leans towards larger
Control captions: smaller
Table headings: smaller, bolder
Button labels: Equal
Tab headings: larger - should explore this as may be a problem in other languages where tabs are long
menu: larger
Dialog section heading: same as baseline, bolder (maybe also larger, different colour)

Work items:
[daniel-p-fore] Speak to Cody about whether some sort of GTK version of the DOM inspector exists, or could be created to help with this: TODO
[otto-chaotic] Work with mpt to review font guidelines from the competition: TODO
[mpt] Work with Otto to review font guidelines from the competition: INPROGRESS
[mpt] Test a selection of common apps, and share resulting findings: TODO
[mpt] Specify standard fonts for controls, and API for using standard font variants: TODO
[daniel-p-fore] Investigate whether we can make use of dynamic loading of gtkrc strings in applications: TODO
[cimi] Implement small window frames and controls, with matching font size, for floating windows (e.g. palettes): TODO
[cimi] Implement any standard font changes for controls: TODO
[calumpringle] Design simplified font settings: TODO
[dbarth] Find someone to implement simplified font settings, and reassign this work item to them: TODO

References:
Apple guide - http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGText/XHIGText.html#//apple_ref/doc/uid/TP30000365-TPXREF113

Microsoft guide - http://msdn.microsoft.com/en-us/library/aa974176.aspx#fonts

(?)

Work Items