Css: Calibri and Arial

Don't use px. Use %.

Pixels (px) and points (pt) are print media measurements. They work ok when the media is a fixed size and resolution - like a printed piece of paper. They break down when using variable resolution media.
A 14px font may look good on your monitor which may be 1024x768 pixels but it will look like fly poop on a 1600x1200 monitoer and huge on an 800x600 monitor. In a web phone, it may look gigantic. Different browsers will also affect how large it appears.

Web media is not like print media. With print media you have absolute control over appearance. With web media, you "suggest" how it should appear. The browsers, end users and screen resolutions make the final decision.


Calibri is a MS Office font that first appeared with MS Office 2007. If you don't have some version of MS office greater that 2007, you won't have it. As a relatively small percentage of web users will have it, it's not something to base a site design around.

Google "web safe fonts" for a list of fonts that most users will have. You'll get a bit more assurance that your pages look at least similar to the end users regardless of what browser and screen resolution they use.