I know that browsers have a default of 16px for the base font size but I recall learning that you need to set it at 16px. Then you have 1rem set to 16px and you use rem’s where ever you need them. But I may have gotten it wrong - you set it to 1 rem for the body tag?
body {
font-size: 1rem;
// I've been doing:
font-size: 16px;
}
Or do you not even have to declare it because the browsers already are set to 16px?
Personally, I do not set any default font size. Yes, most browsers come with 16px by default but the user can change that. Setting the font size to 1rem on the body is redundant because that just uses the default font size set in the browser. And setting it to px overrides the the user’s default font size preference. So just don’t set a default font size and you will be respecting the user’s wishes. And be sure to use rem or em for all font sizes.
All right, so definitely don’t set it to pixels. And I only use REM for font sizes. But it does seem to be redundant to actually declare. That is the clarification I needed - thanks!
16px is just a comfortable size for the human eye, when it comes to majority of font styles(different font styles size may vary for the same px value, as some are thinner, or wider etc). It also comes to the screen width. For larger screens you might want larger font size, while for phone screen, you’ll usually go smaller. (px can also have different meaning, when it comes to size for different devices)
rem refers to the size stored in html rules.
html {
font-size: 16px;
}
Usually that rule whould be this size by default. If you set the body size to 16px, you will make it have that size, regardless of what the html font size is. If it were 13px, body will still remain 16. If you say font-size: 1rem, it would set the size of the element you apply the rule to(in your context its the body) to 1x of the html size(if its 16px by default, 1rem would be equal 16px). If you set the body size to 20px and put inside main element, with size of 0.5rem, the main element will have half the size of the html(which is 8, if we assume it was 16). If you use em instead, and set the main size to 0.5em, it will be relative to its parent element(the body) and will have size of 10px(half the body size).
What and where you set the size(of at all) strongly depends on how you plan to size your elements sizing as a whole. There are scenarios where you would use the body as an anchor point, but in general the most control you have setting the size in the html.
Ive came accross a practice on responsive sizing, setting the font size in the html to a px(and adjust it up and down for different screen size) and then use ‘rem’, to set the size of main elements relative to the html(for example the header, the footer, a section you want to make emphasis on), while using ‘em’ for child elements, to make them relative to their parent. For example i might make h2 elements have 1.8em font size, which will make it relative to their parent. If i make a header have size of 1.2rem and a footer size of 0.8rem(respectively the header will be larger and footer will be smaller) and in both i have h2 elements, the header h2 element will be larger then the footer h2.
If I understand you correctly, put it on the HTML tag as 16px, not on the body - in general, that is. I set my sizes individually as I design the page/site. Now I usually don’t do what you do - put a font size for an entire section like the header or footer. I actually have done that for a footer but I prefer targeting classes for each section. I will put a size on headings and paragraphs, and then use classes where I want to deviate from the element settings.
I understand the use of rem. I have occasionally used 0.0625rem for 1 px but I usually don’t go below 2px/0.125rem.
html{
font-size: 62.5%;
}
The html font-size must never be declared in pixels because it removes the ability of the user to zoom (enlarge or reduce) the font-size of a web-page for better accessibility. Therefor, my preferred way to set the basic font-size, consists in declaring it as the font-size property of the html selector in % percentage. The percentage is relative to the browser default font-size, that’s commonly 16px. So for convenience, I set it to 62.5%, which equals 10px (at default browser zoom). This way, rem is a multiple of 10 in px. I find it very practice for declaring dimensions in rem while retaining accessibility.
Finally, I declare the font-size for the project as a property of the body in rem.
body{
font-size: 1.6rem; //16px or wahtever is best case by case
}
I suppose if you are going to do your break points in px then the 62.5% hack is useful because you have to be concerned with fitting content within the constraints of your break points. But you will still have overflow issues with users who have manually increased their default font size above 16px.
If you use rem units for your break points then you don’t have to worry about actual px sizing and thus you don’t need the 62.5% hack in the first place. In fact, you don’t need to be concerned with font size at all because rem makes everything relative to the user’s font size, thus removing any overflow issues for users using larger font sizes.
Well i dont see why you would write html to have 16px size, if its already available by default, unless you have a particular reason to do so? If you inspect this page in google chrome, in the Styles section you will see there is also a html rule with font-size(its 18 when i checked).
Im yet uncertain on how to cover that particular part of responsive design and usually just do things on the go, while trying to implement different strategies. The one i explained above is one such, which sounds promising, but as i said, i havent tested it yet, only partially. On the current project i work, in order to scale down certain sections for smaller screens(i use em and rem for margins/padding and other similar values, to make things more interconnected), i started to target certain sections, or paragraphs, or headings, which looked larger on smaller screens and give them a smaller font size and experiment with the use of em and rem, so with least additional rules, i make larget impact on scaling up and down and not having to target each and every rule and adjust its actual value. For example my footer looked too big on small screens and some of its divs started to make weird arrangement in flex, so i just set its size(for smaller screens) to .8rem, which was enough to scale its entire content. Paragraphs within it dont have font sizes in px, so they would scale down to its parent
So does it even make sense to do this:
html {
font-size: 1rem;
}
Is that totally redundant? I have no problem using fractions of 16 to get to a single pixel if need be. I started using em, not rem, in media query breakpoints but then a lot of time I can’t remember their actual size. I need to make a chart for myself.
i dont think it makes sense, as rem would refer to the font-size of the html.
I dont use rem or em to get a value equal pixel, or be pixel-graded, but rather to scale things based on other elements. For example, i could go 2em for h2 elements, to make their font size twice as big of the regular font size of their container, or i can say make my #header be 1.2rem, to scale it slightly larger than the rest of the html document. Any h2 inside the header will be slightly bigger than h2 elements in other sections.
Well, I always set base font sizes for headings. The value of 1rem is what will be applied to mainly paragraphs.
Not really because 1rem is already the default font size that the browser will use. It won’t hurt anything to do this, it just won’t change anything. It’s doing nothing more than taking up an extra line in your CSS.
This is where I would suggest you stop worrying about pixels in the first place. If you use rem for your font sizes, widths and media break points then you will never have to worry about px sizes again.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.