Previous Message
Next Message

Font-weight problems

Sent by francky on 24 March 2006 23:11

Flash Wilson [EMAIL-REMOVED] wrote:

    My client has a logo "kFA" in which she has the body of the k as
    tall as the FA part. This is in some font which naturally achieves
    this. She wants the same effect throughout her website.

Peter Michaux wrote:

    If you want to make the kFA look perfect you may have to create a
    little image and use it thoughout the website. You could set it's
    width to a value in em's so it will expand and contract as the user
    changes the browser font size.

~davidLaakso wrote:

    Tricky business. [...]

Felix Miata wrote:

    Did you ever resolve this? If not, maybe playing with this might be

= = = =
Hi Flash,
Noticing Felix's examples don't show the "k" combined with the "FA" in 
capitals (and after that: experimenting somewhat with different 
font-sizes and -types), I think the conclusion has to be the same: 
tricky business - it is not good possible to set in html/css a 
font-size/font-type/font-weight combination for the kFA that fits all 
browsers (with different default-fonts or user-overruled site-fonts, 
rendering differently) at all client-side font-enlargements.
So I should go for Peter's suggestion: a em-styled image.
To avoid irregularities due to rounding-off, I think the image has to be 
not too small and the small lines in the original letters have to be 
finetuned a bit larger. With an original height of 100px (giving a width 
of 238px in this case) the css can be:

    img.kfa {
        border: 0;
        height: 1em;
        width: 2.38em;

then the height is always relative to the font-size of the containing 
paragraph or H1, H2, li, and so on: and is just as high (1em) - so the 
image doesn't harm the line-height. The width of the img in em is (also) 
just 1/100 of the original in px, then the proportions cannot give a 
major problem.
Testing with a testpage 

is giving results I didn't expect: more as reasonable! :-)
FF is doing fine when enlarging the font-size in the browser, and IE 
also - the only bad thing with IE is, that after a browser fontscaling 
you have to give a refresh to let IE render the img properly. The 
visitors will not get that idea, I guess, but when leaving the actual 
page and going to a new one of the site, everything will be allright, I 

Greetings and succes,

ps: you should give the html-validator 

and the css-validator 

a chance to give their suggestions.

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: