Re: [css-d] font-variant:small-caps;
2014-06-13 2:31, Philippe Wittenbergh wrote:
Le 13 juin 2014 à 06:42, Richard Wendrock Forum 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):
* { font-family: Calibri }
A
A
a
a
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/
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
> 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;
On Thu, Jun 12, 2014 at 5:42 PM, 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?
>
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;
Le 13 juin 2014 à 06:42, Richard Wendrock Forum 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/
[css-d] @Font-Face Not Working in IE/FF, What Are Best Practices?
Hello CSS Discuss, I apologize in advance if this is a duplicate, re-sending because I'm not sure it went through the first time. I received a weird auto response with Chinese characters after my first attempt. I'm working on a new responsive(not converted yet) site design: http://e7flux.com/e7flux2014/ and my @font-face fonts aren't showing up in IE or FF or on mobile. They do show in Safari, Chrome & Opera. I'm not sure what's wrong. Also, while on the topic wanted to know what are some best practices, especially for fall back fonts. I am using the standard: "Arial", "Helvetica", "sans-serif" but these fonts don't necessarily have the same proportions as my chosen web fonts, so they would throw the look and feel off of the design if a fallback font would indeed need to be used. TIA for feedback! Elli Vizcaino You Only Pay for Quality Once http://www.e7flux.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 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/
[css-d] @Font-Face Not Working in IE/FF, What Are Best Practices?
Hello CSS Discuss, I'm working on a new responsive(not converted yet) site design: http://e7flux.com/e7flux2014/ and my @font-face fonts aren't showing up in IE or FF or on mobile. They do show in Safari, Chrome & Opera. I'm not sure what's wrong. Also, while on the topic wanted to know what are some best practices, especially for fall back fonts. I am using the standard: "Arial", "Helvetica", "sans-serif" but these fonts don't necessarily have the same proportions as my chosen web fonts, so they would throw the look and feel off of the design if a fallback font would indeed need to be used. TIA for feedback! Elli Vizcaino You Only Pay for Quality Once http://www.e7flux.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/
[css-d] font-variant:small-caps;
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/
