Re: [css-d] Google font use

[Tom Livingston]

On Thu, Mar 27, 2014 at 12:34 PM, Tom Livingston  wrote:

>
> I was doing this simple test with google fonts (via @import method).
>
> body{
> font-family: $roboto;
> }
>
> .bold{
> font-weight: 500;
> }
>
> Hi there bolded text
> I'm bold
>
> The strong tag above was rendering wrong in FF and Chrome. FF was
> 'double-bolding' the text, and Chrome showed odd char spacing.
>
> Am I implementing something wrong, or do I need to write rules like
> strong{font-weight:500;font-style:normal;} to have this work right?
>
> Thanks in advance.
>


So looks like so far my b,strong{font-weight:500;} rule solves the main
issue and even for cases like:

Some text that has bold italic text

Google seems to get the italic version of the 500-weight font correct, as I
am including the corresponding italic face for each weight, I just still
need b,strong{font-weight:500;} to avoid double-bolding.

Thanks again all


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use

[Tom Livingston]

On Thu, Mar 27, 2014 at 2:44 PM, Jukka K. Korpela wrote:

> 2014-03-27 18:34, Tom Livingston wrote:
>
>  I was doing this simple test with google fonts (via @import method).
>>
>> body{
>>  font-family: $roboto;
>> }
>>
>> .bold{
>>  font-weight: 500;
>> }
>>
>
> I suppose you are using some special tools that convert that $roboto to a
> real name. But how do you refer to the font? If you use Roboto as hosted by
> Google and you use normal weight and 500 weight, you need, as Google
> instructions say,
>
>  rel='stylesheet'>



Yes, $roboto is a sass variable. And my @import from google is similar to
your example.



>
>
>  Hi there bolded text
>> I'm bold
>>
>
> The  element causes font-weight: bold, i.e. font-weight: 700, by
> default. So you should either change that setting or include 700 into the
> href attribute.
>
>
>  The strong tag above was rendering wrong in FF and Chrome. FF was
>> 'double-bolding' the text, and Chrome showed odd char spacing.
>>
>
> When settings ask for bold and the font in use has no bold typeface
> (loaded), browsers may apply algorithmic (synthetic) bolding. The results
> vary by browser and are generally typographically poorer than real bold
> typeface.
>
>
>  Am I implementing something wrong, or do I need to write rules like
>> strong{font-weight:500;font-style:normal;} to have this work right?
>>
>
> If you want  to appear in weight 500, then you need
>
> strong { font-weight:500; }
>
> There is no reason to set font-style on it, since font-style: normal is
> the default. (Theoretically, some browser could have a different default.
> Then there's probably some very good reason to that, and authors should not
> interfere.)
>

OK, so I'm not (completely) crazy. I've used a few different font sources
and just wanted to confirm that a rule like strong{font-weight: 500;} is
needed in Google's case.



>
> Yucca
>
>
>

Thanks all.

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use

[Tom Livingston]

On Thu, Mar 27, 2014 at 3:25 PM, Eric  wrote:

> Yes, I realize that. I was just checking to see if a different CSS approach
> might be used.
>
> > On March 27, 2014 at 2:53 PM Philip Taylor  wrote:
> >
> >
> >
> >
> > Eric wrote:
> >
> > > You're not using the strong tag for styling are you?
> >
> > I very much suspect that the browser neither knows nor cares
> > why any particular tag has been used, Eric; it almost certainly
> > renders the tagged element identically, regardless of the
> > motivation for the tag's use.
> >
> > Philip Taylor
>

I'm using  in place of  if that's what you mean.


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use

[Eric]

This (small font families...few included weights) and the fact that the bulk of
the Yahoo Fonts are not the highest quality is the reason I moved to Typekit.
Personally I'll do anything to avoid a UA's faux bold and italic rendering.

If you need to use Google Fonts there are a couple of good articles that add to
the topic"

On Smashing

and
ALA 

An interesting article on efficient use of web fonts
"Web Fonts and the Critical Path"


Hope this helps a git,
Eric


> On March 27, 2014 at 3:23 PM David Hucklesby  wrote:
>
>
> On 3/27/14, 9:34 AM, Tom Livingston wrote:
> > I was doing this simple test with google fonts (via @import method).
> >
> > body{
> > font-family: $roboto;
> > }
> >
> > .bold{
> > font-weight: 500;
> > }
> >
> > Hi there bolded text
> > I'm bold
> >
> > The strong tag above was rendering wrong in FF and Chrome. FF was
> > 'double-bolding' the text, and Chrome showed odd char spacing.
> >
> [...]
>
> Does this address your problem? -
>
> 
>
> --
> 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-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] Google font use

[Eric]

Yes, I realize that. I was just checking to see if a different CSS approach
might be used.

> On March 27, 2014 at 2:53 PM Philip Taylor  wrote:
>
>
>
>
> Eric wrote:
>
> > You're not using the strong tag for styling are you?
>
> I very much suspect that the browser neither knows nor cares
> why any particular tag has been used, Eric; it almost certainly
> renders the tagged element identically, regardless of the
> motivation for the tag's use.
>
> Philip Taylor
> __
> 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] Google font use

[David Hucklesby]

On 3/27/14, 9:34 AM, Tom Livingston wrote:

I was doing this simple test with google fonts (via @import method).

body{
 font-family: $roboto;
}

.bold{
 font-weight: 500;
}

Hi there bolded text
I'm bold

The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.


[...]

Does this address your problem? -

 

--
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] Google font use

[Philip Taylor]

Eric wrote:


You're not using the strong tag for styling are you?


I very much suspect that the browser neither knows nor cares
why any particular tag has been used, Eric; it almost certainly
renders the tagged element identically, regardless of the
motivation for the tag's use.

Philip Taylor
__
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] Google font use

[Jukka K. Korpela]

2014-03-27 18:34, Tom Livingston wrote:


I was doing this simple test with google fonts (via @import method).

body{
 font-family: $roboto;
}

.bold{
 font-weight: 500;
}


I suppose you are using some special tools that convert that $roboto to 
a real name. But how do you refer to the font? If you use Roboto as 
hosted by Google and you use normal weight and 500 weight, you need, as 
Google instructions say,


rel='stylesheet'>



Hi there bolded text
I'm bold


The  element causes font-weight: bold, i.e. font-weight: 700, by 
default. So you should either change that setting or include 700 into 
the href attribute.



The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.


When settings ask for bold and the font in use has no bold typeface 
(loaded), browsers may apply algorithmic (synthetic) bolding. The 
results vary by browser and are generally typographically poorer than 
real bold typeface.



Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?


If you want  to appear in weight 500, then you need

strong { font-weight:500; }

There is no reason to set font-style on it, since font-style: normal is 
the default. (Theoretically, some browser could have a different 
default. Then there's probably some very good reason to that, and 
authors should not interfere.)


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] Google font use

[Eric]

Tom,

You're not using the strong tag for styling are you?

> On March 27, 2014 at 12:34 PM Tom Livingston  wrote:
>
>
> I was doing this simple test with google fonts (via @import method).
>
> body{
> font-family: $roboto;
> }
>
> .bold{
> font-weight: 500;
> }
>
> Hi there bolded text
> I'm bold
>
> The strong tag above was rendering wrong in FF and Chrome. FF was
> 'double-bolding' the text, and Chrome showed odd char spacing.
>
> Am I implementing something wrong, or do I need to write rules like
> strong{font-weight:500;font-style:normal;} to have this work right?
>
> Thanks in advance.
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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-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] Google font use

[Tom Livingston]

>
> Thanks Isabel. All i can say is I'm glad it isn't a case of me just being
> tick-headed. It's not just me.
>
>
>
Er, I mean thick-headed.

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use

[Tom Livingston]

On Thu, Mar 27, 2014 at 2:04 PM, Isabel Santos  wrote:

> Hi Tom,
>
> font-weight:500 means semi-bold, default for  is bold, so I gess
> you need to add that extra rule
> strong {
> font-weight: 500;
> }
> you can take a look at:
>
> http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
> and
> http://css-tricks.com/watch-your-font-weight/
>
> hope it helps
>
> isabel
>
>

Thanks Isabel. All i can say is I'm glad it isn't a case of me just being
tick-headed. It's not just me.

I'll see if I can't come up with some sass for this...

Thanks

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use

[Isabel Santos]

Hi Tom,

font-weight:500 means semi-bold, default for  is bold, so I gess
you need to add that extra rule
strong {
font-weight: 500;
}
you can take a look at:

http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
and
http://css-tricks.com/watch-your-font-weight/

hope it helps

isabel



On Thu, Mar 27, 2014 at 4:34 PM, Tom Livingston  wrote:

> I was doing this simple test with google fonts (via @import method).
>
> body{
> font-family: $roboto;
> }
>
> .bold{
> font-weight: 500;
> }
>
> Hi there bolded text
> I'm bold
>
> The strong tag above was rendering wrong in FF and Chrome. FF was
> 'double-bolding' the text, and Chrome showed odd char spacing.
>
> Am I implementing something wrong, or do I need to write rules like
> strong{font-weight:500;font-style:normal;} to have this work right?
>
> Thanks in advance.
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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-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/