CSS 100 font size - 100 of what

Question

There are many articles and questions about percentage-sized vs other-sized fonts  However  I can not find out WHAT the reference of the percent-value is supposed to be  I understand this is  the same size in all browsers   I also read this  for instance      Percent      The percent unit is much like the    em    unit  save for a few fundamental differences  First and foremost  the current font-size is equal to 100   i e  12pt   100    While using the percent unit  your text remains fully scalable for mobile devices and for accessibility    Source  http   kyleschaeffer com best-practices css-font-size-em-vs-px-vs-pt-vs   But if you say  ie 12 pt   100    then it means you first have to define font-size  12pt  Is that how it works  You first define a size in an absolute measure  and then refer to this as  100    Does not make a lot of sense  as many samples say it is useful to put   body     font-size  100       So by doing this  WHAT is the font size relative to  I notice that the size I see on my screen differs for every font  Arial looks way bigger than Times New Roman  for instance  Also  if I would just do this  body size   100   would that mean that it will be the same on all browsers  Or only if I first define an absolute value    UPDATE  SAT JUL 23  I am getting there  but please bear with me    So  the   value relates to the default browser font size  if I understand correctly  Well  that is nice but gives me again several other questions    Is this standard size always the same for every browser version  or do they vary between versions  I   found  see image below  the settings for Google Chrome  never looked at this before    and I see standard  serif    sans-serif  and  monospace  settings  But how do I interpret this for other fonts  Say I define font  100  Georgia   what size will the browser take  Will it look up the standard size for serif  or has the  Georgia  font a standard size for the browser On several websites I read things like Sizing text and line-height in ems  with a percentage specified on the body       was shown to provide   accurate  resizable text across all browsers   in common use today  But from what I am learning now I believe that you should actually choose between either resizable text  using   or em  like what they recommend in this quote   or having  accurate  consistent font-sizes across browsers   by using px or pt as a base   Is this correct     Google Settings     This is how I think things could look like if you do not define the size in absolute values

User · Answer

According to ALL THE SPECS DATING BACK TO 1996  percentage values on font-size refer to the parent element s  computed  font-size    lt style gt  div     font-size  16px    span     font-size  75      lt  style gt   lt div gt  lt span gt this font size is 12px  lt  span gt  lt  div gt    It s that easy   What if the div declares a relative font-size  like ems  or even worse  another percentage   See    computed    above  Whatever absolute unit the relative unit converts to   The only question that remains is what happens when you use a percentage value on the root element  which has no parent   html     font-size  62 5      62 5  of what         In that case  see the    duplicate    of this question  TLDR  percentages on the root element refer to the browser default font size  which might be different per user   References    CSS 1 spec  1996  CSS 2 1 spec  2011  CSS Fonts Level 3 spec  2013  CSS Fonts Level 3 editor   s draft  2017

User · Answer

The browser default which is something like 16pt for Firefox  You can check by going into Firefox options  clicking the Content tab  and checking the font size  You can do the same for other browsers as well    I personally like to control the default font size of my websites  so in a CSS file that is included in every page I will set the BODY default  like so   body       font-family  Helvetica  Arial  sans-serif      font-size  14px     Now the font-size of all my HTML tags will inherit a font-size of 14px   Say that I want a all divs to have a font size 10  bigger than body  I simply do   div       font-size  110      Now any browser that view my pages will autmoatically make all divs 10  bigger than that of the body  which should be something like 15 4px   If I want the font-size of all div s to be 10  smaller  I do   div       font-size  90      This will make all divs have a font-size of 12 6px   Also you should know that since font-size is inherited  that each nested div will decrease in font size by 10   so    lt div gt Outer DIV       lt div gt Inner DIV lt  div gt   lt  div gt    The inner div will have a font-size of 11 34px  90  of 12 6px   which may not have been intended   This can help in the explanation  http   www w3 org TR 2011 REC-CSS2-20110607 syndata html value-def-percentage

User · Answer

My understanding is that when the font is set as follows  body     font-size  100       the browser will render the font as per the user settings for that browser   The spec says that   is rendered      relative to parent element s font size   http   www w3 org TR CSS1  font-size  In this case  I take that to mean what the browser is set to

User · Answer

Sorry if I m late to the party  but in your edit you make a remark about font  100  Georgia  which the other answers haven t responded to   There is a difference between font  100  Georgia and font-size 100   font-family  Georgia   If that was all the shorthand method did  the font-size part would be meaningless  But it also sets a lot of properties to their default values  the line height becomes normal  or around 1 2   ditto for the style  non-italic  and weight  non-bold    That s all  The other answers already mentioned everything else there was to mention

User · Answer

It s relative to default browser font-size unless you override it with a value in pt or px

User · Answer

Relative to the default size defined to that font   If someone opens your page on a web browser  there s a default font and font size it uses

User · Answer

A percentage in the value of the font-size property is relative to the parent element   s font size  CSS 2 1 says this obscurely and confusingly  referring to    inherited font size      but CSS3 Text says it very clearly   The parent of the body element is the root element  i e  the html element  Unless set in a style sheet  the font size of the root element is implementation-dependent  It typically depends on user settings   Setting font-size  100  is pointless in many cases  as an element inherits its parent   s font size  leading to the same result   if no style sheet sets its own font size  However  it can be useful to override settings in other style sheets  including browser default style sheets    For example  an input element typically has a setting in browser style sheet  making its default font size smaller than that of copy text  If you wish to make the font size the same  you can set  input   font-size  100     For the body element  the logically redundant setting font-size  100  is used fairly often  as it is believed to help against some browser bugs  in browsers that probably have lost their significance now

User · Answer

As to my understanding it help your content adjust with different values of font family and font sizes Thus making your content scalable  As to the issue of inhering font size we can always override by giving a specific font size for the element

User · Answer

As you showed convincingly  the font-size  100   will not render the same in all browsers  However  you will set your font face in your CSS file  so this will be the same  or a fallback  in all browsers   I believe font-size  100   can be very useful when combining it with em-based design  As this article shows  this will create a very flexible website   When is this useful  When your site needs to adapt to the visitors  wishes  Take for example an elderly man that puts his default font-size at 24 px  Or someone with a small screen with a large resolution that increases his default font-size because he otherwise has to squint  Most sites would break  but em-based sites are able to cope with these situations

[css] CSS: 100% font size - 100% of what?

Examples related to css

Examples related to font-size