Should I suggest Fireworks on web page?

Get Started
1

I am half way finished designing a website for a client. I am currently learning CSS. I am having a hard time getting the fonts to look good in IE (which I hate), and Fireworks as well as Google Chrome. I was told to use % or ems for the fonts instead of pixels. Even when I choose 80% font it still looks much better in Fireworks then it does in IE. Which reminds me of a question. Am I allowed to mix the font types in a style sheet, such as pixels, % and ems or should I have only one type of size such as ems? Will it mess things up if I mix them? I would imagine so.

Here is my real question. Should I put somewhere on the home page “best viewed in Fireworks…” is that even done anymore?
Thanks

2

Use the unit appropriate to the content and media. Pixels are for screen and usually concerned with images and are relative to the viewing device. The “em” unit refers to the font size of the element and the Percentage values are always relative to another value.

3

Okay I found that with ems I should be using 1 or 1.5 ect… I’m learning. :slight_smile:
Can anyone please give me what size ems and anything else to make this text look good in IE as well as the others? I can’t get it to work. I just need something to work with so I can show my client… :slight_smile:
Need Good Text CSS

4

Thanks again.
I clearly did something wrong. When I went into the stylesheet and changed my font sizes from % to ems the fonts ended up to large that it ruined my pages. When I changed it back to % it looked the way it did before.

Since I am just learning CSS it is clear I am missing something here. Any suggestions?
I will past the CSS here.

@charset “utf-8”;
.stylesheetone {

}

.body{

margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
background-color:#2e81d4;

}

.largestTable{
background-color:#FFFFFF

}

.bodytext{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 75%;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: left;
word-spacing: normal;
letter-spacing: normal;
white-space: normal;
}

.directiontime{
font-family: Arial, Helvetica, sans-serif;
font-size:77%;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: left;
word-spacing: normal;
letter-spacing: normal;
white-space: normal;

}

/*lowerbuttonstrip{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #0000FF;
font-style: normal;
}
*/

.linksbuttom{
font-family: Courier New, Courier, monospace;
font-size: 77%;
color: #000000;
font-style: normal;
line-height: normal;
font-weight: normal;
text-transform: none;
}

.copyrightstrip{
font:Geneva, Arial, Helvetica, sans-serif;
font-size:60%;
color:#FFFFFF;
}

.header{
color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

.gymhours{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 75%;
font-style: normal;
text-align:center;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;

word-spacing: normal;
letter-spacing: normal;
white-space: normal;

}

.jrbootcampdetails{
color: #FFFFFF;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
font-style: inherit;
line-height: normal;
}
.directiondays {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
text-align: left;
word-spacing: normal;
letter-spacing: normal;
white-space: normal;
}

5

Also, keep in mind how good or bad a font appears on any given browser is strongly affected by OS or stuff running on that OS (Windows has ClearType, Macs have something that make text look fat and weird, Gnome makes text nice and smooth on all my browsers : ) and so even if a font looks totally awesome or toto’ cwap on your machines doesn’t mean others will necessarily see it that way.

On my Windows machine, IE renders fonts smoothly, while all other browsers show aliased (jaggedy) text. Not only looks bad, but is hard to read: but that’s not your fault and there’s little you can do about it, other than making sure the text is not something impossible to read like 9px : )

You may want to read up on Font-Families: while even sticking to “web-safe” fonts can’t guarantee anyone sees any particular font, it’s still useful to know that Verdana and DejaVu Sans are very readable even at smaller sizes, that Verdana and Georgia tend to be larger in x-height (size of lower-case x) than other font families (and Calibri and other new Vista fonts tend to be smaller!), stuff like that.

*edit I use this to eyeball fonts for my font stack: http://www.apaddedcell.com/web-fonts

I’ll use px for text that’s got to match a an image behind them, and for the most part, I use em’s otherwise. So, if you’re going to use em’s, test browsers who can text-enlarge: in Firefox, go to View>Zoom>Text only and then do some CTRL++ a few times. Safari does this as well. Opera’s the only one I know of who ONLY zooms. You’re shooting for your page still making sense after 3 or 4 text enlargements (or better if you can do that).

6

I’m assuming you mean FIREFOX not fireworks right? :slight_smile:

I’m not qualified to comment on best practices with CSS, but I think the days of saying “best viewed in Firefox” or whatever are long past. I don’t know the figures for the market share each browser has today, but I don’t think theres any reason a developer can’t get things to look great for just about any viewer, and especially in the two biggest browsers out there.

7

That’s the second time that I know of that I accidently called Firefox Fireworks! :rofl:Ugghhh!!
You’re right. I really have to get my CSS skills up to speed.

I’ll tell you what, I’m beginning to LOVE CSS!:cool:

8

I recommend using EM’s for font’s because their scalable (I don’t really like percentages for fonts - personal preference) however I would discourage you from mixing font sizes in PX EM and % because that will have serious discrepancies when people resize content on your page. Essentially, keep your font’s using a single measurement unit (not PX - that’s bad for IE), but feel free to use a range of units on other elements of your page. :slight_smile:

9

A good article that I can’t link to (because my count is too low) can be found if you search google for “clagnut font size ems”.

An extract is below:

OK let’s dive into ems. I’ll show you, from scratch, how to size text in a document using ems. I’ll assume throughout that we are dealing with a browser set to ‘medium’ text. The default size for ‘medium’ text in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting body size to 62.5%:
BODY {font-size:62.5%}
This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

I recommend searching for the site and reading the whole article, it is very helpful.

10

Oooh, Will, that was considered very good several years ago (it’s even recommended/explained in Dan Cedarholm’s BulletProof web design book), but it has a pretty major flaw: that “assumption” he talks about of 16px. Anyone who doesn’t have that default is getting a bit screwed with… esp those using Large Fonts on Widows or just a different resolution setting. 62% is almost half of the “default” 100% font size… that’s just too small for some people.

*edit but here’s the link http://www.clagnut.com/blog/348/ for those interested in reading it.

Instead, nowadays people recommend something much higher… I don’t reduce lower than 100% but others will set the body to 80%. The whole advantage of the method on clagnut was that it would help developers translate px to em… since that’s kinda equivalent to comparing horses and poodles, we’re trying to eradicate the idea.

Sometimes I wonder if the 62.5% thing is the reason why search boxes often don’t fit without wrapping on my Firefox… sitting on the Gnome desktop, everything seems to get a hair too big compared to on Windows… I’ll see wrapping of search boxes and menus where Windows users don’t, on the same browser.

What I do is set the body font-size to 100% (gets around an IE bug if you set something for font-size there) and then main main text is 1em. So, whatever the user has set as their default, that’s the size of the p. So, I don’t have to worry as a dev too much about what if they have default 20px because they’re in their 60’s or something… the page just does what it does.

I know I often have to do one or two text-enlarges for websites due I think to my screen resolution… about.com’s article pages are an example of text that’s too small for me to read comfortably.

*edit 2: here’s a relevant SitePoint link: Is the body {font-size:62.5%} technique still current? Advisable?

11

That’s interesting I wasn’t aware of it… any links to good resources?

I found the article a couple of weeks ago and considered it to be pretty useful, as it went quite extensively into it.

Thanks for the heads up.

Edit: just read your edit, cheers.

12

Yeah I was just rereading them myself and the links to yet other threads opens a whole ball of worms : )

Also, you can post links if you do away with the http stuff and put spaces around the dots:
www . clagnut . com/blog/348/