[html5] Controlling font size

PrzemoF

I'm writing a simple html5/php/javascript app that I want to run on phone (firefoxos or app in firefox on android), tablet and a normal PC/laptop (all firefox). Is there a good way of controlling font size? I tried to use font-size:1cm; hoping that it will sort out the different dpi/resolution problem, but unfortunately it doesn't work - the size is very inconsistent.

Any ideas? I don't want to reinvent the wheel (ask for window size, ask for dpi, ask for portrait/landscape, calculate required font size) if there is already a solution.

tricky D

Try to use percentages and/or ems. Cms, in, mm are more for print and don't work so well on screens of any size.

More for you to read:
http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

PrzemoF

I found the source of my problems with page layout being completely different from what I want. For future reference:
"CSS units and dots-per-inch
The unit in doesn't represent a physical inch on screen, but represents 96px."

https://developer.mozilla.org/en-US/docs/Web/CSS/length

<rant>
I cannot imagine a situation when creating an unit and calling in "inch", but the unit is different from the real inch is any good. It's like making PI = 3 or square angle = 100 degrees.
</rant>