ALL SYSTEMS ONLINE / NewAHU Graphic Builder — configure any AHU and export native Niagara PX · $750, 25 exports included Try it live →
News

Typography for BMS Graphics: Hierarchy Before Fonts

Abstract typographic hierarchy illustration with descending blocks and one large value panel
DEMO
Live Hierarchy Playground
One equipment card, four stages - watch the same text become scannable

Ask what font a dashboard should use and you have already skipped the important question. On a BMS graphic, typography is hierarchy first and typeface a distant second: an operator does not read a page, they scan it for one number. This guide covers how we structure type in Niagara UI templates - step through the playground above to watch a flat card become a scannable one.

Size before typeface: the fastest hierarchy tool is two clearly different sizes - a large value and a small label. Adjacent sizes from the type scale (20 next to 16) read as a mistake; skip at least one step so the difference is unmistakable at a glance.

Weight is contrast you get for free: bolding the value and the equipment name separates data from metadata without adding a single colour or size. If a card still reads flat, reach for weight before you reach for another hue.

Stay on the scale: our packs use six sizes, from page titles down to point labels, and nothing in between. Every off-scale size you invent is one more thing to keep consistent across a hundred PX pages - and the first thing to drift when three people edit the station.

Respect the numbers: values are for comparing, so keep decimal places consistent per point type and let related values share an alignment edge. A column of readings with wandering decimals makes the operator do arithmetic that the layout should have done.

Save uppercase for small labels: caps with a little letterspacing make excellent 12-14px labels and terrible sentences. If a line is longer than a few words, it belongs in mixed case at body size.

Notice what the playground never changed: the typeface. Hierarchy did all the work - which is exactly why the same structure survives whatever brand font your client standard requires.

Back to News