Re: [css-d] font-variant:small-caps;
2014-06-21 7:38, Robert A. Rosenberg wrote: At 14:01 -0500 on 06/16/2014, Richard Wendrock Forum wrote about Re: [css-d] font-variant:small-caps;: I used David's suggestion to solve the problem. Assuming Arial does not have small-caps variants, I switched to font-family: Verdana, Geneva, sans-serif; and that solved the problem. Thank you everyone! One warning - Even if you choose only families that have small-caps, it will not fix the problem UNLESS these families are universal (ie: Are on all your user's machines). As I mentioned in my earlier comment, the solution was illusionary: Verdana has no small caps, neither has Geneva, and most probably not any font used as default sans serif font, unless a user has explicitly selected a default font different from factory settings. And there is absolutely no font that is universal in the sense of being installed in all devices used to access web pages. The only fix that will work is to use a downloadable font with small-caps. This, of course, assumes that the user's browser supports downloadable fonts g. Practically all browsers in use support downloadable fonts (when the fonts are provided in different font formats), though the support may be disabled, usually inadvertantly. But you would also need to use font-feature-settings instead of font-variant, and you would need to use a font generator that preserves the information needed for accessing small caps. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
At 14:01 -0500 on 06/16/2014, Richard Wendrock Forum wrote about Re: [css-d] font-variant:small-caps;: I used David's suggestion to solve the problem. Assuming Arial does not have small-caps variants, I switched to font-family: Verdana, Geneva, sans-serif; and that solved the problem. Thank you everyone! One warning - Even if you choose only families that have small-caps, it will not fix the problem UNLESS these families are universal (ie: Are on all your user's machines). Otherwise the selection will end up defaulting to the user's sans-serif default and the problem will still exist for that user. The only fix that will work is to use a downloadable font with small-caps. This, of course, assumes that the user's browser supports downloadable fonts g. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
I used David's suggestion to solve the problem. Assuming Arial does not have
small-caps variants, I switched to font-family: Verdana, Geneva, sans-serif;
and that solved the problem. Thank you everyone!
The Lord bless you and keep you,
Richard
Numbers 6:24-26
-Original Message-
From: David Laakso [mailto:laakso.davi...@gmail.com]
Sent: Thursday, June 12, 2014 6:41 PM
To: Richard Wendrock Forum; CSS Discuss
Subject: Re: [css-d] font-variant:small-caps;
On Thu, Jun 12, 2014 at 5:42 PM, Richard Wendrock Forum
fo...@thehomepagestore.com wrote:
It appears there is an optical illusion when using
font-variant:small-caps;
The first letter of each word appears more bold than the other letters
in the word.
.fonttext23 {
font-size: medium;
font-family:Arial;
text-align:left;
font-variant:small-caps;
font-weight:bold;
}
I cannot find a way to make all letters uppercase and have the same
bold weight.
Can you solve this problem?
Not using Arial. The property font-variant is used to choose between normal or
small-caps variants of a font. Arial does not have a small-caps variants.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
2014-06-16 22:01, Richard Wendrock Forum wrote: I used David's suggestion to solve the problem. I don't think he made any suggestion. He wrote Not using Arial. Assuming Arial does not have small-caps variants, There is no reason to assume such things; it is a fact that can be checked. I switched to font-family: Verdana, Geneva, sans-serif; and that solved the problem. I don't think it did. It may have changed the symptoms so that you don't see the problem. Verdana hasn't got small-caps either. You are still seeing synthetic (algorithmic, fake) small-caps, which do not match the style of normal letters because they are just capital letters in reduced size. The distortion naturally varies by font face and size. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
Le 13 juin 2014 à 13:57, Jukka K. Korpela jkorp...@cs.tut.fi a écrit :
t does that (well, browsers do that) even if the font contains small-caps
glyphs. This can be seen e.g. by testing the following on IE 11 (in a system
that has the Calibri font):
style
* { font-family: Calibri }
/style
A
span style=font-size: 80%A/span
span style=font-variant: small-capsa/span
span style=font-feature-settings: 'smcp'a/span
You will see, after a normal A, two reduced-size A letters (of roughly the
same size), with thinner strokes, since stroke width (for a given font)
generally depends on font size. There is no optical illusion: a capital
letter (which is not affected by font-variant) just is bolder than the
reduced-size letters.
Is that the case on Windows? (btw, 7 or 8.x ?)
I cannot reproduce that with Firefox Nightly build running on OS X 10.9. The
font-size: 80% span is visibly lighter, but both small caps glyphs have the
same stroke width / weight / colour as the capital letter. The strokes are
slightly thinner of course, as is to be expected given the difference in
font-size, but there is no such glaring difference as one can see with e.g.
Arial.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
2014-06-13 17:14, Philippe Wittenbergh wrote:
Le 13 juin 2014 à 13:57, Jukka K. Korpela jkorp...@cs.tut.fi a écrit :
t does that (well, browsers do that) even if the font contains small-caps
glyphs. This can be seen e.g. by testing the following on IE 11 (in a system
that has the Calibri font):
style
* { font-family: Calibri }
/style
A
span style=font-size: 80%A/span
span style=font-variant: small-capsa/span
span style=font-feature-settings: 'smcp'a/span
You will see, after a normal A, two reduced-size A letters (of roughly the same
size), with thinner strokes, since stroke width (for a given font) generally
depends on font size. There is no optical illusion: a capital letter (which is
not affected by font-variant) just is bolder than the reduced-size letters.
Is that the case on Windows? (btw, 7 or 8.x ?)
Yes. Tested on Win 7, with IE 11. Also works on Firefox if I add a -moz-
prefixed version.
I cannot reproduce that with Firefox Nightly build running on OS X 10.9.
Do you have Calibri on the system, or is the browser falling back to
another font (which probably lacks small-caps glyphs)? And for Firefox,
you need to add -moz-font-feature-settings: 'smcp'.
The font-size: 80% span is visibly lighter, but both small caps glyphs
have the same stroke width / weight / colour as the capital letter.
If you see the last letter as small caps of some kind, then the browser
is supporting font-feature-settings or its prefixed version if you have
included one.
The strokes are slightly thinner of course, as is to be expected
given the difference in font-size, but there is no such glaring difference
as one can see with e.g. Arial.
If you are seeing small caps, real (small-caps glyphs) and fake
(synthetic) here and they look similar, then the reason might be the
font size and/or differences in font rendering, which are known to exist
across platforms and browsers. I think you should see a visible
difference if you increase the font suitably.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
On 6/12/14, 14:42, Richard Wendrock Forum wrote:
It appears there is an optical illusion when using font-variant:small-caps;
The first letter of each word appears more bold than the other letters in
the word.
.fonttext23 {
font-size: medium;
font-family:Arial;
text-align:left;
font-variant:small-caps;
font-weight:bold;
}
I cannot find a way to make all letters uppercase and have the same bold
weight.
Can you solve this problem?
Just guessing, but I think the bold characters may actually be upper case in
the original text. Try adding the declaration 'text-transform: lowercase;' to
that rule.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
Le 13 juin 2014 à 06:42, Richard Wendrock Forum fo...@thehomepagestore.com a écrit : It appears there is an optical illusion when using font-variant:small-caps; The first letter of each word appears more bold than the other letters in the word. … I cannot find a way to make all letters uppercase and have the same bold weight. Yes that is kind of expected - the small-caps value takes the uppercase characters of the font and reduce it in size (by about 80%), unless the selected font contains true small-caps glyphs. You may want to have a look at the font-feature-settings property [*]: font-feature-settings: smcp on; The caveat is that you must use a font that contains the necessary glyphs. Hint: common fonts such as Arial do not. So this is best used in combination with @font-face. Support is somewhat spotty: Firefox, prefixed and IE 10+ afaik. [*] http://www.w3.org/TR/css3-fonts/#propdef-font-feature-settings Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
On Thu, Jun 12, 2014 at 5:42 PM, Richard Wendrock Forum
fo...@thehomepagestore.com wrote:
It appears there is an optical illusion when using font-variant:small-caps;
The first letter of each word appears more bold than the other letters in
the word.
.fonttext23 {
font-size: medium;
font-family:Arial;
text-align:left;
font-variant:small-caps;
font-weight:bold;
}
I cannot find a way to make all letters uppercase and have the same bold
weight.
Can you solve this problem?
Not using Arial. The property font-variant is used to choose between
normal or small-caps variants of a font. Arial does not have a
small-caps variants.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
Is that first letter more 'bold' or is it actually a bit larger?
Is that first letter a cap in the HTML? If so this is normal...Since there is no
Arial SC the UA is transforming the lowercase letters to uppercase and then
shrinking them a bit.
HTH
On June 12, 2014 at 5:42 PM Richard Wendrock Forum
fo...@thehomepagestore.com wrote:
It appears there is an optical illusion when using font-variant:small-caps;
The first letter of each word appears more bold than the other letters in
the word.
.fonttext23 {
font-size: medium;
font-family:Arial;
text-align:left;
font-variant:small-caps;
font-weight:bold;
}
I cannot find a way to make all letters uppercase and have the same bold
weight.
Can you solve this problem?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
2014-06-13 2:31, Philippe Wittenbergh wrote:
Le 13 juin 2014 à 06:42, Richard Wendrock Forum fo...@thehomepagestore.com a
écrit :
It appears there is an optical illusion when using font-variant:small-caps;
The first letter of each word appears more bold than the other letters in
the word.
I cannot find a way to make all letters uppercase and have the same bold
weight.
Yes that is kind of expected - the small-caps value takes the uppercase
characters
of the font and reduce it in size (by about 80%), unless the selected
font contains
true small-caps glyphs.
It does that (well, browsers do that) even if the font contains
small-caps glyphs. This can be seen e.g. by testing the following on IE
11 (in a system that has the Calibri font):
style
* { font-family: Calibri }
/style
A
span style=font-size: 80%A/span
span style=font-variant: small-capsa/span
span style=font-feature-settings: 'smcp'a/span
You will see, after a normal A, two reduced-size A letters (of roughly
the same size), with thinner strokes, since stroke width (for a given
font) generally depends on font size. There is no optical illusion: a
capital letter (which is not affected by font-variant) just is bolder
than the reduced-size letters.
The last letter has (roughly) the same stroke width as the normal A,
since a small cap glyph is used, and it has been designed by a
typographer to have the same stroke width as other characters in the
typeface.
You may want to have a look at the font-feature-settings property [*]:
font-feature-settings: smcp on;
The caveat is that you must use a font that contains the necessary glyphs.
Hint: common fonts such as Arial do not. So this is best used in combination
with @font-face.
Support is somewhat spotty: Firefox, prefixed and IE 10+ afaik.
More exactly,
a) Firefox 15+ with -moz- prefix
b) IE 10+
c) Chrome 21+ and some other WebKit-based browsers with -webkit- prefix.
http://caniuse.com/font-feature
According to CSS Fonts Module Level 3 CR, font-variant is a shorthand so
that font-variant: small-caps sets font-variant-caps to small-caps and
other font-variant−* properties to initial values. This means that
font-variant: small-caps should make a browser use small caps glyphs
when available, and:
“For backwards compatibility with CSS 2.1, if ‘small-caps’ or
‘all-small-caps’ is specified but small-caps glyphs are not available
for a given font, user agents should simulate a small-caps font, for
example by taking a normal font and replacing the glyphs for lowercase
letters with scaled versions of the glyphs for uppercase characters
(replacing the glyphs for both upper and lowercase letters in the case
of ‘all-small-caps’).”
http://www.w3.org/TR/css3-fonts/#font-variant-caps-prop
However, this part of CSS Fonts Module Level 3 seems to remain ignored
by browser vendors. They have focused on implementing the “low-level”
font-feature-settings.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
