Jump to content
luuis

font size 62%

Recommended Posts

This css construction is explaind to hanlde the rems and ems easier, like

cause 14px  are then = 1.4rem.

https://snook.ca/archives/html_and_css/font-size-with-rem

I cant see it this way, 14px are always bigger than 1.4 rem(dont need glases for that)

What do i miss here?
 

<!DOCTYPE html>
<html>
<head>
    <title>Developing</title>

<link rel="stylesheet" href="styleFont.css" type="text/css">
</head>

<body>

    <h1>Developing</h1>
    
    <p>...lufgofgt
     </p>
</body>
</html>

 

html { font-size: 62.5%; } 
body {  font-size: 1.4em; }  =14px 
h1   {  font-size: 1.4em; }  =24px 

h1 { 
    font-size: 14px;
}

 

Share this post


Link to post
Share on other sites

Actually its 19.6px not 24px

10 * 1.4 = 14

14 * 1.4 = 19.6

Using developer tools F12, inspect element using style, then look for 'Computed' in Style panel, it should show list of styles, now look at 'font-size' value

Edited by dsonesuk

Share this post


Link to post
Share on other sites

That example you gave is what using  rem would produce. rem is root->em, the root parent would be <html> tag. It only adjusts in size to the font-size set for html tag

html { font-size: 62.5%; } /*62.5% of 16 = 10*/
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

root

size

font

10 * 1.4 = 14

10 * 2.4 = 24

Share this post


Link to post
Share on other sites

Hi dsonesuk, explainig me this "Actually its 19.6px not 24px", makes you stupid. (I consider it as a favor, telling you that)
And with your last answer you just repeat whats written on that page, so?

Share this post


Link to post
Share on other sites

Well It would have it being more stupider to show the wrong! values even after reading the link, so because  you being as stupid is as stupid does I thought I would  point out the parts you did not follow, so others would not become confused, when the result showed different to what you had stated.

I thought you might have got your rem and em mixed, and just pointed what it should be with what you gave.

I just can't imagine you being that stupid that you didn't realise H# header tags have by default font-weight of approx 700, so yes! there will be a difference between it and text in a paragraph for example.

em size relative to closest parent element font-size:

rem size relative to root parent element (<html>...</html>) font-size:

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
On 11/4/2018 at 7:55 AM, luuis said:

This css construction is explaind to hanlde the rems and ems easier, like

cause 14px  are then = 1.4rem.

https://snook.ca/archives/html_and_css/font-size-with-rem

I cant see it this way, 14px are always bigger than 1.4 rem(dont need glases for that)

What do i miss here?

You're missing the fact that 14px isn't always bigger than 1.4rem.

14px is bigger than 1.4em when the base(html) font-size is less than or equal to 10px.

Try this one instead. Your scenario has other factors in play. It has a base of 11px and is a noticeable difference between the two.
Be sure to try changing the html font-size to 9px and see what happens in this example.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html { font-size: 11px; } 
      body {  font-size: 1.4rem; }  
      p { font-size: 14px; }
    </style>
  </head>
  <body>
      <p>This is size 14</p>
      This is size 1.4rem
  </body>
</html>

 

Share this post


Link to post
Share on other sites

Sometimes it seems, it doesnt matter, if the answer really fits the question, it helps the rank of that person anyway.

I havnt thought that I have to repeat myself the explication of that example
this line:
html { font-size: 62.5%; }
its like a new default value for the size of each font.
and 14px = 1.4 rem, or 18px = 1.8 rem and so on

without this line:
I would have to calculate, always, the size of rem or em, to figure, to picture how big the letters became.
Thats the idea behind.

I used it and have to see, 1.4 rem are not 14px


Share this post


Link to post
Share on other sites

Why does this matter? If you're using em or rem you're not after specific sizes, just proportional differences.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×