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.
| Breakpoint | Percentage of root font size | Equivalent in px (in most cases*) |
| Small mobile phone: 0–379px | 62.5% | 10px |
| Large mobile phone: 380–579px | 75% | 12px |
| Tablet: 580–1079px | 87.5% | 14px |
| Desktop: 1080–1279px | 100% | 16px |
| Big screen: 1280px and larger | 120% | 19.2px |
*not all devices default to a 16px as their root font size – more on this below
rems are accessibile
Another reason for using rems in web design is accessibility.
In most browsers, a user can set their default browser font-size to be a different size to the default (typically 16px). If the user sets their default to 20px, all rem-based sizing will scale accordingly.
What are ems?
While most of Flourish uses rems or pixels, occasionally, it uses ems. Ems are similar to rems in that they are also a responsive sizing unit. However instead of being proportional to the root font size they are proportional to the font size of the parent unit. This gives more detailed control over how an element sizes for example the space between filter sizes in proportion to the font size of the flourish controls block rather than the whole page.