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.
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. To change the default font size, add this CSS rule to your theme stylesheet after the Bootstrap stylesheet.The traditional unit for sizing anything on the web is the CSS pixel, but it's not ideal for font size. The majority of browsers today use 16px, but this can vary for older browsers. This converted to the pixel equivalent is dependent on the default font-size of the browser. The default font-size for Bootstrap is 1rem.
What is the default size of h1 Bootstrap heading?Ģ.5rem / 40px What is the default size of h2 Bootstrap heading?Ģrem / 32px What is the default size of h3 Bootstrap heading?ġ.75rem / 28px What is the default size of h4 Bootstrap heading?ġ.5rem / 24px What is the default size of h5 Bootstrap heading?ġ.25rem / 20px How to Increase the Default Bootstrap Font Size 10 How to make Bootstrap 4 Font Sizes Responsiveĭefault styles applied to the body of the document Bodyįont-family: “Helvetica Neue”, Helvetica, Arial, sans-serif.9 How to Change the Bootstrap Font Family for All Headlines.8 How to Increase the Default Bootstrap Font Size.7 What is the default size of h5 Bootstrap heading?.