1. Typography
  2. Spacing and alignment
  3. Writing style
  4. Color

Using these guidelines

These design guidelines are intended to create consistency across all DHIS2 apps. Use the default scales/values/concepts defined below unless there is a good reason not to. Usability is more important than consistency, but where possible all DHIS2 apps should look and act similarly.

Typography

Font Choice

The font for all dhis2 apps and interface is Roboto. In most places Regular weight is the correct weight to use. Medium and Bold can be used to distinguish elements in a hierarchy, but Regular is the default weight.

Using the typographic scale

A typographic scale is a set of font sizes that can be used in a design. Defining a typographic scale makes deciding on a font size much easier. The font sizes in the scale below provide a reasonable option for 99% of scenarios. Using the scale will help create a sense of hierarchy in the interface. By using a scale and restricting ourselves to these sizes, we make being consistent easier and remove some of the ambiguity of choosing a size.


The typographic scale I use for all my work is as follows:

12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72


Be consistent where it makes sense. For example, all 'help text' in an app could be set in one size, perhaps 14. Similarly, all section headings could be set at 16 or 18. Consistency makes things easier to understand because the user can identify patterns in the interface. Consistency between apps is nice too, but always make sure something makes sense as well as is consistent. Making sense trumps consistency.

Todo: add example of scale in use in a real ui

Must the type scale be used in all cases? No, where there is a good reason to use another size, do that. But by default the scale should be used.