Em font sizes in fixed layouts?

most of the stuff I have read says em fonts are what is done in fluid and elastic layouts. maybe i am reading junk

the good Mr. Reese enlightened me i could achieve a fixed layout AND STILL use em fonts. i googled, but mostly it is just discussions on pros and cons and i didn’t even see any examples how. if i forum search my keywords are too lengthy and won’t return precise answers so here goes:

for site:
http://stevekimforag.com/test/index.html

i am trying to figure out a way how to put in em font sizes for the limited number of text i have. don’t worry the page is very early going right now and it is a breeze to dissect.

before i spend a full day messing around and just making things worse i thought someone who does fixed layouts with em font sizes could point me in the right direction.

thanks :goof:

Em-sized fonts in a fixed-width (pixel-based) layout is a recipe for disaster. Languages like English, with short words, are a bit more resilient than languages like Swedish, Finnish or German where there is no real upper limit on how long a compound word can be. Good luck fitting ‘kontraktsanställningsålderstilläggsklassföljsamhet’ into a pixel design …

The only reason fixed-width designs exists is that people insist on using a single full-width image that spans over the width of the page. That’s fine for print design, but most designers haven’t yet twigged that web design is different.

people insist on using a single full-width image that spans over the width of the page

guilty as charged :blush:.

i take it you prefer the fluid and elastic designs?

Yes. A constrained fluid/elastic hybrid has proven to be the best (i.e., most user friendly, rather than designer friendly) solution in most cases for me.

Just to clarify what sirfigglesworth has siad, I said em fonts in a fixed layout would be possible as long as heights aren’t set because the page could grow in height.

I didn’t say it was user friendly though :). I also told him that fixed pages on big/small resolutions would look attrocious (didn’t use that word but all the same ;))

Welsh has that same issue too… If you ever visit Llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch :wink:

Most web designers do because we know that screen space is far too dynamic to the end user to be able to simply provide a “one size fit’s all” situation. What you could do in your situation is (if you don’t mind a bit of distortion) ive the image 100% width and use min/max widths on the content (in PX), thereby the content will expand and take the image with it if the content pushes past the boundaries as considered. Just one of many hybrid style designs. :slight_smile:

dam… lot to think about and roll with. i always knew SERIOUS web designers do NOT do fixed layout, but it seems to be everywhere so i figured ehhhh whats the big deal. a lot of the coolest looking designs i have seen on the web are fixed layout. i tried to mimic these looks and ended up going the fixed route. all these designs seem to have one thing in common: the designers are AMAZING with photoshop, but not that great with .css and html.

if i am ever to get even close to where you guys are i guess im gonna have to do the fluid elastic route. i will definitely try to make my future designs fluid or elastic, but right now i am so constrained by time im just gonna have to go with fixed, but THANK YOU everyone as after this is all done I have much to think about and how to incorporate this kind of stuff in future designs and even the current one after everything is done.

thanks again.

To be honest, I’ve been to a few forums, and each one of those forums only had 1 (2 max) people who actually knew web design.

There are a handfull here though. In short, there aren’t many professionals in this area (well there are, but not as plentiful as one would hope). Many people just have mediocre knowledge :slight_smile:

Sorry Ryan but I can’t agree you can just slap that sticker on everyone, especially when you use it in the general contexts of web design rather than something like CSS. Web design is made up of a wide variety of skills and individual niche subjects, to which being able to claim you’re that much of a professional you “actually know” all of those subjects to a great extent is impossible. If you want to say there’s not a lot of CSS “professionals” here (in the sense of being highly trained to expert levels - beyond the “master of none” state) then fine, but it’s just plain wrong to use that generally. We may not all be CSS experts to the likes of Paul or Eric Meyer… but I doubt anyone here can rightfully claim that their that much of a master in “web design” considering to be as such you would need to excel not just in a single language but the wider spectrum of both code, theory and practical applications of web design. Case in point, I might not be the best coder (like for example in CSS or JavaScript) but I certainly feel I can call myself a professional when it comes to stuff like web accessibility or perhaps the user-experience - both major part of web design, which others on this forum may perhaps not have reached the same level of insight on that particular niche. In summary: I’m sure there’s more than a couple of people who know their stuff here, but like web design itself, the knowledge will differ depending on the niche. :slight_smile:

Sorry for my miscommunication, I was more of talking to myslef there (I do that sometimes).

I meant HTML/CSS(more in the CSS skills section)
Although subsequent sections could also go into usability (types of layouts) so I now think that my orignal post just shouldn’t have gone up ;).

Ahh, well that makes more sense! I agree there’s a shortage of skilled experts in specialist fields, CSS or otherwise… we do need less “masters of none” :slight_smile:

it is difficult for one man to master stuff when they got like 5 things being thrown in their face (Javascript/PHP/html/css/photoshop).

but i just take a deep breath and take things step by step.

Having done it myself, I can tell you why many sites and templates are at least fixed-width: you can save on images for junk like rounded corners and dropshadows etc.

If your page is always 990px wide, you can use a single image, repeated-y, to make a dropshadow that grows (in height) with the page, on a single container.

If your page is flexible width, though, you’ll need a right side shadow, a left side shadow, and two containers (since except in Safari you get just one shot at an image per box).

Using images for corners, you could have a top-cap and a bottom-cap to hit all 4 with a fixed width page, but if your page is flexible you’ll need 4 (yes, I’m saying all this knowing there are ways without images or with a single circle to round all four images).

So, when making completely flexible-like-a-yogi-trapeze-gymnist page, you need your images to be much much larger than what shows onscreen, and you have to keep testing your page at different text sizes.

In fact, I wonder if you can simply never have two things side-by-side and survive unlimited (or very high) text-enlarge. Either the words get too long to remain side-by-side, OR their boxes grow wider than the user’s screen and they get to have fun scrolling left and right. When I use em’s for container-sizing, I’ll get the scrollbar first while layout is preserved and words don’t overlap, but that’s no fun either.

For most pages with any kind of complicated (more than one col) layouts, the most I hope for is several text-enlargements without total annhiliation. If it can’t survive two, I decide it’s too brittle and try to relax it a bit.

I’ve started switching back to pixel fonts for text in limited areas. It doesn’t stop text-enlarge (except in IE) but helps me center or align things with teh bg image being used. If you do that, you have to realise that even the 16 or 18px font size you’re using is still too small for someone.