Responsive App: which font-size units em vs. px vs. pt vs. percent

Question

I am building a responsive app targeted to desktop, tablet and mobile phone using HTML and CSS but I am not sure what unit font size should I use that the font fits well in any size screen. What's difference between em, px, pt and percent? What's the best choose for me?

I would like to hear real experiences about it in responsive apps for desktop, tablets and mobile phones

I would be thankful for any help!

Answer 1

You might want to take a look at this article: little link.

Update: Here's a tiny bit of explanation about how this applies in your case:

• px: a pixel is a tiny square (generally) in your device's display that can show only one color at a time. Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high (approximately -- different letters vary in height a bit, but the relative difference is preserved).
• percentages: font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
• pt: 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).
• em: em is the width of the letter 'm' in the selected typeface, basically the same as percentage, except that 1em is 100% and 1.5em is 150%.

So your choice would probably be px since it would preserve the logical proportions of text size to other sized elements.

Answer 2

Various dimensions are

1. “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
2. 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.
3. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One problem with the pixel unit is that it does not scale.
4. Points (pt): 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.
5. Viewport units : - These are relative to the view port. They are new in CSS3
   1. 3.2vw = 3.2% of width of viewport
   2. 3.2vh = 3.2% of height of viewport
   3. 3.2vmin = Smaller of 3.2vw or 3.2vh
   4. 3.2vmax = Bigger of 3.2vw or 3.2vh

see kyleschaeffer.com/.... and css-tricks.com/....

But to achieve responsive typo look at https://stackoverflow.com/a/21981859/406659

Answer 3

It seems to me the best will be the incoming rem and vmin units as documented here.

To cope with older browser you may want to have some CSS fall backs defined something like:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

or

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

(credit to Craig Butler)

Answer 4

Try using a mix of px, em, and rem.

Chris Coyier explains in this post that using px for your document, rem for your modules (ie. sections of your page), and em for text elements within your modules, the page will scale cleanly.