Assuming that the root font size is 16px, we get the following values:
Thus, an element's font sizing cannot be determined reliably just by looking at its own CSS.īy contrast, rem (which stands for " root em") always references the root font size of the document. This makes it less than ideal in component-driven development because an element may be nested arbitrarily deep in other em-sized containers. If you give an element a font size in em and a child a font size in em, those two ems will create a compounding effect. While in some cases em can be useful for padding and margins, it's problematic for font sizing. For example, if an element has a font size of 24px, then 0.5em translates to a font size of 12px for a child element. When used for a child element's font size, em refers to the parent font size.
Fortunately, CSS also offers relative-length units, which reference other elements on the page rather than using fixed CSS pixels. So absolute units aren't ideal if we want to honor our users' font size preferences. For example, Libre Baskerville is a notoriously large font family a font size of 16px rendered in this family corresponds to roughly 18px in most other families. One thing worth noting is that different font sizes render at different visible sizes depending on your chosen font family. This means that we should always respect the user's preferred base font size rather than forcing them to figure out whether we support zooming only, font size scaling only, or both zooming and font size scaling. Moreover, as in the example above, percentages may yield floating-point results that don't appear in the browser settings, forcing a user to choose between the two closest values that are available. However, more commonly, users have a preferred font size for their monitor rather than a preferred zoom percentage-after all, it's much easier for users to reason about pixels than it is some arbitrary percentage zoom. So you could get away with using pixels for all dimensions and leaving it up to users to zoom in your page if they need to. Users can also scale a web page using browser zoom settings, in which case pixels are not entirely problematic because the page still scales up proportionally.įor example, changing the base font size from 16px to 18px is equivalent to setting the page zoom to be 112.5%. You can learn more about why this matters in WCAG Criterion 1.4.4 Resize Text. When you set a font size in pixels, it will always render at that size, regardless of what font size a user prefers. This means that using hard-coded pixels for font sizing is inaccessible to users with vision impairments, who may want to scale up the font size of your page so that text is easier to read. User preferences for font size should always take precedence over your CSS. Likewise, users can go into their browser settings (e.g., chrome://settings/fonts in Chrome) and configure their font size preferences:
Developers can change the font size of the root element ( html) with CSS so that all elements inherit that new font size. However, both developers and users can change this behavior. Respecting a User's Font Size PreferencesĮvery browser applies a root font size of 16px to a document, meaning that unstyled body text will have a rendered font size of 16 CSS pixels. To understand why, we need to learn about user font size preferences. In particular, using pixels for font sizing isn't great for accessibility. But like other absolute units, they don't scale with other measurements. For our purposes in this article, the important thing to understand is that while a CSS pixel may not always correspond to the same physical quantity between two devices that have different DPIs, it does refer to a fixed quantity on a single device.ĬSS pixels are the easiest unit to understand because they're grounded in physical measurements. This may be 1/96th of an inch on 96 DPI devices, or it may be some other physical quantity on a device with a different DPI.
#Css inherit font size but scale software#
While pixels do make it easy for you to translate mockups from design software directly into CSS, they're an absolute-length unit, which means that one CSS pixel corresponds to a fixed physical pixel size (device pixel) on a user's screen.
The traditional unit for sizing anything on the web is the CSS pixel, but it's not ideal for font size.
0 kommentar(er)
