The font-size of that paragraph is now 2ems relative to the div. For example, take a div with a font-size of 2em, then add a paragraph with a font-size of 2em. I’ve never been a fan of EMs, especially when it comes to font-sizes. What about EMs?ĮMs perform initially in a similar fashion to REMs, until it comes to nesting. You can use functions to calculate these things for you. Thankfully, if you use Sass/ SCSS, LESS, or any other CSS pre-processor, you shouldn’t worry. Working all of these numbers out in your head would be pretty time consuming. For example, 16px is now 1rem, 20px is 1.25rem, 24px is 1.5rem etc. The ideal scenario would be to leave the HTML font-size as 100%, but that does make the maths a little bit harder. So if your user wants bigger fonts, let them. This now means that if the user’s default browser font-size is changed to, for example, 20px, 1.6rem would now equal 20px. That’s because 62.5% of 16px (typical default browser font-size) is 10px. A typical method is to set the HTML font-size to 62.5%. That’s a percentage of the user’s default browser font-size. Set the root HTML font-size as a percentage. So how can we un-break our accessibility faux pas? Unless you’ve got a very typographically heavy design, you’re unlikely to want to scale everything at once. I rarely see a project where someone actually changes the root HTML font-size depending on screen size and rightfully so. While REMs certainly have their uses, I’m willing to bet that most people use REMs because they are seen as cooler than pixels. However, setting the base font-size in pixels still has the same problem as the pixel example above. It allows for a quick conversion between pixel values to REM values simply by dividing the number by 10. Setting a root font-size of 10px is the most common scenario when I see people using REMs. When used on the font-size on this root element, it represents its initial value.” How to calculate PX from REMĪ basic and most common example: html font-size is set to 10px, paragraph is set to 1.6rem - 1.6rem * 10px = 16px. “ unit represents the font-size of the root element (e.g. They also allow you to quickly scale an entire project by changing the root font-size (for example at a certain media query/screen size). If you’re not, REMs are a way of setting font-sizes based on the font-size of the root HTML element. If you’re in any way familiar with the web design world, you will undoubtedly have heard of REMs. The user can still zoom in and out with ctrl plus +/- (cmd instead of ctrl on OS X). Thankfully, setting font-sizes in pixels doesn’t completely ruin accessibility. That might sound great from a designer/developer point of view - but you’re not the user, stop making websites for yourself. However, if the website explicitly sets font-sizes in pixels, a heading set at 30px will always be 30px. If the user sets their default to 20px, all font-sizes should scale accordingly. In most browsers, a user can set their default browser font-size to be a different size to the default (typically 16px). If you’re setting all of your font-sizes, element sizes and spacing in pixels, you’re not treating the end user with respect. I’d take accessibility over “pretty” any day. I’m a big advocate of accessibility on the web. So what’s wrong with pixels? Accessibility Designers typically work in pixels, so it’s easy to take sizes directly from Photoshop straight in to build. Everyone is comfortable with using pixels. Everyone knows what a pixel is (although the size of a pixel isn’t always the same, but that’s for another day). Pixels (px) are what we’ve all become accustomed to over the years. The problem doesn’t just revolve around font-sizes - it’s also about accessibility. We lost track of why we adopted the use of REMs in the first place. We, like many others, were ready to ditch REMs and return to the beloved pixel. The debate has been had many times - what units of measurement should we use in our CSS?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |