I’ve been messing around with REMs, EMs, pixels, %ages and VWs over the last few days, trying to decide on a standard I can live by and I’ve come up with a nice solution which I thought I’d share cos I haven’t heard it mentioned before. All the systems have their pros and cons - EMs cascade, REMs are fixed (ish), pixels are set and VW is unreadable on smaller screens. (It is also difficult to control globally) So what I have decided is:
Use percentages to measure all font sizes - ie 100%, 200% - then set the default size in the Body per breakpoint in pixels.
The joy of doing it this way is that you can set up your preferred H1/para sizes at the start then only have to make 4 decisions on how they look per breakpoint. The relationship between headings and paras is consistent throughout the site and there’s none of that faffing around changing individual font sizes on each page/section/div.
What do you think?
Haha… you’ve answered your own question a little I think 
Pixels are just fine and have no problem. Looks like you understand what you’re trying to accomplish. Go with what makes you comfortable, I think you know what you’re doing. Everyone will have a different opinion, based on their experience, but only you have to get in there and manage it… I like pixels honestly… just make sure you’re using a ‘Style Guide’ page created in Webflow before you get in too deep. And remember to make one in PS or somewhere because you can’t copy the Guide to a new project inside of Webflow just yet. Take care.
I think you may have missed the point. I use pixels too, but I set the size at the Body level per breakpoint. The actual font size is a percentage of that size. This makes it dead easy to change font sizes globally.
Ah gotcha… I see what you mean globally. Sounds like you got it figured out. It’s good approach that you could manage easily with a consistent style guide. Sounds fine.
Hi @Hywel
I am not sure I understand what you mean by “set the default size in the Body per breakpoint in pixels”. I guess you are doing it correctly already.
However, typically you would use the browsers default root font size (16px for most users). This way, users can customize their browser defaults as needed. From there, you would use REM units.
Set base font-size:
html { font-size: 1rem; }
Breakpoint handling:
html { font-size: 1.2rem; }html { font-size: 1.4rem; }html { font-size: 1.6rem; }(...)
This way, you never ever touch any of the individual values, rather always the base-font-size displayed above.
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.75rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;
Why REM and not EM? Because EM has a compounding problem that REM fixes. Meaning REM values are relative to the root html element, not the parent div. I guess this is what you mean by cascade?
Remember to set a default value for the line-height property as well.
Calculating EMs (or REMs, from MDN web docs):
m = desired element pixel value / parent element font-size in pixels
For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).
The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.
Percentages is the exact same thing as REM. Typically, you would work from some sort of mockup, sketch, psd file, xd whatever that renders its text sizing in pixels or points. With the given formula, this makes it very easy to translate the graphical prototype into a pixel perfect html site.
As this process is standard, I hope you didn’t waste too much time coming up with this on your own 
Best,
Karl-Heinrich
(edit ) P.S.: I should mention … make sure to have a even more consistent style over all breakpoints by applying this technique to your spacing (margin and padding) as well.
Thanks Karl-Heinrich, I was coming to the same conclusion!
I’m not sure your method is standard though, I have read a lot of articles where REMs and EMs are roundly criticised by designers who believe they need to have exact control over their designs - something that relative measurements don’t give them. Like this one.
Although it is true that most people do not alter size of the text - they simply zoom - there is lots of evidence that partially sighted people do set a higher font size as a default on their browsers. I wandered around the web this morning and sites that don’t alter look very restrictive and probably aren’t liked as much by the search engines.
Tell me, what about elements? I can see how the text varies according to the browser’s REM, but how do we measure (say) the width of the box that holds the text? In Webflow, we can increase the percentage width on various breakpoints but it would be cool for the box to automatically increase horizontal width to accommodate whatever root size is being used - without resorting to code. (Does that question make sense??)
Hi @Hywel,
well I can’t speak for the designers you are talking about but I can definitely you that …
designers ≠ developers
They may shy away from something as simple as calculating a division. 12px is the exact same thing as 0.75em. If this doesn’t convince you, consider this (source):
Lines of code with EM/REM
html { font-size: 1em; }
h1 { font-size: 2.074em; }
h2 { font-size: 1.728em; }
h3 { font-size: 1.44em; }
h4 { font-size: 1.2em; }
.box { padding: 1.25em; }
@media screen and (min-width: 1400px) {
html { font-size: 1.25em; }
}
Lines of code with doing it the ‘designer’ way in PX
html { font-size: 16px; }
h1 { font-size: 33px; }
h2 { font-size: 28px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
.box { padding: 20px; }
@media screen and (min-width: 1400px) {
html { font-size: 20px; }
h1 { font-size: 41px; }
h2 { font-size: 35px; }
h3 { font-size: 29px; }
h4 { font-size: 24px; }
.box { padding: 25px; }
}
What would you prefer 
? In webflow, this gets even worse because you can’t code but need to click click click type, click click click type, click click click type for every element on every viewport, damn oO
Haha funny thing, since you edited your reply … I took a look at the article and see what it says:
You’re never sure what the root element font-size is and you need to do math in order to get something you can relate to (pixel).
So my assumption about designers not wanting to do simple math was correct I guess? Except, he is wrong anyway, since WE get to define the root element font-size.
Here is how you use this:
// --------------------------------------------------
// Base styles for HTML elements
// --------------------------------------------------
html {
color: $primary;
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
background-color: $secondary;
overflow-y: scroll;
direction: ltr;
}
Still not convinced? I only need to change one variable, $base-font-family for a certain breakpoint and now I have successfully adapted my design to a 4k diplay, 8k display or whatever what is coming next. Having the ability to adapt our designs globally is awesome and saves tons of time. One change of a variable makes all the difference vs changing like 100 different px values for another breakpoint. Well, I guess the guy from the article has a lot of time?
Writing an article about it might give him some credibility but that doesn’t mean he is right.
Still not convinced? Take a look at how webflow is built, they are using the exact same thing 
// --------------------------------------------------
// Base styles for HTML elements
// --------------------------------------------------
html {
color: $primary;
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
background-color: $secondary;
overflow-y: scroll;
direction: ltr;
}
I am not sure I understand your question. Maybe you can tell me what you are trying to achieve?
Best,
Karl-Heinrich
Thanks so much Karl-Heinrich.
My background is not in development - or design! I just happened to have been doing websites for 7 years…
I have been using Webflow for the last couple of years and have about 90 websites with them and I have never written a line of code, BUT, I am trying to better myself by understanding what proper designers do!
I decided to look into font sizes a few days ago and spent hours reading up what the pros use and, with the help of people like you, I am getting closer to adopting a new standard for future and current sites.
My question: I can see exactly what you mean by using REM and I will use that measurement going forward, but my problem is the relationship between a font and an element.
Say I create two divs holding text in a horizontal flexbox and measure the width of each box by using percentages which I adapt to larger %ages for smaller screens (breakpoints). However the box looks daft when filled with REM text because although the text gets larger, the box stays at (eg) 45% of the div wrapper. I would like it to fill the width of the screen but REMs are not related to viewport width so the box stays at 45%. Is there any way the box can resize according to the root font size?
Does that make sense or is that a stupid question?!
Hi @Hywel,
thats a lot of websites
Are you doing them for clients?
This sounds like something specific for your design. Could you maybe grant me a look?
If not, can you throw together a quick example on webflow, codepen, jsfiddle whatever?
If I understand correctly, you want your font to fill the box, independent of the boxes width?
This will get you in trouble with vertical spacing but I can provide a code example if you need one.
I do! Small local websites for local businesses - hence the large number. (Those are just the currently active sites, I’ve probably done over 250 in the last 7 years!
I guess I should continue measuring element width by %age and adjust per breakpoint, the trouble is Webflow is not good at larger and medium screens ((HIDPI-XL or notepad-sized devices) - I understand they are introducing more screen sizes shortly, but at the moment measuring a ‘text-holding’ element by REM doesn’t really cut it.
Here’s a site I’ve been messing around with:
https://preview.webflow.com/preview/standardtemplate?preview=332e723a4bb7b0cda70a625e2925b4a5
http://standardtemplate.webflow.io/
Hi @Hywel,
ok wow, well done I guess 
If any of your clients ever decide to step up their online game and add native app features to their websites like add to homescreen, push-notifications, offline-availability and that sort of stuff, make sure to shoot me a message.
Continuing on with our discussion, you can use custom breakpoints to achieve a more fine tuned look, like so
@media (min-width: 1200px) {
.d-xl-none { display: none !important; }
.d-xl-inline { display: inline !important; } }
REM you would use for spacing like so:
.py-1 { padding-top: 1rem !important; }
.py-2 { padding-top: 2rem !important; }
But … I don’t really understand why you would want to give your divs a %age outside of their natural widths? Rather work with containers. They webflow default one has a width of 940px. If this doesn’t work for you. Create your own like
.container-xl { max-width: 1140px !important; }
From there, you would just add padding (for spacing inside) and margin (for spacing outside). No need to give fixed %ages. Btw if you want to make sure you stay aligned with the grid, add margin left and right -15px to your rows, as webflow uses a 30px gutter width.
For everything else, like stacking columns vertically on certain breakpoints, you would use flex settings.
This should give you a consistent look across all breakpoints.
I am really feeling like giving a tutorial on responsive web design fundamentals 
So there are people out there that explain this stuff way better than I could ever do. Maybe just switch from designer blogs over to dev blogs, even if its just frontend. Just saying ^^
I really appreciate your help, but, as I say, I don’t write code. I am not proud of that, but I have always only used Webflow to do the work.
On that basis, I will set the Body font size as 1rem (I can’t see any benefit of using 62.5%) and font styles in %ages. This allows me to achieve two goals:
- Work with the font size determined by the user.
- Adjust the Body font size using REM per breakpoint - eg 1.25REM - so all font sizes in that view adjust automatically - as a percentage of the REM.
This system makes it dead easy to keep a consistent look throughout the site, and simply fine tune a particular font size per breakpoint by varying the %age width of that style.
Does that make sense?
Hi @Hywel,
if it fits your needs, you don’t have to! Don’t excuse yourself 
Yes, thats the way to go. Any and all values I gave were just for demonstration purposes.
My base-font-size is also 1 REM. Do the same for your line-height and any spacing classes, so this will stay consistent, too.
And get rid of any and all fixed widths, rather use min and max values (like containers).
Since you already have a successful business for you going, I’d love for you to take a look at more topics about creating great experiences for the web. Google has everything you need - and more!
Regarding what I mentioned about responsiveness, you can find everything here.
Then go back and apply everything you’ve learned to your projects. You’ll see that this will make things easier and more maintainable, especially if you are using webflow. Every click you save is like a second of productivity you gain 
Best,
Karl-Heinrich
I cannot tell you how much I appreciate you giving up part of your Sunday helping an idiot like me, Karl-Heinrich. It’s one of the reasons I love Webflow - all the lovely and generous people using it. Thank you so much.
The only difference in the testing I have done so far is that I use a multiplier for line height which I guess is pretty much the same as a %age of REM. I have applied the principles we discussed to one of my sites this morning: http://taxi-logistics.webflow.io and then checked it in Chrome by adjusting the Chrome setting to Large and Very Large. It all looks great.
I rarely use fixed widths on anything so hopefully I am now on the right track! (Quite a lot of work updating 90 sites though…) I can’t wait for Webflow to add more breakpoints as that will finally cover the weird sizes (Notebook and HUGE!) that they don’t at the moment and then I’d be able to absolutely tie it all down. The link you sent looks very interesting, I will trawl through that in the coming weeks to see if I can continue to improve things.
Once again, thanks so much for your help.
Regards
Hywel
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.