I am working on some UI controls and wondering if I should use pt for the widths, heights, border sizes, margins, paddings, and font sizes? I want the controls to be scalable and look the same on every screen and projector.
Is there something else I should worry about when designing for scalable user interfaces? I am already using non-raster based graphics (colors and SVG).
If you want scalable, then you don't want pt, which resolve to 1/72th of an inch (but only if the computer is correctly calibrated to know what DPI to use).
If something is sensible at 72pt (1 inch) for a screen that you sit right in front of, then it isn't going to be sensible when projected (still 1 inch tall) on a screen 10 feet away.
Yes, you can use pt or em. 12pt = 1em. This is the size that is adjusted when you choose a smaller or bigger font in your browser. Elements marked up with pt or em are sized along with the font (I think).
Modern browsers however (even the latest FireFox and IE), prefer to zoom the entire page instead of only the font, although it's still an option to zoom fonts only. In that case, it doesn't matter much whether you choose px or pt.
As has been mentioned, 1 point is 1/72 of an inch. The screen I'm using has 1200 pixels on a height of 20cm. If I project it, those 1200 pixels spread to 3 metres.
There are many measurements in the w3c CSS specification, many are used but few properly.
Your best bet is to use em's for layout which is related to the font in use. Percentages can also be used.
However, you'll need to 'nudge' some browser layouts by "a gnat's tadger", particularly when looking at buttons, dropdowns and text boxes. Often these are setting something to position relative to nudge it up/left/down/whatever. Typical examples are when IE and Firefox have slight differences.
It's quite ambitious to have your forms rendering "the same on all screens and projectors", implying different browsers all look the same.
