How sizing with rems and ems works in Flourish

In Flourish, most settings for sizing (fonts, margins, etc) are specified in rems rather than pixels. This might be confusing at first if you're used to pixels, but there are many reasons rems are better for use on the web.

What is a rem?

rem stands for root em and represents the font-size of the page's root element (i.e. the  html element). So 1 rem is equal to the root font size, 2 rem is double the root font size, and so on.

(An em is similar but references the font-size of the current element rather than the root.)

But what is the root font-size? By default in most browsers, the root font size is 16px, but handily we can change this on different screen sizes.

rems give more flexibility for designing across different screen sizes

If we design a visualization specifically for a typical computer, our labels and spaces might look way too big on mobile. Similarly, if we'd like to show a Flourish visualization on a huge screen, we want our visualization and our labels to adjust to the larger screen.

This is why we've defined different breakpoints for different devices. And for each of these breakpoints, we scale the base font-size up or down by a certain percentage. Here's a table that lists the different breakpoints, font-size percentages, and what that equals in pixels for for most devices. These can be adjusted in themes for enterprise customers.