Re: [css-d] Font-weight problems
Flash Wilson [EMAIL PROTECTED] 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.
[...]
http://www.wdam.co.uk/clients/kfa/index.shtml
[...]
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
helpful:
http://mrmazda.no-ip.com/auth/Font/fonts-face-commonweight.html
= = = =
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
suppose.
Greetings and succes,
francky
ps: you should give the html-validator
and the css-validator
a chance to give their suggestions.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-weight problems
On 06/03/13 10:44 [EMAIL PROTECTED] apparently typed: > 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. > So first I tried simply putting a BIG tag around the k, which worked > fine for the sizing but it was heavier and in larger text sizes it > displayed as bold. > So I created a class and put a SPAN around the k, which has > font-size: 1.3em and font-weight: 100 (although I have also tried > font-weight: lighter). > It doesn't seem any different! > Please have a look and tell me if you see the same thing, especially > in larger browser text sizes, and if you can help me make it right! > http://www.wdam.co.uk/clients/kfa/index.shtml > Any and all clues gladly accepted! Did you ever resolve this? If not, maybe playing with this might be helpful: http://mrmazda.no-ip.com/auth/Font/fonts-face-commonweight.html -- "Blessed are they whose ways are blameless, who walk according to the law of the Lord."Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-weight problems
[EMAIL PROTECTED] wrote:
>
> So I created a class and put a SPAN around the k, which has
> font-size: 1.3em and font-weight: 100 (although I have also tried
> font-weight: lighter).
>
> It doesn't seem any different!
>
> Please have a look and tell me if you see the same thing, especially
> in larger browser text sizes, and if you can help me make it right!
>
> http://www.wdam.co.uk/clients/kfa/index.shtml
>
> Any and all clues gladly accepted!
>
Tricky business. Rather than making the k lighter, make all three
letters appear to be the heavy weight as in the logo. The weight of k
has been determined by its size-- it has become display font. Accept
that. Add font weight: 200; to its selector to hold its present weight.
Markup the FA as FA using strong {font-weight: 600;}
and tweak.
Off the top of my pin head-- not tested.
Have fun.
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-weight problems
The k looks pretty good to me. It doesn't really look bold. To me it looks a little thicker because it is bigger but it doesn't look bold. (Mac OS X Firefox and Safari) I was playing with bold and bolder font weights a couple days ago. Made no difference since the font on my computer only had normal and bold weights. Bolder always rendered the same weight as bold. Probably the same thing with light and lighter (and their 100 300 or whichever equivilants). 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. Peter On 3/13/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > Hi, me again, still struggling with the finer points of CSS! > > Except I think this one should be simple... > > 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. > > So first I tried simply putting a BIG tag around the k, which worked > fine for the sizing but it was heavier and in larger text sizes it > displayed as bold. > > So I created a class and put a SPAN around the k, which has > font-size: 1.3em and font-weight: 100 (although I have also tried > font-weight: lighter). > > It doesn't seem any different! > > Please have a look and tell me if you see the same thing, especially > in larger browser text sizes, and if you can help me make it right! > > http://www.wdam.co.uk/clients/kfa/index.shtml > > Any and all clues gladly accepted! > -- > Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090 > -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- > Work: www.wdam.co.uk Personal: www.gorge.org > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font-weight problems
Hi, me again, still struggling with the finer points of CSS! Except I think this one should be simple... 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. So first I tried simply putting a BIG tag around the k, which worked fine for the sizing but it was heavier and in larger text sizes it displayed as bold. So I created a class and put a SPAN around the k, which has font-size: 1.3em and font-weight: 100 (although I have also tried font-weight: lighter). It doesn't seem any different! Please have a look and tell me if you see the same thing, especially in larger browser text sizes, and if you can help me make it right! http://www.wdam.co.uk/clients/kfa/index.shtml Any and all clues gladly accepted! -- Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
