What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em:

The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font preferences, making it unsuitable for general length measurements unless you desire a proportional scale with font changes.

Emphasize the use of 'em' when you want an element's size to adapt alongside the font size.

In the header section of my website, the font-size of the h1 tag is set at 2.1 em while the h2 tag remains at 1.9 em, as demonstrated visually on Google Chrome:

Querying further: Understanding the significance of the ongoing font size as referenced in the description of 'em'. How does one ascertain the current font size effectively?

Answer №1

This demonstrates that the size of em is determined by the font size of its closest relative parent element. As a result, the font-size specified by the parent of <h2> must be greater than that of the parent of <h1>.

Therefore, if the parent of <h2> has a font-size of 40px, and the parent of <h1> has a font-size of 20px, then 1.9em of the 40px will be larger than 2.1em of the 20px

For further insights on how font-sizing operates, click here

Update / Note to take into account

If you wish to ensure consistency in font sizes across your webpage, it is advisable to utilize px to define the font-size property. By using px, you can ensure an absolute font-size rather than one that is relative like when using em.

Answer №2

Just a quick tip to keep in mind, if you establish your website's base font size as 100% using CSS, it will be roughly equivalent to 16px. It's important to note that when using "em" as your unit of measurement, the values cascade down. This means that any font sizes specified for child elements are calculated based on the font size of their parent element.

For instance, if you set the base font size of your site to 100%/16px and then create a container with a base font size of .75em (approximately 12px, calculated by dividing 12px by 16px), any headings created within that container should be determined based on the container's font size, not the site's base font size. Therefore, instead of calculating it as 1.5em (24px/16px, where 16px is the site default font size), it would actually be 2em (24px/12px, since 12px is the font size set on the container).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

Issue: The Bing maps API I incorporated into my assignment is loading unnecessary CSS and scripts, causing a noticeable decrease in my lighthouse scores. Is there a way to prevent third-party code (such as Bing Ads) from loading when fetching the maps for ...

javascript css request bing-maps lighthouse

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...

html css cross-browser html-table

Tips for implementing custom styles on React components that have been imported locally

I'm currently struggling with applying CSS successfully to components imported from an npm library. My main challenge seems to be my use of css-loader in the react starter kit (https://github.com/kriasoft/react-starter-kit) without a full understandin ...

css reactjs npm css-loader

Material-UI Date Selectors: Show the Date in (Month, Day, Year) Format -> (April 17, 2019)

If you're using the Material-Ui Pickers library, check out this link for more information: It appears that you can display the date as a (Month Day) string or as a (MM/DD/YYYY) format. However, I'm wondering if there is an option to display the ...

html date material-ui

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...

javascript html css

Part II: Material-UI - Finding the Right Source for CSS Classes

I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root Sunny day with a chance of rain I made some changes b ...

css reactjs grid material-ui

The problem of undefined icons in Material UI's Stepper StepLabel

Having some trouble incorporating a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I want to add an icon to each circle, similar to what is shown in this Material UI demo: https://i.sstatic.net/WLOcS.png However, ...

javascript css reactjs bootstrap-4 material-ui

Swapping out a button

I tried searching for a solution to my problem but I couldn't find it because of my limited English proficiency. Therefore, I apologize if my question has already been answered. I would like to place my button in the location shown in the image. If p ...

html css button responsive

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

css reactjs material-ui

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

html css gradient repeating-linear-gradient

Retrieve a portion of a webpage from a separate file

Is there a way to load part of a page from another HTML/PHP file? Here's my current situation: I have a PHP file that contains: $dirname = dirname(__FILE__); //Path to your *.php file $file = $dirname."/enmainheader.php"; $contents = file($file); ...

php html

Setting an Element's attribute is only visible in the console

Just dipping my toes into the world of Web Development. While playing around with some JavaScript within HTML, I decided to try updating the content of an element. Upon running the code below, "Updated Content" appears in the console as intended. However, ...

javascript html jquery bootstrap-5

Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar. https://i.sstatic.net/hbLtp.jpg There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch d ...

javascript jquery html css

Divs aligned horizontally with automatic height

I am facing a dilemma with two child divs placed side by side within a parent div. The height of each div is generated based on the viewport-size, making it unknown. The issue arises in the left div where an image needs to be resized to match the height o ...

html css

The second div element remains unselected in jQuery

Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...

javascript jquery html css

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

html css

Is it possible to use personalized fonts alongside Google web fonts?

I'm looking to incorporate my customized font into a website using Google's font loader. Any recommendations on how to achieve this? ...

css fonts webfonts custom-font

Displaying an interactive 2D floorplan in a web browser with the use of html5 and javascript

In the process of updating my old Flash viewer, I am looking to display interactive 2D floorplans exported from AutoCAD. Currently, I convert the AutoCAD files into XML files containing the X and Y coordinates of the various elements on the floorplan such ...

javascript html svg canvas three.js

The console correctly detects the value, but is unable to set the innerHTML property of null

I am currently working on a webpage that allows users to sign in and create an account. The issue I'm facing is that when I try to display the user's information, I encounter the error 'Cannot set property 'innerHTML' of null.&apos ...

javascript html

Customizing Material UI: Grouping Tab components within a div container

How can I wrap the children of a Material UI Tabs component in divs? <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange} > <div> <Tab label="x" /> ...

javascript html reactjs material-ui

CSSer Q&A