Google Font italic changing line spacing

I’m using Merriweather Google Font on my site.

This page Advocate ethical design agency | Making a difference since 2003 has italic text in the heading “verb:”. The line spacing is as it should be at the moment with ‘forced’ or ‘slanted’ italic. But if I use the the proper Merriweather Italic font the second line of the heading moves down a few pixels.

I presume this is an issue with the design of Merriweather Italic (400 weight)?

Bit of a pain.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your google link is malformed, and should be

 <link href='

http://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic
rel=‘stylesheet’ type=‘text/css’>

On Monday, May 27, 2013, Mark email@hidden wrote:

I’m using Merriweather Google Font on my site.

This page Advocate ethical design agency | Amplifying positive impact since 2003 has italic text in
the heading “verb:”. The line spacing is as it should be at the moment with
‘forced’ or ‘slanted’ italic. But if I use the the proper Merriweather
Italic font the second line of the heading moves down a few pixels.

I presume this is an issue with the design of Merriweather Italic (400
weight)?

Bit of a pain.

Mark

Advocate ethical design agency | Amplifying positive impact since 2003


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Earnie

If you have a look at this test page: http://www.advocatedesign.co.uk/untitled1.html

you can see that using Merriweather 400 italic nudges the second line down a couple of pixels. (this difference is quite noticable when clicking through the pages on my websites).

I’ve downloaded the font and tried it in InDesign where it works fine.

I guess there is something wrong with the ‘online’ typeface?

Cheers

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Any one else noticed that italic Google Fonts visually increase the line spacing? Or maybe this is a problem with Merriweather font?

see http://www.advocatedesign.co.uk/untitled1.html
this now more clearly shows the issue

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just don’t see the issue you are describing…


Ernie Simpson

On Tue, May 28, 2013 at 7:17 AM, Mark email@hidden wrote:

Any one else noticed that italic Google Fonts visually increase the line
spacing? Or maybe this is a problem with Merriweather font?

see http://www.advocatedesign.co.uk/untitled1.html
this now more clearly shows the issue

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re right it wasn’t very clear. I’ve made it a lot clearer now. Top example: the text bottom has a border bottom. Bottom example: the second line is underlined.

The italic is ‘changing’ the line spacing…

When flicking through my site this (slight) difference is noticable and jarring.

Any thoughts. I’ve emailed the type design…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think I see what you’re on about now – the line at the bottom of the
left div is about a pixel lower that the right – the browser is actually
requiring more vertical space to display it.

If you set the line-height of the style to 1 pixel less than the text
it resides in, then they match height.


Ernie Simpson

On Tue, May 28, 2013 at 9:10 AM, Mark email@hidden wrote:

You’re right it wasn’t very clear. I’ve made it a lot clearer now. Top
example: the text bottom has a border bottom. Bottom example: the second
line is underlined.

The italic is ‘changing’ the line spacing…

When flicking through my site this (slight) difference is noticable and
jarring.

Any thoughts. I’ve emailed the type design…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie

I’ll do that. Bit of a pain though. I guess there is something wrong with the way the font has been crafted.

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I imagine that you have different line-heights for different text tags. The
easiest way I can see to code this is to note the line heights used, then
in Freeway Pro create custom Tag styles to target them, like “p em” and “h1
em” – you would still only apply the regular “em” style in your document,
but those targeted styles would sense the context in which the em is being
used and fix it in the browser rendering.


Ernie Simpson

On Tue, May 28, 2013 at 9:32 AM, Mark email@hidden wrote:

Hi Ernie

I’ll do that. Bit of a pain though. I guess there is something wrong with
the way the font has been crafted.

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options