What's Limiting Fine Tuning of Font-Weight?

Get Started
1

Sitepoint Members,
How do I make my text a little less heavy. I’m not sure why but reducing font-weight isn’t doing it. If I reduce font-weight too much it reduces the heaviness too much. Is it the number of pixels on my screen limiting how little of a change I can make, causing a gap (from too heavy to too light)?

Thanks,

Chris

2

Typography in web design can be tricky. Depending on who you listen to it can impact hugely on a website’s readability. Unfortunately now with so many offerings in webfonts it is tricky to know quite what you are referring to without a link or example. Some fonts are designed to stay thick regardless of their point size so simply reducing the size of the text may not achieve what you are after. Fortunately there are good resources about choosing and using webfonts, another issue can be the way that [URL=“http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/”]various browsers render fonts too.

3

[font=verdana]From what I understand (which may be a bit hazy, I’ll admit), few (if any) browsers really use font-weight properly, and I’m not aware of any that take it all the way.

Most fonts come in just two weights, normal and bold, which correspond to 400 and 700 respectively. Some fonts may be available in a wider range of weights, such as Gill Sans, but because of the limitations of standard software and OSs, these are usually presented as separate fonts rather than variations of one font. What this means is that while Gill Sans may be available in Light, Book, Roman, Bold, Heavy, Extra Bold and Ultra Bold, even if a user does have the full range available they are likely to be stored mostly as separate fonts. If a website specifies font-family: Gill Sans; font-weight:200;, the browser won’t know that the separate font Gill Sans Light is the one it should use, so it will just use the normal weight instead.

Yes, theoretically I’m sure browsers could try to interpret the weights and interpolate between known fonts to mimic the effect of an unrecognised font weight, but (a) I don’t know of any that do, and (b) the chances are that they would make a right horlicks of it even if they did try.[/font]

4

I need to decide on something. I’ve been working on my eyes, trying to correct farsightedness. I moved the monitor closer and loaded an add-on for FireFox where I can reduce the fon’t size in 5% increments. Now I’m used to a lot smaller fonts. Now when I look at my site in real-size it looks horribly loud (heavy). I can barely look at my own site - 999a9c99tua99lcu9r9999es99c99om99. No idea what to do. I need a fresh pair of eyes to look at the situation.

Thanks,

Chris

5

“few (if any) browsers really use font-weight properly”. Is there a way around fon’t-weight? Or is the problem still that font weights are set by the few different versions of a font - the font weight doesn’t actually change the font changes. Maybe if I stop using em for units for font-size and use a different unit?

6

especially no effect on laptops.

7

[font=verdana]A way round ‘font-weight’ when you want to change the weight of the font? Not that I know of.

Yes, the problem is that most fonts only come in two weights, at least for public distribution (I don’t have any installed on my PC with more) even where, as I said above, the font itself does have a range of weights and they may all be installed, but as separate fonts.

I’ve just done a test and Opera and Chrome use ‘normal’ for 100 to 500, ‘bold’ for 700 to 900, and a horrible semi-bold simulation (which looks equally as bad as simulated bold and italics do on fonts that don’t actually have them) for 600. IE8 seems to use the proper bold for 600. But if you want anything other than ‘normal’ or ‘bold’, forget it.

I have absolutely no idea how changing the units you specify the font size in could conceivably make the slightest bit of difference to the font weight.[/font]

8

If you want to “control” your fonts across the board for like certain graphics and logos and such… the best way is to form an image or creation some photoshop scripts to do text images for your site. Otherwise, some browsers will change up those types of fonts any way they please to a certain extent. Just my two cents from my experiences.

9

Actually the answer is: NOTHING. Even w/o web fonts or w/o web for that matter ( this is the same deal in print design programs such as Quark Xpress) choosing “bold” merely thickens the text. Thickened text is not BOLD just as slanted is not italic ( look carefully).

So, no matter the media, in order to have varying weights you need to actually have that weight installed for that font family. (ie.: helvetica light, helvetica regular, helvetica medium, helvetica semi, helvetica bold, helvetica black… etc…) Even in CSS2 there are options for this! font-weight:600; is slight less bold than bold but that means the user has to have a corresponding font weight of font family installed in his/her machine, which is unlikely.

So the option is there, it’s just not realistic. CSS3 allows for loading of your own fonts … but this goes back to my original point that you must load the whole family of fonts if you want t take advantage of , well, he whole family of fonts( wights and variants) … which may not be practical.

10

You know since I changed font-size units from em to % my traffic increased about 50%.
I was reading “Em vs. Percent” about eighth of the way down this page:
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

The author shows that percent keeps proper font size when the visitor changrs the font size using broswer settings. I wonder if with all the new (and small) interenet gadgets if some of the gadgets automatically downsize font size, making ems kinda obsolete. He even has a graphic showing that ems don’t adjust enough and get cut off in height when the visitor reduces the font size too much. I changeds all my units from em to %.