Font-size px vs pt

stomy
Publishing text-based content in modern times - how to select your font sizes ? Understand the difference between font size in px

This post is about the importance for webmasters/text-content publishers to move from px based font-size to pt based font size to maintain a steady and equal absolute font-size for readers independent of screen resolution in pixels

Definitions

commonly font-size is defined in pixels = px or points = pt
72 pt equals one inch = 2,54 cm
the resolution of a screen is defined in px
obviously the more pixels on a monitor of equal dimensions the smaller each pixel and hence the smaller the font size if font-size is defined in px

obviously also
if you define your font-size in all online documents in pt rather than px then you have a steady / equal font-size on any monitor of any resolution and thus a steady reading comfort independent of monitor resolution used by readers/surfers

in earlier times - late last millennium - many webmasters of large top domains started their career. By then most monitors had a screen resolution of some 640 x 800 pixels and for a long time screen diagonal size as well as resolution changed little

hence most font sizes used have been configured to be in px ( pixels since in a market with little changing monitors the appearing font-size on monitors also changed little

a pixel oriented font size of 10px to 12px was more or less the default font-size

then with new laptops and better desktop monitors appearing on the market, the resolution improved ...
soon - around the year 2000 and after - laptops used to have at least a resolution of 768 x 1024 and as the industry improved I now have an Acer Ferrari 4005WMLi with a screen resolution of 1050px x 1680px

as a result of ever improving screen resolution - the font size actually appearing on surfers monitors shrinks more and more according to precise mathematical formulas

screen size is diagonal (lower-left-) corner to (upper-right-) corner

for a practical example I will use a typical laptop monitor size of 15.1 inch with normal height to width ratio of approximately 3:4
(my Ferrari 4000 has a wide screen with a ration of approximately 3:5 - modern screen sizes and rations may vary depending on manufacturer)

hence in our above example monitor used we will have figured out a ratio
diagonal : height : width of approximately

5:4:3

hence the dimensions will be approximately

15.1 inches diagonal
12.08 inches width
9.06 inches height

with an old fashioned configured font-size of 12px height on above monitor
with a resolution of 768x1024 the height of a letter would be

0.14 inches font height or approximately 3,6 mm

with the same monitor size but a modern resolution of lets say 1050x1400px
the same letter would have a size of

0.10 inches font height or approximately 2.54 mm

as you see the technical progress leading in ever improving finer resolution results in ever shrinking font size as is actually appears to the reader IF we continue to define font-size in pixels ( px ) rather than in points ( pt ).

most if not all HTML editors and CMS tools or templates used easily let us change all font-size from px to pt to achieve a steady absolute font-size independent of monitor resolution used the our readers.

when i changed recently to my new laptop i noticed a decrease in reading comfort due to shrinking font-size. many pages i used to switch font-size by using the hotkeys Ctrl++ ( simultaneously press the keys

Ctrl PLUS +
to switch one size larger
or opposite
Ctrl PLUS -
to switch one font-size smaller
on your monitor display

readers need to be comfortable when reading value content hence it is vital to offer the greatest reading comfort where it is easiest to change font-size - at the publishes' side .. at OUR side.

as a result i have changed myself in recent days from my original 11px or 12px default font-size to a new 12pt font-size and it looks as it looked many years ago when i initially decided on my font-sizes in my CSS sheets.

with modern external CSS style sheets - in my case approximately 100 CSS files for the entire Cyberspace Ashram site all such appearance modifications can easily be achieved with minimum efforts.

May be YOU too think about YOUR font-size for your own content
as i noticed during the recent surfing - most webmasters still have a font-size made for much lower resolution old fashioned monitors.

I tested many pages - and finally gave a good friend 60+ yrs wearing glasses - sample pages to read and he confirmed easy reading with the current 12pt font-size and even could read smaller font-size.

I also noticed that different browsers display same 12pt font-size with large difference in real size. so does Mozilla show much larger fonts than my preferred Firefox 1.5

size seems after all be something relative even if it actually should be displayed in absolute sizes rather than in shrinking pixels ...
Tags