Sizes

fs-play-icon
7min01s
Close video
Explanation of 4pt system, measurements, and px to rem conversion
fs-structure-icon

4pt system and rem

  • Client-first uses a 4pt system. It allows to stay unified with our spacing between elements and sections.
  • Client-first is using REM measurements site-wide for accessibility.
  • If you've never used rems, don't worry. Confused why we are switching px to rem? We'll explain it in full soon. We're here to make it simple.
Below is a px to rem conversion chart for Client-first. These preferred sizings for all spacing and element sizing across your build.
By default in Client-first, we use a 16px html font size. Using a 16px html font size will create a clean and organized px to rem conversion using our 4pt system.

Below is a list of all accepted px values with their converted rem measurement.

Any time you want to use a px value inside Webflow, use the converted rem value. We convert px to rem by dividing the pixel value by 16.

We are using rem on typography, margins, widths, and anything else that uses px value.
4px = 0.25rem
8px = 0.5rem
12px = 0.75rem
16px = 1rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
40px = 2.5rem
48px = 3rem
56px = 3.5rem
64px = 4rem
72px = 4.5rem
80px = 5rem
96px = 6rem
128px = 8rem
160px = 10rem
192px = 12rem
256px = 16rem
320px = 20rem
384px = 24rem
448px = 28rem
512px = 32rem
640px = 40rem
768px = 48rem
896px = 56rem
1024px = 64rem
1152px = 72rem
1280px = 80rem
1440px = 90rem
1536px = 96rem
1920px = 120rem
2560px = 160rem
Client-first suggests working with these these values only.

There are 3 exceptions to using the above values.

1. Typography
Using 14px for font-size is common and recommended when 16px is too large. 12px font-size is often too small for typography.
14px = 0.875rem
2. Small spacing that is smaller than 4px
Use 2px for these smaller spacing values.
2px = 0.125rem
3. When using 1px
When using 1px, for example as a css border, use 1px value. Do not use rems. Using px will create exactly 1px line on any device without retina or any other scaling interference
1px = 1px

The math

Every 16px is 1rem when the browser's font size is set to normal in browser settings.

If I multiply 16px by 6, that would be 6rem. 16 x 6 = 96px = 6rem

If I want to figure out how many rems are inside a px value, divide the px value by 16.

How many rems is 161px? 161 divided by 16 equals 10.0625rem!

If I wanted to use 32px font size in my Webflow project
32px / 16 = 2rem as the font size.

If I wanted to use 1024px max width in my Webflow project,
1024px  /16 = 64rem as the max width.

All of this math all assumes that we have our font-size set to 16. If it were set to 14, for example, we would divide by 14 to convert our px to rem.

We recommend always following the 4pt system in Client-first and using 16px as your html font-size.

  • It creates easy and simple to remember rem conversions (ie. 2.5rem)

  • The 4pt system and 16px as a base work so well together. Everything 'fits' into whole numbers and simple decimal amounts.

If your client's project was designed outside of the 4pt system, ask the client if they're willing to change the spacing to a unified spacing system. They usually say yes!

fs-calculator-icon

Calculator

Calculate custom px to rem conversions
If you need to replace the 4pt system, or you must use a different html font-size, we have built a px to rem calculator to base your rem measurements on

Next: Fluid Responsive

Use our fluid responsive css tool to help you build fluid responsive design websites on top of Client-first.
fs-arrow-icon