Quick trick to allow users to choose font size
May 29, 2009
by
0
You may want to allow your users to select their font size on your web site. It is cleaner to use the browsers built in functionality but when your crowd of users is less advanced, you may want to provide a simple "choose your font size" option on your site. This can of course be done by just swapping out stylesheets depending on which option they chose. If you had three options for font size, you would have 3 stylesheets for those sizes. If you are going to allow them to set their font size, it is probably best to store this option in a session or a cookie so that it is maintained across page views.
You can go through the hassle of copying your original stylesheet, then overriding each class to change font-size where necessary for the larger text. You may even need to change widths or layout for certain items depending on the font size, when the fonts no longer fit in their intended boxes. If you are up for a quick solution that seems to be pretty cross browser compatible ( tested in IE7 and firefox ). There is a quick trick you can do.
This trick involves using the great measurement metric of EM's. If you define a stylesheet for font option 2, in this stylesheet you could do something as simple as:
* {
font-size: 1.2em;
}
Because EM's are based off the current font size ( or default font size ) and your other sheet defines the font sizes, as long as you load this new sheet for font size option 2 after your original sheet, it will override all your font sizes and increase them by a certain percentage. Tada!
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube