font size and page size

windows

Guest
Two questions, neither of which have anything to to with each other except that they're for the same pages:<br />
<br />
I'm starting a site for my daughter's business. She's a graphic designer, but she's not a web designer - at all. This is the first site that I've ever done where looks count quite this much. She wants to attract high-end print design work with an emphasis on marketing, which is what she's been doing in-house for a decade. We'll be working on it together, but there are some things she'll depend on me to decide, in all probability. I plan to make it a stretchy page and fill the screen, but it's still going to look better in some resolutions than others. Based on her layout, it'll look quite small in 1024x780 and up if it's optimized for 640x480, which is what I do for most sites. Do you think that it's safe to optimize the look for 800x600 or is that just stupid?<br />
<br />
Then there's font sizes. I figured that since this is a new site, maybe I should use styles to define all the text right from the start. I've never done that before and in reading about it I find no agreement whatever on what is the best unit to use. I feel strongly that the user should be able to overide the font size easily if they need to, so that would eliminate pixels. That leaves everything else. I started with ems and then read that ems and percentages were given to odd inheritance problems. Or maybe that there are odd inheritance problems and those units are the ones affected by them. Does anyone here have the definitive, for certain, crossbrowser, happily ever-after answer for this? <br />
<br />
I guess that's it for now. I'll probably be back for more with this site. Happily the site itself is fairly simple once I get past this stuff. Thanks for any help, or discussion on these things.<!--content-->depending on the font you use... something like 8pt would work just fine. Don't beat yourself up over font size, just make it readable. <br />
<br />
Screen size: Quit making sites for 640x480 resolutions. That resolution is a thing of the past (statistically speaking: a VERY small % use it). The #1 used resolution is 800x600, followed closely by #2 1024x780. Design for 800x600, and allow it to fill a 1024x780 screen. This will capture most of the resolution market..... especially the market she is after.<!--content-->Thanks. The market she's after is what I'm concerned about. On a couple of my sites, 640x480 is right up there, sometimes ahead of 1024x780, so I can't entirely quit working with that as yet, but this is a different case.<!--content-->Only websites that need to cater to the largest possible audience (like eBay) should bother with low resolution pages (640 width or smaller). The rest of us don't need to be bothered. Design pages to fill in 800 width windows and still look good in 1024 width windows, which most will.<br />
<br />
Size 1 or 2 font size is generally the best looking. If you use CSS size 8 to 12pt (pt, not px) is about the same. It depends a little on the font face you use, I much prefer Verdana for small text over any other, with Arial second. If you use "pt" the browser can resize the fonts.<br />
<br />
If this is a new site you will definetly want to use CSS for text/font formatting. Two of the most over looked styles are LINE-HEIGHT and LETTER-SPACING, they are the equivalent of leading (the space between lines)and kerning (the space between letters) in printing/publishing. Your daughter is probably familiar with those terms and how to use them for effect. Use TEXT-ALIGN:JUSTIFY as much as possible for real clean looking blocks of text. <br />
<br />
Regards,<br />
Kevin<!--content-->Well, I don't know. I wish 640x480 would go away and I know that statisically it has, but for most of my sites I can't seem to get rid of it. It's just a matter of who they're done for. Even the one site that is truly all business is for a business who has a lot of clients that are churches and religious schools - and I think the owner's office computers are all set at 640 anyway.<br />
<br />
As far as line-height, letter-spacing and justifying goes, it sounds good but I'm going to have to get up to speed on how to use them. I've seen them but have no clue how to use them.<!--content-->The best examples of leading and kerning can be found in printed documents, catalogs, brochures, advertising, etc. Just look at how spacing is used to make a presentation easier to read, nicer to look at, more dynamic and so forth. For an interesting effect, make the line-height less than the font-size, the lines will overlap a little. You see this effect quite often in printed ads. <br />
<br />
<br />
<center><SPAN style="LINE-HEIGHT: 14pt"><br />
<SPAN style="LETTER-SPACING: 12pt; BACKGROUND: tan; COLOR: mediumblue; FONT-SIZE: 20pt; FONT-STYLE: italic; FONT-WEIGHT: bold">ZENYENTAS</SPAN><br><br />
<br />
<SPAN style="COLOR: firebrick; FONT-FAMILY: Arial; FONT-SIZE: 15pt; FONT-WEIGHT: bold"><br />
&nbsp;&nbsp;&nbsp;&nbsp;<SPAN style="BACKGROUND: moccasin">IMAGE</SPAN><span style="color: yellow"> & </span> <br />
<SPAN style="BACKGROUND: mistyrose">HTML</SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<SPAN style="COLOR: #dddddd; FONT-FAMILY: 'Lucida Handwriting'; FONT-SIZE: 17pt; FONT-WEIGHT: bold">SUPPO<SPAN style="BACKGROUND: darkred">R</SPAN><SPAN style="BACKGROUND: darksalmon">T</SPAN></SPAN><br />
<br />
<br />
Kevin<!--content-->Thanks very, very much. I kept that bit of code as a demo. Looking at it in practice is much better for me that reading up on how to do it. So, for special bits I can just use span to overide the external style sheet, right?<br />
<br />
And thanks so much for the lessons.<!--content-->Yes you can use a span tag to over-ride an internal or external CSS. Or you could define seperate classes in your CSS and just reference them instead of using span tags. I used span tags in my example because it is easy, I did not have to create a seperate CSS just for the example.<br />
<br />
Regards,<br />
Kevin<!--content-->
 
Back
Top