Font-families

[Melindrea]

Hey,

This is looking mighty fine, but I'm curious on the rationale behind not making the font-family adjustable? I mean, it's easy enough for me to just go with adding the font-family in html in my own sheets, but why allow to adjust if the base family is serif or sans-serif, but not allow to set the base family to whatever font you're using?

Keep up the good work, I'm mainly interested in hearing the why's behind that.

[grayghostvisuals]

Right now Typeplate compiles to this. Of course I'm up for suggestions to make it better.

html {
  font: normal 112.5%/1.65 serif; /* the serif value depends on the boolean passed */
}

Deciding the serif vs. sans-serif is there for a fallback. Most authors are gonna change to a custom font anyway so in this case the OS can choose the best displaying font for either cases. Macs will get awesome Helvetica by default. On PC's, even if they have Helvetica it can look worse than Arial for whatever reason, so this way they get Arial by default. And you're still covered by the generic keyword. Shorter, easier, yay.

[Melindrea]

IE, your expectation is that I in my own scaffolding file redeclare the font-family?

I think I was expecting the !default flag on those too, so that it gets declared immediately in your html, though either way works for me!

[grayghostvisuals]

So you want something like this?

$font-face: "custom font family goes here";

$font-family: $font-face serif !default;
$font-family-sans: $font-face sans-serif !default;

[Melindrea]

Yeah, pretty much. Or just $font-family: serif !default;, though I can buy the argument to have a sensible default as the final in the list.

[grayghostvisuals]

I'm a bit confused. We already have this $font-family: serif !default;

though I can buy the argument to have a sensible default as the final in the list.

What do you mean by that? Sorry if I'm slow.

[Melindrea]

...I'm also very confused. Where?

On line 41-42 of https://github.com/typeplate/typeplate.github.io/blob/master/typeplate/scss/_typeplate.scss#L41 I see the declaration of $font-family as the following:

$font-family: serif;
$font-family-sans: sans-serif;

I just updated to the latest version, using bower.

[grayghostvisuals]

LOL! ha. Yeah so I guess we only have it on the boolean

$serif-boolean: true !default;

[Melindrea]

=) So, is that something you can fix, and/or want me to give you a PR on?

[grayghostvisuals]

It doesn't really make sense to have

$font-family: serif !default;
$font-family-sans: sans-serif !default;

because we're controlling it with the boolean.

$serif-boolean: false; // overrides !default

$font-family: serif;
$font-family-sans: sans-serif;
$serif-boolean: true !default;

We need to rewrite the logic in some way and really figure out what we're actually after here.

[Melindrea]

Well, what did you have in mind when you wrote it that way?

And huh, that's an interesting way you've declared the font-face on the site (I was examining it to figure out how you solved the issue I was running into). Is that something from typekit, or...?

[grayghostvisuals]

Well, what did you have in mind when you wrote it that way?

My idea was to allow authors control the serif/sans-serif fallbacks with the boolean.

And huh, that's an interesting way you've declared the font-face on the site (I was examining it to figure out how you solved the issue I was running into). Is that something from typekit, or...?

yeah I dont know how the 'serif' part got into the body font declaration on the site. I'll definitely remove that just so we have the Typekit font declaration.

[Melindrea]

So, we have typeplate compiling down into the font: normal 112%/1.65 serif; on HTML, and then the author would set either before or after:

html {
    font-family: MyCustomFont;
}

[grayghostvisuals]

Yup exactly. We would have this...

html {
    font: normal 112%/1.65 serif;
}

html {
    font-family: MyCustomFont;
}

or

html {
    font: normal 112%/1.65 serif;
}

body {
    font-family: MyCustomFont;
}

[Melindrea]

Then my final comment on it will be that you may want to document that somewhere to stop more issues being brought up, since I doubt I'll be the last person wondering about it =)

Once again, very nice job. This is likely to be my go-to alongside Normalizer for starting any project. I credited you on my site as well.

[grayghostvisuals]

👍 will do. Which site of yours are you using it on? This one? http://mariehogebrandt.se/

I looked at the style sheets and you still have the comments in your CSS due to not removing them from your compiling of Sass.

/* line 404, ../../app/components/typeplate/scss/_typeplate.scss */
pre code {
  word-wrap: normal;
}

If you're using Compass along Sass just set this line to false in your config.rb

# Enable or disable line comments
line_comments = false