Font size too large when using the em unit

The default font-size of my code is set to 10px or 0.625em. According to this, to make the font size of <p> 7px, I should use 0.7em. However, in my case, the browser is consistently using a fixed font size of 9px, even when I decrease the font size of <p> to 0.5em or lower.

https://i.sstatic.net/7vqRv.png

body {
  font-size: 0.625em;
}

h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 1.875em; 
}

p {
  font-size: 0.7em; 
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

cssfont-size

Answer №1

To ensure that your font sizes are directly related to the root font size (specified in a CSS rule for html rather than body, and should be in px), it is best to use the rem unit or percentages, instead of relying on the em unit which can be affected by the default browser size of an element or its parent.

In addition, most browsers come with a "minimum font display" feature that prevents small font sizes from becoming illegible. Typically, this setting is configured to 9px in your specific browser.

Answer №2

It is important to adjust

body {
  font-size: 0.625em;
}

To ensure proper calculations, you should set the body font-size to 10px. This will allow for accurate use of em units, otherwise the browser's default font-size will be used.

body {
  font-size: 10px;
}

h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 1.875em; 
}

p {
  font-size: 0.7em; 
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

Learn more about setting em font-sizes here

Answer №3

It has been mentioned that the font size of p is 7px, and using 0.7em may not be correct due to the default font size being 16px.

If 10px == 0.625em then
7px = (0.625/10)*7em = 0.4375em

If your default font is 10px, ensure to set the font size of body and html in px.

html,
body {
  font-size: 10px;
}

Refer to the snippet below for a demonstration:

html{
  font-size: 10px;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.7em;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text. Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

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

Implementing smooth transitions on iPad screens with responsive text

I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of ...

htmlcssipadtextcss-transitions

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

As someone who is new to website creation, I am currently working on adding a CSS effect where a popup-text appears when an image is hovered over. I want to create a row of images for the popups by using an unordered list. However, I'm facing a proble ...

css

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

My JavaScript code has an issue where single-click opens a link in a new tab and double-click opens a lightbox. This works perfectly in all browsers except for IE9 and IE11. In my initial code, both single-click and double-click function correctly. However ...

javascripthtmlcssajaxdouble-click

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Is it possible to have images automatically resize to fit the content div without becoming distorted?

I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...

jqueryhtmlcss

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

cssbootstrap-4bootstrap-5

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

javascripthtmlcssbutton

Scrolling presentation with dynamic animations

Does anyone have any suggestions for creating a scrolling effect similar to the one on this website? I want to implement a scroll effect where each presentation page is revealed one by one when the user scrolls using their mouse wheel, encouraging them to ...

javascriptcssanimationeffectspresentation

Is there a way to remove the scrollbar from the menu created with react-burger-menu?

How can I remove the scroll bar from the menu created with react-burger-menu? Despite trying various CSS properties adjustments, I have not been able to achieve the desired effect. Here is an image of the open menu and the corresponding CSS: (https://i.st ...

cssreactjsnext.jsmenuhamburger-menu

In Chrome, there is a conflict between the screen width when using `position: absolute` and `position: fixed` if there is vertical

I'm in the process of developing a website with a video banner set to fixed positioning in the background, and a div that has absolute positioning covering part of the video on the bottom half. However, I've encountered an issue - when I add this ...

javascripthtmlcssgoogle-chromecss-position

A guide to placing tooltips dynamically in highcharts column charts

I am encountering an issue with tooltips in Highcharts column charts. The problem arises when the series fill up my chart, causing the tooltip to be hidden below the series and cut off by the end of the div. You can see an example here: https://i.stack.i ...

javascriptcssangularjshighcharts

Bootstrap dropdown menu fails to expand

I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the ...

cssbootstrap-5

Creating a CSS tooltip using only HTML and CSS may present some challenges and not function as intended

I've been attempting to create a basic tooltip using only CSS3 and HTML, but for some reason the transition isn't functioning. Can someone help me identify what I might be doing incorrectly? HTML Structure <p> This paragraph has a too ...

htmlcss

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

cssnext.js

Creating a responsive layout with two nested div elements inside a parent div, all styled

I'm currently facing an issue with using padding in my CSS to make the two divs inside a parent div responsive at 50% each. However, when combined, they exceed 100%. I suspect this is due to the padding, but I'm unsure how to resolve it. .column ...

htmlcss

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...

javascriptjqueryhtmlcssajax

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

Modify the styling of the initial picture in a Google Drive file

Having an issue.. I am working on a website where each page is managed through Google Drive. I need to change the CSS styling of only the first image on one specific page. Using :first-child won't work because the HTML structure contains "p > span ...

javascriptjquerycssgoogle-drive-api

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design