Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font size. What can I be sure of?

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?

like image 267
Iulius Curt Avatar asked Apr 19 '11 14:04

Iulius Curt


People also ask

What is an acceptable font size?

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.

What font size and font is best?

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.

Is 10 point font too small?

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.

Is 11 point font too small?

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.


5 Answers

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.

  • Q. Is it the maximum width of a character?
  • A. No
  • Q. is it the minimum one?
  • A. No
  • Q. is it the max height?
  • A. No
  • Q. Will I know for sure that 5 characters of font-size: 10px will have no more than 50px?
  • A. No
  • Q. no less than that?
  • A. No
  • Q. exactly that width?
  • A. No
  • Q. Is it the x-height?
  • A. No
like image 156
hooleyhoop Avatar answered Oct 06 '22 04:10

hooleyhoop


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%.

enter image description here

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/

like image 40
Cristian Boariu Avatar answered Oct 06 '22 03:10

Cristian Boariu


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.

enter image description here 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.

like image 24
leonbloy Avatar answered Oct 06 '22 04:10

leonbloy


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.

like image 42
musaul Avatar answered Oct 06 '22 03:10

musaul


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

like image 37
Philipp Horn Avatar answered Oct 06 '22 04:10

Philipp Horn