What does font size actually mean?
Let's take CSS. I have font-size
where I can specify a number in pixels
, points
etc.
So, what does 12px
mean? And what does 20pt
mean? Is it the maximum width of a character, is it the minimum one, is it the max height?
Will I know for sure that 5 characters of font-size: 10px
will have no more than 50px
, no less than that, or exactly that width?
Size. Choose a font that's at least 16 pixels, or 12 points. If many of your users are older adults, consider using an even larger font size—19 pixels or 14 points. A small font size is more difficult to read, especially for users with limited literacy skills and older adults.
Font size. An effective font size is big enough to easily read but doesn't take up too much space. This means your body text should be a 10-point to a 12-point font, depending on the look you want and your company's preferred style.
When I used to work in print we used the rule that 8pt was the smallest you should go when it comes to copy for print. So 10pt should be fine. It is small, but definitely not illegible.
No, size 11 font is not too small for a resume. In fact, size 10.5 font is even okay as long as it's still easy for the hiring manager to read. Because some fonts are slightly smaller than others, always check that your font is readable no matter the size.
Each font has an internal scale that the glyphs are drawn relative to. This is arbitrary and depends on the font designer. A letter 'M' could have an internal height of 0.5, 1, or 700 internal units.
At size 10px, one internal font unit = 10px.
Depending on the design of the font, this could render glyphs of any size, without constraint.
Commonly font-size is defined in pixels = px or points = pt
Note: 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.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
As other answers have said, there are no guarantees, but we often need some approximate rule of thumb. Empirically: here are three true type fonts, at 120px. The gray blocks correspond to the span
as rendered in Chrome (padding=0), the superposed red rectangles are 120 pixels high.
We see that (at least for these fonts; remember: no guarantees) the size can be assimilated to a "nominal height", that covers descendants and ascendants of most (but no necessarily all) common characters.
As per the W3 recommendation pt is generally for print, while px is for screen.
But the thing is CSS px is not necessarily an actual screen pixel. This is apparent when it comes to mobile devices, which have a default pixel scale other than 1-to-1.
Check out this article for a bit more detail.
Generally for sites, you should set a base font size in px, and subsequent sizes for different elements using em.
Well...everyone has already explained what the units mean so the only thing left to answer is from where to where to measure. My guess would be from the lowest to the heighest possible point of all characters in that font you are using. That is, from the "ascender height" to the "descender height" in this article: Wiki - Typeface
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With