Should I use pt or px

Question

What is the difference between pt and px in CSS  Which one should I use and why

User · Answer

pt is a derivation  abbreviation  of  point  which historically was used in print type faces where the size was commonly  measured  in  points  where 1 point has an approximate measurement of 1 72 of an inch  and thus a 72 point font would be 1 inch in size   px is an abbreviation for  pixel  which is a simple  dot  on either a screen or a dot matrix printer or other printer or device which renders in a dot fashion - as opposed to old typewriters which had a fixed size  solid striker which left an imprint of the character by pressing on a ribbon  thus leaving an image of a fixed size   Closely related to point are the terms  uppercase  and  lowercase  which historically had to do with the selection of the fixed typographical characters where the  captital  characters where placed in a box  case  above the non-captitalized characters which were place in a box below  and thus the  lower  case   There were different boxes  cases  for different typographical fonts and sizes  but still and  upper  and  lower  case for each of those   Another term is the  pica  which is a measure of one character in the font  thus a pica is 1 6 of an inch or 12 point units of measure  12 72  of measure   Strickly speaking the measurement is on computers 4 233mm or 0 166in whereas the old point  American  is 1 72 27 of an inch and French is 4 512mm  0 177in     Thus my statement of  approximate  regarding the measurements   Further  typewriters as used in offices  had either and  Elite  or a  Pica  size where the size was 10 and 12 characters per inch repectivly   Additionally  the  point   prior to standardization was based on the metal typographers  foot  size  the size of the basic footprint of one character  and varied somewhat in size   Note that a typographical  foot  was originally from a deceased printers actual foot  A typographic foot contains 72 picas or 864 points   As to CSS use  I prefer to use EM rather than px or pt  thus gaining the advantage of scaling without loss of relative location and size   EDIT  Just for completeness you can think of EM  em  as an element of measure of one font height  thus 1em for a 12pt font would be the height of that font and 2em would be twice that height   Note that for a 12px font  2em is 24 pixels   SO 10px is typically 0 63em of a standard font as  most  browsers base on 16px   1em as a standard font size

User · Answer

A pt is 1 72th of an inch and is a useless measure for anything that is rendered on a device which doesn t calculate the DPI correctly  This makes it a reasonable choice for printing and a dreadful choice for use on screen   A px is a pixel  which will map on to a screen pixel in most cases   CSS provides a bunch of other units  and which one you should choose depends on what you are setting the size of   A pixel is great if you need to size something to match an image  or if you want a thin border   Percentages are great for font sizes as  if you use them consistently  you get font sizes proportional to the user s preference   Ems are great when you want an element to size itself based on the font size  so a paragraph might get wider if the font size is larger       and so on

User · Answer

px   Pixels All of these answers seem to be incorrect  Contrary to intuition  in CSS the px is not pixels  At least  not in the simple physical sense  Read this article from the W3C  EM  PX  PT  CM  IN     about how px is a  quot magical quot  unit invented for CSS  The meaning of px varies by hardware and resolution    That article is fresh  last updated 2014-10   My own way of thinking about it  1 px is the size of a thin line intended by a designer to be barely visible  To quote that article   The px unit is the magic unit of CSS  It is not related to the current font and also not related to the absolute units  The px unit is defined to be small but visible  and such that a horizontal 1px wide line can be displayed with sharp edges  no anti-aliasing   What is sharp  small and visible depends on the device and the way it is used  do you hold it close to your eyes  like a mobile phone  at arms length  like a computer monitor  or somewhere in between  like a book  The px is thus not defined as a constant length  but as something that depends on the type of device and its typical use  To get an idea of the appearance of a px  imagine a CRT computer monitor from the 1990s  the smallest dot it can display measures about 1 100th of an inch  0 25mm  or a little more  The px unit got its name from those screen pixels  Nowadays there are devices that could in principle display smaller sharp dots  although you might need a magnifier to see them   But documents from the last century that used px in CSS still look the same  no matter what the device  Printers  especially  can display sharp lines with much smaller details than 1px  but even on printers  a 1px line looks very much the same as it would look on a computer monitor  Devices change  but the px always has the same visual appearance   That article gives some guidance about using pt vs px vs em  to answer this Question

User · Answer

Have a look at this excellent article at CSS-Tricks    px     em           pt     keyword   Taken from the article     pt  The final unit of measurement that it is possible to declare font sizes in is point values  pt   Point values are only for print CSS  A point is a unit of measurement used for real-life ink-on-paper typography  72pts   one inch  One inch   one real-life inch like-on-a-ruler  Not an inch on a screen  which is totally arbitrary based on resolution    Just like how pixels are dead-accurate on monitors for font-sizing  point sizes are dead-accurate on paper  For the best cross-browser and cross-platform results while printing pages  set up a print stylesheet and size all fonts with point sizes    For good measure  the reason we don t use point sizes for screen display  other than it being absurd   is that the cross-browser results are drastically different     px  If you need fine-grained control  sizing fonts in pixel values  px  is an excellent choice  it s my favorite   On a computer screen  it doesn t get any more accurate than a single pixel  With sizing fonts in pixels  you are literally telling browsers to render the letters exactly that number of pixels in height     Windows  Mac  aliased  anti-aliased  cross-browsers  doesn t matter  a font set at 14px will be 14px tall  But that isn t to say there won t still be some variation  In a quick test below  the results were slightly more consistent than with keywords but not identical     Due to the nature of pixel values  they do not cascade  If a parent element has an 18px pixel size and the child is 16px  the child will be 16px  However  font-sizing settings can be using in combination  For example  if the parent was set to 16px and the child was set to larger  the child would indeed come out larger than the parent  A quick test showed me this      Larger  bumped the 16px of the parent into 20px  a 25  increase   Pixels have gotten a bad wrap in the past for accessibility and usability concerns  In IE 6 and below  font-sizes set in pixels cannot be resized by the user  That means that us hip young healthy designers can set type in 12px and read it on the screen just fine  but when folks a little longer in the tooth go to bump up the size so they can read it  they are unable to  This is really IE 6 s fault  not ours  but we gots what we gots and we have to deal with it    Setting font-size in pixels is the most accurate  and I find the most satisfying  method  but do take into consideration the number of visitors still using IE 6 on your site and their accessibility needs  We are right on the bleeding edge of not needing to care about this anymore

User · Answer

Here you ve got a very detailed explanation of their differences  http   kyleschaeffer com development css-font-size-em-vs-px-vs-pt-vs   The jist of it  from source     Pixels are fixed-size units that are used in screen media  i e  to be read on the computer screen    Pixel stands for  picture element  and as you know  one pixel is one little  square  on your screen    Points are traditionally used in print media  anything that is to be printed on paper  etc    One point is equal to 1 72 of an inch  Points are much like pixels  in that they are fixed-size units and cannot scale in size

[css] Should I use pt or px?

Examples related to css