Browser Font Size Madness!

Alright so I recently had some discussions and researched a bit about font sizes in browsers. There are some really important findings here, but I will summarize as best as I can. How does the Browser Decide on a Font Size? Firstly, the default browser font size across all modern day browsers is 16 pixels. This is good to know when you are trying to calculate your relative font size. Secondly, another calculation is made in regards to your font sizes, and if and if you are like me, you are using EMs. Take your base font, and multiply by your EM value, so 1.1 em * 16 pixels = 17.6 pixels. All browsers (except IE) will correctly round up to 18 pixels, so your result would be 18 pixels. IE (seemingly) truncates the decimal value, and interprets 17.6 as 17 pixels, thus giving a one pixel difference! Make sure when you specify a relative font size, calculate it, and make sure its going to be the same in IE. The Scaling Issue (Thanks Stephan) http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ Due to an issue with scaling, it's best to at least start your font size (base font size) with a percentage (%). The code below will set the base font to 12 pixels. body{font-size:75%;} Using a percentage first is important because of scaling, and IE's browser font settings. After you set the % based font size, typically on the body, the EMs will work very nicely. Also most other web developers I have talked to suggest starting off with a simple base font, that makes the em calculations simple: font-size: 62.5% Everything after that in EMs (1 em ~= 10 px) (1.1 em ~= 11 px) (1.2 em ~= 12 px) and so on...

Extra JavaScript Plugin of the Month - jQuery Password Strength

This is an extra plugin for the month. I thought it was useful in a project I just got into. Check it out! This helps you let your users know if their passwords are strong or not. It does a fairly good job too, and there is some configuration to play with as well. http://www.unwrongest.com/projects/password-strength/

JavaScript Plugin of the Month - jQuery tagbox

I just thought this was a really cool plugin, if anyone has an interest in this sort of thing. It seemingly works in all browsers just fine. Had a little problem in IE6 with some of the rounded corners, but overall it was nice.

The code examples: $('textarea.tag_box, input.tag_box').tag_box({ grouping: '"', separator:/[\s]/ }); http://saynotofastfood.info/tagbox/examples/