If you are reading this, I'm pretty sure you know at least 5 ways of centring HTML elements using CSS. So, 15 options for relative sizing shouldn...
For further actions, you may consider blocking this person and/or reporting abuse
Now
1rem = 10px
for easy unit conversions and the default font size of the site remains at the expected default of16px
. 😁It also still allows font scaling since it doesn't involve px units.
I personally like .625em :)
Neat. I've seen a lot of devs prefer this. However, I've personally gotten used to 16px.
Here's the article from 2004 where this technique was first introduced.
Ok if you really must use px units for fonts then please install this postcss npm plugin into your build process
npmjs.com/package/postcss-pxtorem
Using px units on any font setting on your site is an instant WCAG AA accessibility fail.
w3.org/TR/UNDERSTANDING-WCAG20/vis...
Same goes for things like
vw
in font size settings. It should be combined withrem
in acalc
function to ensure that text is still able to be resized.Careful with vh unit. Some mobile browsers have floating toolbar and in this cases if you are using 100vh with virtual scroll, when browsers toolbar is showing your content will be pushed to bottom.
css-tricks.com/the-trick-to-viewpo...
Thanks, however I wish there was a fairly straight forward solution to this problem.
It sounds like maybe the
vi
andvb
units might be the answer to that since it sounds like they are based on parent element dimensions. It's a shame they aren't supported anywhere yet.If I had a dollar for everytime I ran into this issue..
This is helpful, thanks :)
I often find myself using
em
to make a site readable on a widescreen. Something likep { max-width: 40em; line-height: 1.8em }
usually does the trick. I've started using Stylus to 'fix' sites I frequent, like Wikipedia.Pearsonified has a nice article and even a calculator to give you an indication of readable
font size : line height : line width
proportions.Thanks for these amazing resources.
Stylus seems nifty.
I personally stick to rem, % and occasionally vh & vw.
I always prefer rem once defining the root size in pixels.
Same. However every now and then I do end up using
vw
&vh
too.vi and vb sound interesting. If I understand correctly, you can base responsiveness on an element, rather than the viewport?
vi &
vb` would be helpful for webpages in different languages.And yes, you can base responsiveness on the parent element size by using
%
.I found a small typo in "So the webpages need to by styled" ->... be styled.
Thanks for pointing it out, fixed it.