Em Vs Percentage

josephjaya · 11-27-2019, 06:24 AM

Dear All,

I need some clarification about the value of percentage to em. For example if we declare the value in css 10% it's equal to 3em?

Please let me know the exact value of percentage to em. If any converter available in website.

Kindly check and advice.

Thanks,
Joseph Jayaseelan D.

pdurrant · 11-27-2019, 08:31 AM

CSS percentages usually reference the width (or height) of the display area.
The em measure is relative to the font size.

There's no relationship between percentage and em at all.

Notjohn · 11-27-2019, 01:03 PM

In the lead-type days, an em was the width of a capital letter M. That's no longer true, but it's good enough to go by. My style sheet uses ems to designate paragraph indents (1.5 em), blocks of text (1 em), and margin-top and margin-bottom (usually 0.0 em but that can vary).

I use percents to designate font size (200% for the paragraph style for the book title, 150% for chapter heads and the paragraph style for the subtitle, 125% for sub-heads and the paragraph style for author and publisher).

https://notjohnkdp.blogspot.com/2013...yle-sheet.html

Turtle91 · 11-27-2019, 04:59 PM

Here's a short discussion on the differences: CSS Font-Size: em vs. px vs. pt vs. percent

There is some benefit to working in percent, but as long as you set the font size in % in the <body> then ALL other (font-size) references can be made in EM to keep them relative to each other regardless of screen size.

eg:

Code:

body {font-size:100%}
p    {font-size:1em}
h1   {font-size:1.5em}
h2   {font-size:1.3em}
h3   {font-size:1.2em}
h4   {font-size:1.1em}

RbnJrg · 11-27-2019, 05:11 PM

Quote:

Originally Posted by Notjohn

I use percents to designate font size (200% for the paragraph style for the book title, 150% for chapter heads and the paragraph style for the subtitle, 125% for sub-heads and the paragraph style for author and publisher).

But to set a font-size in percents is exactly the same as setting it in em. That is, if you has for your -for example- "h1" style the following:

Code:

h1 {
    font-size: 200%;
}

is the same if you write:

Code:

h1 {
    font-size: 2em;
}

A different thing is if you set a margin in percentage or ems; here a percentage means a percentage of the screen size while a margin in "ems" means a margin based on the font-size you are using in the respective style.

JSWolf · 11-27-2019, 05:23 PM

Quote:

Originally Posted by RbnJrg

But to set a font-size in percents is exactly the same as setting it in em. That is, if you has for your -for example- "h1" style the following:

Code:

h1 {
    font-size: 200%;
}

is the same if you write:

Code:

h1 {
    font-size: 2em;
}

A different thing is if you set a margin in percentage or ems; here a percentage means a percentage of the screen size while a margin in "ems" means a margin based on the font-size you are using in the respective style.

h1 is 2em by default. 200% would be 4em.

JSWolf · 11-27-2019, 05:29 PM

Quote:

Originally Posted by Turtle91

Here's a short discussion on the differences: CSS Font-Size: em vs. px vs. pt vs. percent

There is some benefit to working in percent, but as long as you set the font size in % in the <body> then ALL other (font-size) references can be made in EM to keep them relative to each other regardless of screen size.

eg:

Code:

body {font-size:100%}
p    {font-size:1em}
h1   {font-size:1.5em}
h2   {font-size:1.3em}
h3   {font-size:1.2em}
h4   {font-size:1.1em}

um...

Code:

p {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}

pdurrant · 11-27-2019, 05:40 PM

Quote:

Originally Posted by pdurrant

CSS percentages usually reference the width (or height) of the display area.
The em measure is relative to the font size.

There's no relationship between percentage and em at all.

Oh! Unless you use percentage for the font size, of course!

In which case 1em = 100%, 0.5em = 50%, etc.

RbnJrg · 11-28-2019, 08:11 AM

Quote:

Originally Posted by JSWolf

h1 is 2em by default. 200% would be 4em.

Not at all. I see you didn't test what I wrote; do the try and you'll see that your statement is wrong. A font-size of 200% for h1 is exactly the same as a font-size of 2em.

EDIT: Here you have an epub so your tests will be easier. And here you can also watch an screenshot:

Click image for larger version

Name: Image1.png
Views: 202
Size: 116.4 KB
ID: 175191

with

Code:

.percent {
   font-size: 400%;
}

.ems {
   font-size: 4em;
}

and

Code:

<h1 class="percent">TITLE in %</h1>

<h1 class="ems">TITLE in ems</h1>

Turtle91 · 11-28-2019, 10:57 AM

Quote:

Originally Posted by JSWolf

um...

Code:

p {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}

I do believe you are pushing your preferences (again), and perhaps don't understand what "eg" means. It means "for example"...(and for my Latin Teacher wife: It is short for the Latin exempli gratia, “for the sake of example.”) I was giving an example of how to set CSS using relative sizes in EMs, not telling people how they should style their books.

Quote:

Originally Posted by JSWolf

h1 is 2em by default. 200% would be 4em.

As RbnJrg mentioned, is not correct. h1 might have a 2em default value, but when you specify a value in css then it over-rules any default value - it does not multiply the default value.

exaltedwombat · 11-28-2019, 11:18 AM

Quote:

Originally Posted by JSWolf

h1 is 2em by default. 200% would be 4em.

No. 2em IS 200%. Of 1em

JSWolf · 11-28-2019, 02:35 PM

Quote:

Originally Posted by Turtle91

I do believe you are pushing your preferences (again), and perhaps don't understand what "eg" means. It means "for example"...(and for my Latin Teacher wife: It is short for the Latin exempli gratia, “for the sake of example.”) I was giving an example of how to set CSS using relative sizes in EMs, not telling people how they should style their books.

I'm not giving my preferences. I'm giving the default font sizes for p and h1-h6.

Quote:

As RbnJrg mentioned, is not correct. h1 might have a 2em default value, but when you specify a value in css then it over-rules any default value - it does not multiply the default value.

Yes, I am incorrect. I don't use % for font sizes. I didn't know that % screws up em.

Turtle91 · 11-28-2019, 03:55 PM

The W3 CSS specification doesn't define a "default font size" (other than initially "medium"). Any browser/reader/app could have different defaults - however most browsers use 16px=1em=100% and they most commonly use the sizes JSWolf mentioned in absence of a user defined style.

Because different browsers/apps/readers could use a different default size it is beneficial, for consistency's sake, to define your document baseline in the document itself. Thus "body {font-size:100%}" or "body {font-size:120%}", etc. Then all other font-sizes can be set relative to that size using em. Doing it this way allows the document font sizes to be consistent relative to the other font sizes in that document regardless of the font-size (zoom level) selected by the user.

The actual font-size you select can be anything you want, and can be independent of the heading number selected. eg (for example) all of these combinations are acceptable (although IMHO funny looking):

Code:

p  {font-size:.5em}
h1 {font-size:6em}
h2 {font-size:5em}
h3 {font-size:4em}
h4 {font-size:3em}
h5 {font-size:2em}
h6 {font-size:1em}

p  {font-size:3.5em}
h1 {font-size:2em}
h2 {font-size:2em}
h3 {font-size:2em}
h4 {font-size:2em}
h5 {font-size:2em}
h6 {font-size:2em}

p  {font-size:.75em}
h1 {font-size:1em}
h2 {font-size:2em}
h3 {font-size:3em}
h4 {font-size:4em}
h5 {font-size:5em}
h6 {font-size:6em}

p  {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}

JSWolf · 11-28-2019, 04:18 PM

If you use % for space such as margin-top: 5%, that space will differ depending on the screen size. Using margin-top: 3em will be the same with different screen sizes if the font size is the same.

ps67 · 11-28-2019, 05:38 PM

Quote:

Originally Posted by Turtle91

The W3 CSS specification doesn't define a "default font size" (other than initially "medium"). Any browser/reader/app could have different defaults - however most browsers use 16px=1em=100% and they most commonly use the sizes JSWolf mentioned in absence of a user defined style.

Because different browsers/apps/readers could use a different default size it is beneficial, for consistency's sake, to define your document baseline in the document itself. Thus "body {font-size:100%}" or "body {font-size:120%}", etc. Then all other font-sizes can be set relative to that size using em. Doing it this way allows the document font sizes to be consistent relative to the other font sizes in that document regardless of the font-size (zoom level) selected by the user.

The actual font-size you select can be anything you want, and can be independent of the heading number selected. eg (for example) all of these combinations are acceptable (although IMHO funny looking):

Code:

p  {font-size:.5em}
h1 {font-size:6em}
h2 {font-size:5em}
h3 {font-size:4em}
h4 {font-size:3em}
h5 {font-size:2em}
h6 {font-size:1em}

p  {font-size:3.5em}
h1 {font-size:2em}
h2 {font-size:2em}
h3 {font-size:2em}
h4 {font-size:2em}
h5 {font-size:2em}
h6 {font-size:2em}

p  {font-size:.75em}
h1 {font-size:1em}
h2 {font-size:2em}
h3 {font-size:3em}
h4 {font-size:4em}
h5 {font-size:5em}
h6 {font-size:6em}

p  {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}

Crazy css of the Year!

11-27-2019, 06:24 AM	#1
josephjaya Junior Member Posts: 2 Karma: 10 Join Date: Nov 2019 Device: Apple Ipad	Em Vs Percentage Dear All, I need some clarification about the value of percentage to em. For example if we declare the value in css 10% it's equal to 3em? Please let me know the exact value of percentage to em. If any converter available in website. Kindly check and advice. Thanks, Joseph Jayaseelan D.

11-27-2019, 04:59 PM	#4
Turtle91 A Hairy Wizard Posts: 3,397 Karma: 20212733 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Here's a short discussion on the differences: CSS Font-Size: em vs. px vs. pt vs. percent There is some benefit to working in percent, but as long as you set the font size in % in the <body> then ALL other (font-size) references can be made in EM to keep them relative to each other regardless of screen size. eg: Code: body {font-size:100%} p {font-size:1em} h1 {font-size:1.5em} h2 {font-size:1.3em} h3 {font-size:1.2em} h4 {font-size:1.1em} Last edited by Turtle91; 11-27-2019 at 05:13 PM.

11-28-2019, 03:55 PM	#13
Turtle91 A Hairy Wizard Posts: 3,397 Karma: 20212733 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The W3 CSS specification doesn't define a "default font size" (other than initially "medium"). Any browser/reader/app could have different defaults - however most browsers use 16px=1em=100% and they most commonly use the sizes JSWolf mentioned in absence of a user defined style. Because different browsers/apps/readers could use a different default size it is beneficial, for consistency's sake, to define your document baseline in the document itself. Thus "body {font-size:100%}" or "body {font-size:120%}", etc. Then all other font-sizes can be set relative to that size using em. Doing it this way allows the document font sizes to be consistent relative to the other font sizes in that document regardless of the font-size (zoom level) selected by the user. The actual font-size you select can be anything you want, and can be independent of the heading number selected. eg (for example) all of these combinations are acceptable (although IMHO funny looking): Code: p {font-size:.5em} h1 {font-size:6em} h2 {font-size:5em} h3 {font-size:4em} h4 {font-size:3em} h5 {font-size:2em} h6 {font-size:1em} p {font-size:3.5em} h1 {font-size:2em} h2 {font-size:2em} h3 {font-size:2em} h4 {font-size:2em} h5 {font-size:2em} h6 {font-size:2em} p {font-size:.75em} h1 {font-size:1em} h2 {font-size:2em} h3 {font-size:3em} h4 {font-size:4em} h5 {font-size:5em} h6 {font-size:6em} p {font-size: 1em} h1 {font-size: 2em} h2 {font-size: 1.5em} h3 {font-size: 1.17em} h4 {font-size: 1em} h5 {font-size: .83em} h6 {font-size: .67em} Last edited by Turtle91; 11-28-2019 at 04:10 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Percentage in IBooks	Klippy	Apple Devices	2	06-18-2015 04:29 PM
Percentage Read	ParadiseLost	Calibre	1	04-08-2013 12:24 AM
Problem with Percentage Measurements	verydeepwater	Kindle Formats	5	02-19-2013 12:08 PM
Percentage of all books sold	jbcohen	News	11	04-24-2012 07:08 PM
Percentage of Readers	patrickt	General Discussions	44	09-08-2010 11:01 AM

11-27-2019, 08:31 AM	#2
pdurrant The Grand Mouse 高貴的老鼠 Posts: 74,449 Karma: 318076944 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Oasis	CSS percentages usually reference the width (or height) of the display area. The em measure is relative to the font size. There's no relationship between percentage and em at all.

11-27-2019, 01:03 PM	#3
Notjohn mostly an observer Posts: 1,519 Karma: 996810 Join Date: Dec 2012 Device: Kindle	In the lead-type days, an em was the width of a capital letter M. That's no longer true, but it's good enough to go by. My style sheet uses ems to designate paragraph indents (1.5 em), blocks of text (1 em), and margin-top and margin-bottom (usually 0.0 em but that can vary). I use percents to designate font size (200% for the paragraph style for the book title, 150% for chapter heads and the paragraph style for the subtitle, 125% for sub-heads and the paragraph style for author and publisher). https://notjohnkdp.blogspot.com/2013...yle-sheet.html

11-28-2019, 04:18 PM	#14
JSWolf Resident Curmudgeon Posts: 80,782 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	If you use % for space such as margin-top: 5%, that space will differ depending on the screen size. Using margin-top: 3em will be the same with different screen sizes if the font size is the same.