I would appreciate all thoses who build websites for their clients to offer there thoughts here.
Blocs / Bootstrap 4 has four Breakpoints. Question, what is the optimal REM size to use for each one? Flat Screens | Desktops, Laptops, Tablets & Smartphones
I made this so it may help those who are looking for some examples
armingchampions.com/texts
Well that’s an open question with no one answer. It depends on the base font size you set, or the font size set by the browser if you don’t. (as I understand it anyway). Plus design/style/readability issues.
I can understand what you’re saying, but generally there has to be an answer.
Let’s use the default Helvetica as an example.
I have always thought these attempts at converting px to rem are pretty pointless and meaningless because they do not account for display resolution. Just set the rem value to whatever you like, so it looks good with your chosen font at each breakpoint and this will vary from one font to the next.
I have been using rem values with text since well before starting with Blocs and this has never been a problem. Also you will want different rem sizes for various headers than you do for paragraph text, plus there will be times when you manually alter the size for a specific piece of text as a design choice.
Go to project settings and set the rem for your chosen font at 1.0 then ask yourself if it looks good or needs some adjustment, whether smaller or larger, though it is rare that you would make it smaller. Chances are you’ll end up with paragraph text at around 1.2 rem with spacing of 1.5-1.7.
Use that as a starting point, then see how it looks at the next breakpoint and so on. Rinse and repeat for each text type, making use of inherited settings where no change is required.
Thanks @Flashman, that is what I’ve been doing :slight_smile, but when I look at various device (iPhone 8 thru 10 or Samsung 8 thru 10) it is too different. And looking at Preview, Safari or Chrome is RWD view does truly show what it will look like. This is why I’m asking you experts.
You may well decide that you want text on mobile to be at say 1.1 rem, whereas it is 1.3 on desktop of vice versa and that is entirely down to subjective choice.
There isn’t much you can do about individual browsers if the user has them set up in particular ways that force text sizes, however that is not common and you should be fine. As a general rule it is far better to have text that is a little too big, than too small. Larger text is easier to read and tends to be more trusted. Rem is a far better way of working than PX though with all the different device types out there.
If you are having preview issues in Blocs causing confusion it is probably down to the size of your display and auto zoom settings in the preferences, which make everything shrink to fit. Just over a year ago I purchased a 32" display, which has made all of this so much easier because I can work in edit mode and preview at 100% size on all breakpoints. It’s not the fonts and it’s not Blocs. It’s the display size used during development.
I appreciate you taking the time out of your schedule to help me understand this issue. 
@Flashman, @PeteSharp, @Eldar, @Pealco, @hendon52, @Jannis, @Jakerlund @webplus or @Whittfield Have any one of you implement this in your web designs?
I think you are making it it more complicated than it needs to be. Select a rem value. If it looks right it is right and you can move on. Blocs takes care of it. That article is more about flexible sizing and there are a couple brics for that on the Blocs store.
1 Like
@Flashman, before when you add a class or change size of font to rem or em it fits regarding the viewport you are, but now is not working. Please try.
Just having fun seeing what can be accomplished.
Now isn’t that interesting.
It looks OK to me when I tried just now.