Converting px to em - text becomes smaller than original

-3

Currently in the final stages of building a new website and have recently ran an accessibility checker. The checker is recommending changing my font sizes from px to em.
However when I do a straight forward conversion (16px to 1em) the font becomes really small. Am I missing something?

Here is my styling.

.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}

.bodyText a {color: #008080 !important; text-decoration: underline;}

.bodyText a:hover {color: #008080 !important;}

.bodyText li {font-size: 16px !important; color: #686868;}

.bodyText p {font-size: 16px !important; color: #686868;}

.bodyText p strong {color: #333333;}

All of this also sits in the body which has this attached.

body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

1

Please share your markup

– Shahar Shokrani
Nov 22 '18 at 16:22

1

Please edit your question to include all the code needed to demonstrate your issue include HTML and CSS. Use a snippet (CTRL-M when you edit) stackoverflow.com/help/mcve

– Mark Schultheiss
Nov 22 '18 at 16:25

1

16 px is NOT 1em - well it CAN be, it can also be 2px or 200px it is just different.

– Mark Schultheiss
Nov 22 '18 at 16:26

Sorry, edited to show my css styling.

– HannahM
Nov 22 '18 at 16:33

AND the markup please. Also as soon as you start using !important (nearly always a bad idea) things get really messy to edit and manage.

– Mark Schultheiss
Nov 22 '18 at 16:37

|
show 2 more comments

-3

Here is my styling.

.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}

.bodyText a {color: #008080 !important; text-decoration: underline;}

.bodyText a:hover {color: #008080 !important;}

.bodyText li {font-size: 16px !important; color: #686868;}

.bodyText p {font-size: 16px !important; color: #686868;}

.bodyText p strong {color: #333333;}

All of this also sits in the body which has this attached.

body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

1

Please share your markup

– Shahar Shokrani
Nov 22 '18 at 16:22

1

Please edit your question to include all the code needed to demonstrate your issue include HTML and CSS. Use a snippet (CTRL-M when you edit) stackoverflow.com/help/mcve

– Mark Schultheiss
Nov 22 '18 at 16:25

1

16 px is NOT 1em - well it CAN be, it can also be 2px or 200px it is just different.

– Mark Schultheiss
Nov 22 '18 at 16:26

Sorry, edited to show my css styling.

– HannahM
Nov 22 '18 at 16:33

AND the markup please. Also as soon as you start using !important (nearly always a bad idea) things get really messy to edit and manage.

– Mark Schultheiss
Nov 22 '18 at 16:37

|
show 2 more comments

-3

Here is my styling.

.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}

.bodyText a {color: #008080 !important; text-decoration: underline;}

.bodyText a:hover {color: #008080 !important;}

.bodyText li {font-size: 16px !important; color: #686868;}

.bodyText p {font-size: 16px !important; color: #686868;}

.bodyText p strong {color: #333333;}

All of this also sits in the body which has this attached.

body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

Here is my styling.

.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}

.bodyText a {color: #008080 !important; text-decoration: underline;}

.bodyText a:hover {color: #008080 !important;}

.bodyText li {font-size: 16px !important; color: #686868;}

.bodyText p {font-size: 16px !important; color: #686868;}

.bodyText p strong {color: #333333;}

All of this also sits in the body which has this attached.

body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

html css

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

edited Nov 22 '18 at 16:32

asked Nov 22 '18 at 16:17

HannahM

asked Nov 22 '18 at 16:17

HannahM

asked Nov 22 '18 at 16:17

HannahM

1

Please share your markup

– Shahar Shokrani
Nov 22 '18 at 16:22

1

Please edit your question to include all the code needed to demonstrate your issue include HTML and CSS. Use a snippet (CTRL-M when you edit) stackoverflow.com/help/mcve

– Mark Schultheiss
Nov 22 '18 at 16:25

1

16 px is NOT 1em - well it CAN be, it can also be 2px or 200px it is just different.

– Mark Schultheiss
Nov 22 '18 at 16:26

Sorry, edited to show my css styling.

– HannahM
Nov 22 '18 at 16:33

AND the markup please. Also as soon as you start using !important (nearly always a bad idea) things get really messy to edit and manage.

– Mark Schultheiss
Nov 22 '18 at 16:37

|
show 2 more comments

1

Please share your markup

– Shahar Shokrani
Nov 22 '18 at 16:22

1

Please edit your question to include all the code needed to demonstrate your issue include HTML and CSS. Use a snippet (CTRL-M when you edit) stackoverflow.com/help/mcve

– Mark Schultheiss
Nov 22 '18 at 16:25

1

16 px is NOT 1em - well it CAN be, it can also be 2px or 200px it is just different.

– Mark Schultheiss
Nov 22 '18 at 16:26

Sorry, edited to show my css styling.

– HannahM
Nov 22 '18 at 16:33

AND the markup please. Also as soon as you start using !important (nearly always a bad idea) things get really messy to edit and manage.

– Mark Schultheiss
Nov 22 '18 at 16:37

Please share your markup

– Shahar Shokrani
Nov 22 '18 at 16:22

Please edit your question to include all the code needed to demonstrate your issue include HTML and CSS. Use a snippet (CTRL-M when you edit) stackoverflow.com/help/mcve

– Mark Schultheiss
Nov 22 '18 at 16:25

16 px is NOT 1em - well it CAN be, it can also be 2px or 200px it is just different.

– Mark Schultheiss
Nov 22 '18 at 16:26

Sorry, edited to show my css styling.

– HannahM
Nov 22 '18 at 16:33

AND the markup please. Also as soon as you start using !important (nearly always a bad idea) things get really messy to edit and manage.

– Mark Schultheiss
Nov 22 '18 at 16:37

|
show 2 more comments

2 Answers
2

active

oldest

votes

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

add a comment |

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size

answered Nov 22 '18 at 16:31

Nick Beall

112

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434891%2fconverting-px-to-em-text-becomes-smaller-than-original%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

add a comment |

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

add a comment |

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

edited Nov 22 '18 at 19:06

Temani Afif

77.1k94490

answered Nov 22 '18 at 16:28

Nopzen

222313

answered Nov 22 '18 at 16:28

Nopzen

222313

answered Nov 22 '18 at 16:28

Nopzen

222313

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

add a comment |

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

"1 rem is equal to 16px" - depends on the browser, most but not all.

– Mark Schultheiss
Nov 22 '18 at 16:29

Read the link i shared. rem is read from html root tag, so as long if you define html to have font-size 16px then its 16 px. So i some obscure browser implements something else then override it with html fontsize 16

– Nopzen
Nov 22 '18 at 16:33

I think this might be my problem, I have no font size included in the html tag.

– HannahM
Nov 22 '18 at 16:35

Here is the actual specification if you want to have a definitive source w3.org/Style/CSS/specs.en.html

– Mark Schultheiss
Nov 22 '18 at 16:36

This solved the problem - thank you. I set my font-size in the html (originally as pixels but this also resulted in accessibility errors) as 100%, then I set the rest of my fonts throughout the site in em. All looks great and passes the accessibility check. Thanks for your help.

– HannahM
Nov 23 '18 at 11:47

add a comment |

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size

answered Nov 22 '18 at 16:31

Nick Beall

112

add a comment |

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size

answered Nov 22 '18 at 16:31

Nick Beall

112

add a comment |

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size

answered Nov 22 '18 at 16:31

Nick Beall

112

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size

answered Nov 22 '18 at 16:31

Nick Beall

112

answered Nov 22 '18 at 16:31

Nick Beall

112

answered Nov 22 '18 at 16:31

Nick Beall

112

answered Nov 22 '18 at 16:31

Nick Beall

112

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr