[Pro] line spacing in html type

for some reason I never get any e-mails from Freeway talk even though I have the “ping me” box checked. Any tips on that?

Have you checked your Junk mail?

D


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

I’m trying to change the leading of the Google font I’m using, Merriweather Sans, to 120%. Although it looks correct on my screen in Freeway, when I preview in the browser the leading seems to go to some kind of default, which is a little tighter than I would like. I followed the freeway tutorials to use the font on my site, setting up styles, and now I’m trying to figure out how to solve this problem. Do you have any idea what I could be doing wrong?

Link to the page here:

I would really appreciate any advice you might have. I’m just learning, so apologies if things look a mess to expert eyes.

Thanks,
Kate


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Oops, I mean Merriweather, not Merriweather Sans.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Your example uses Merriweather at 130% - I think you could go slightly bigger yet.

My2c

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Although it looks correct on my screen in Freeway, when I preview in the browser the leading seems to go to some kind of default, which is a little tighter than I would like.

Freeway’s construction view is not always accurate, especially with things like line-height. So, basically, disregard what Freeway shows when it’s in conflict with what a real web browser displays. If the leading looks to tight in the browser, add more, and don’t worry about how it looks in Freeway.

As someone who uses Freeway in ways that it was not meant to be used, I’d need a wig if I attempted to make Freeway’s construction view match the output. :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi David, yes, but I am having a problem with changing the leading. My style sheet is set up to 130%, and this is how it displays in Freeway, but when I preview or upload to the browser the type reverts to what you see in the link (which I think is not 130%, in fact - it’s certainly not the same as what I’m seeing in page view). Something seems to be overriding my style sheet and I don’t know what it could be. Do all the heading styles have to be set to 130%? The em (italic)? Or is it something I’m not understanding about the google font…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Caleb, thanks, but see my reply to Dave, I don’t seem to be able to change the leading at all, and I don’t understand why. Up till now I’ve always used graphic text for my site, this is the first time I’ve tried using Google fonts so I’m on a learning curve but it’s so frustrating when I hit these bumps and I don’t know how to get past them. Am so grateful for any advice.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Kate,

Actually, from looking at the code on the page, it is set to 130%. Here’s what Safari’s web inspector shows:

See where it says:

line-height: 1.3

1.3 is equal to 130%. If it were being overridden, it would be crossed out with a gray line. Also, as I’ve worked with Merriweather quite a bit (it’s one of my more favorite fonts), it looks right to me. Merriweather has a very high x-height and doesn’t have as much leading built-in as many other fonts do. Try changing the leading to 150% and see if that’s more to your liking.

Like I said earlier:

Freeway’s construction view is not always accurate, especially with things like line-height. So, basically, disregard what Freeway shows when it’s in conflict with what a real web browser displays. If the leading looks too tight in the browser, add more, and don’t worry about how it looks in Freeway.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

My style sheet is set up to 130%, and this is how it displays in Freeway, but when I preview or upload to the browser the type reverts to what you see in the link (which I think is not 130%, in fact

I am looking at your page code and it is telling me it is set to 130% and there doesn’t appear to be any other settings any different.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Oh I see – Caleb you’re right. Sorry, can’t believe it was that simple. I tied myself in knots thinking it was something weirdly complicated and never thought just to experiment with adding more leading. I’m a print designer, so working in percentages with type seems a bit strange to me. And now you’ve taught me 1.3 equals 130%, which I wouldn’t have known looking at the code, though now you’ve said it, it seems obvious. Thank you, it was so kind of you to help.

Dave, you’re right of course. Thanks for taking the time to look at it.

I revised the page, now it’s at 150, though I wonder if it could go 160 even. Anyway I shall experiment. Thanks and best,
Kate


freewaytalk mailing list
email@hidden
Update your subscriptions at:

oops, meant to send the link

K


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Glad to hear that I was of help! The website looks lovely - web fonts look much better on my rMBP than graphic fonts. Google will appreciate it as well. :slight_smile:

BTW, in the code screenshot I posted above, notice how there is a red line through the font-weight setting? That is because there is two semicolons, when there should only be one. You should go to the extended styles, and remove the semicolon that you entered. Freeway automatically adds one (which is why there is two).


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Mmn… the more I type the more I worry you’ll think I’m an idiot, but I don’t think I have anything in my extended styles. That’s the bit you go to from the edit styles menu, right? So when I look there it’s just blank.

It’s a miracle anything works at all, really. Anyway now you’ve helped me fix the leading my next job is to change all the other pages to match which will keep me busy for a while. And maybe in the course of doing that I’ll discover how to remove my extra semi-colons.

Thanks for your nice comment about the site; I get very frustrated with my own lack of abilities in web design. I recently tried out moving to a Squarespace template which all looked very slick, but after a while I found I was missing all the idiosyncrasies of my own very imperfect design, so I’ve gone back to it, but this time with a new determination to learn to do it better. Hence the Google fonts :slight_smile:

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Kate,
Apologies for jumping in here but check under Edit > Font Sets and see if the row for Merriweather under ‘Alternative Fonts’ has your font-weight declaration in it.

It could look like this;
‘Merriweather’, Georgia, serif; font-weight: 400;

Personally I tend to put the font-weight declaration in the styles dialog as I find it more logical a location and more versatile but I’ve seen it put here before by other Freeway users.

If it is there then simply remove the last semi-colon and OK out of the font sets dialog box. If it isn’t there then maybe you could save an archive (File > Save Archive) of the file (this will strip out any FTP information contained with the document that you really shouldn’t be sharing) and post the file online for some of us to take a closer look at?
Regards,
Tim.

On 13 Oct 2015, at 21:59, Kate Slotover email@hidden wrote:

Mmn… the more I type the more I worry you’ll think I’m an idiot, but I don’t think I have anything in my extended styles. That’s the bit you go to from the edit styles menu, right? So when I look there it’s just blank.


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

… and apologize that I rush in here, too. Everything is said and pointed out, so sending you to this isn’t necessary (even redundant), but perhaps of fun:

http://www.kimmich-digitalmedia.com/videos/015_the-coding-episodes-part8-google-webfonts

Especially Tim’s points are mentioned there as well (as far as I remember).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Tim, thank you. The code was there, just as you said. I had looked at the semicolon there and wondered, but wasn’t sure if that was the place to delete it.

And Thomas, thank you. I had actually watched a couple of your videos before, but not that one, which obviously was the one I needed.

I put the code there because I followed the instructions here, where they say to include the semicolon, so it is a bit confusing…

Anyway I’ll get on and delete it now. Could this be why when I tried to use the italic weight of Merriweather (400 italic) it didn’t work? I ended up just using the em style to force the italic where I wanted it.

Once again thanks everyone, I really appreciate your kind help.

Kate


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks for the clarification Kate.

Unfortunately that knowledge base article is incorrect and the attached sample file is also broken;

If you want to add the font-weight to the end of the font set entry (as Softpress suggest) then make sure that there is no semi-colon at the end of the line;
‘Open Sans’, Helvetica, sans-serif; font-weight:300

Keeping the semi-colon will (as Caleb pointed out) invalidate the code and the browser will almost certainly display the incorrect font weight for the style.

If you download the example Freeway file and look at the font sets for Open Sans you’ll see the following entry (here for the light version);
‘Open Sans’, Helvetica; sans-serif; font-weight:300;

That semi-colon after Helvetica should be a comma;
‘Open Sans’, Helvetica, sans-serif; font-weight:300;

The only other thing that seems bizarre about that article is that it suggests making the screen font for each Open Sans style Helvetica and then goes on to say that you’ll need to preview the page to see the correct fonts in their correct font weights. Personally I’d always advocate downloading the fonts from Google and installing them on your Mac. This does require Freeway to be restarted but you can at least define the exact screen font for the font set and see the text correctly styled within Freeway.

—Side note—

Personally I try and keep font weights out of the font sets dialog and set them up in the individual styles themselves. This will cut the amount of code Freeway creates for each font variant as it doesn’t need to redefine the fonts for each style but does mean that the various weights will all show up as the same screen font in the application.

—Side note—

Regards,
Tim.

On 14 Oct 2015, at 10:00, Kate Slotover email@hidden wrote:

I put the code there because I followed the instructions here, where they say to include the semicolon, so it is a bit confusing…


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Personally I’d always advocate downloading the fonts from Google and installing them on your Mac.

I am from the other camp - if you have the font on your Mac then you will always see the correct font no matter whether you have input the style code correctly or not.

Leave the screen font in FW as a default (Helvetica in this case) then you will know for sure that it works when it displays in your correct font.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks Tim. I think I understand.
When you say

That semi-colon after Helvetica should be a comma; ‘Open Sans’, Helvetica, sans-serif; font-weight:300;

you would take the semi-colon out there, too, right? At the end? If it’s in the font set entry…

By the way, I was wondering how you upload a screengrab here – it’s a useful trick.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Kate,
Yes. Apologies for not emphasising that. I was concentrating on the comma issue.

To share an image on the FreewayTalk web site (it will show up as a link in emails) you’ll have to put the image somewhere on a public server (I tend to use DropBox)

For example this screen shot;
![Font set corrections](https://dl.dropboxusercontent.com/u/795566/screenshots/font-sets.jpg https://dl.dropboxusercontent.com/u/795566/screenshots/font-sets.jpg)

was created with this code;

![Font set corrections](https://dl.dropboxusercontent.com/u/795566/screenshots/font-sets.jpg <https://dl.dropboxusercontent.com/u/795566/screenshots/font-sets.jpg>)

Regards,
Tim.

On 15 Oct 2015, at 10:32, Kate Slotover email@hidden wrote:

Thanks Tim. I think I understand.
When you say

That semi-colon after Helvetica should be a comma; ‘Open Sans’, Helvetica, sans-serif; font-weight:300;

you would take the semi-colon out there, too, right? At the end? If it’s in the font set entry…

By the way, I was wondering how you upload a screengrab here – it’s a useful trick.


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options