Click to See Complete Forum and Search --> : font size management: pixels or percentage?


dw beginner
09-26-2009, 11:08 PM
Hello,

This is my second post here, so I'm excited to be here!

Let's say you are working with CSS (Dreamweaver) and you are creating texts of different sizes on the page. It seems like the easy thing to do is use the percentage function at the bottom of the Dreamweaver design area.

But you could also set the sizes in pixels. When you do that (I believe) the font will be at the pixel size you set no matter what the user on the other end has their settings configured to.

Is there a preferred way that most corporate web designers use? For example, nobody is using "frames" any more for page organization. The trick of using a table with a zero border is also fading out of style fast. Most developers use div containers in css to control page layout.

Is there a similar agreement on font size management? If you know comparatively few people with vision problems would ever visit your site, then maybe setting the font sizes to fixed pixels could be a good way to guarantee a consistent user experience.

site1media
09-27-2009, 12:35 PM
Always stick with percentages or "em" for font sizes. While this does allow for people who have visual impairments to see your site better, it also helps the rest of us. I have 20/20 vision and routinely resize text to make it a little easier to read on my 21" monitor. Using a relative size declaration makes that easier.

On a sidebar, I am judging by your username that you are relatively new to coding and I have this suggestion. Stay off WYSIWYG editors! You need to have an absolute knowledge of the underlying code and the validation process if you want to be a web developer. Hand coding is the only way to really understand what is going on in your site. Dreamweaver has a lot of nice tools, but until you master the code stick to something like Notepadd ++ which has syntactical highlighting. Check out the HTML Dog site or book for a great reference.

nathandelane
09-29-2009, 11:40 PM
As an alternative, it is generally accepted that you set the default font size in a body style. Use px in this case to create an absolute size, then use either % or em for increases or decreases in size. Then at least you have more control though.

slaughters
09-30-2009, 05:54 PM
Use pixels.

The whole use em's for the visually impaired argument can really be thrown away now, since most browsers are using the Zoom (Ctrl+ / Ctrl -) model now, which zooms all page elements, instead of simply "Text Size" which only resized text elements

Percentages and EM's are also horrible to maintain. It's because their measurements are always relative to their container. Example: a P tags width is set to 50% and you've set the H1 tag font size to be 2%. When H1 is inside a P tag the font size is 1%. When outside it is 2%

It gets real complicated real soon.

thejuice
10-09-2009, 12:32 AM
I found a great little trick about how to keep your font sizes real simple using the em sizing instead of pixels. even though slaughers has a pretty valid reason for using pixels.

Found on firebelly's blog.
http://firebellydesign.com/blog/show/a-smart-way-to-handle-relative-font-sizing-in-css

Thanks,
j