How sizing with rems 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.
|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|
|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.
If the website sets font-sizes in pixels, however, a paragraph set at 12px will always be 12px. This might result in someone not being able to read the paragraph in question.