search

registerguard / bulldog

The official 2013 registerguard.com theme.
http://registerguard.com
1 stars 1 forks source link

Audit headline font sizes #209

Closed robertdenton closed 6 years ago

robertdenton commented 6 years ago

Need to look at current font-sizes and how they fit to baseline. I'm afraid I might have busted that at some point since Micky left. This is part of the greater homepage look audit.

TODO

robertdenton commented 6 years ago

Font size goods are in two places. There are some base variables set in var.less but most of it comes from type.less.

var.less

Our base font size is 1em - which on most browsers is 16px.

At first I wasn't sure why we wouldn't set it specifically to 16px to try and control different defaults for different browsers, but I think doing so might negatively impact site accessibility for people/browsers who have trouble reading and manually increase the browser's default font size. We'll leave it as it is.

The base line height is 1.5em (24px).

type.less

This is where it gets tricky. For the purposes of this issue, we're just going to look at headline and deck styles, but there are other font-size concerns in this file.

We open by normalizing all headline and subhed styles to the baseFontSize variable (1em/16px).

From there it goes from h1-h6 and decreases font-size and line-height based on a common equation (more on this later).

Below that, there is a media query to increase the h1 and h2 sizes on large desktops (greater than 1345px). This seems like bad practice to me, and I was the one that added it back in March 2015 upon request from CD. I would like to remove that as part of this ticket.

Back in time

In order to figure out how I might have messed up the baseline, I'm going back through commits that touched var.less and type.less.

var.less has only had four commits and none of them were made by me. That's good, that means I didn't touch the base font size variable.

type.less has 21 commits (11 by me) - bolded are the commits that affect headline sizes.

So, good news, I didn't mess it up nearly as bad as I feared. (The media query is messed up though, see below.)

whew

As long as I roll back the media query and don't mess with the equations we should be doing alright.

While I'm here ...

While I'm here, I've always wanted to know how Micky came up with these funky line heights, I may as well try to figure it out real quick.

I did some quick 2012 line height reading:

Not a whole lot of help, but gives me some context. Going to try and find patterns (not including the media queries that I want to remove).

Table of findings, see spreadsheet here.

hed em px line-height equation
h1 2.875 46 1.043478261 (((3 / 2.875) = 1.043478261) * 1)
h2 2.5 40 1.05 (((3 / 2.5) = 1.2) * .875)
h3 2.125 34 1.058823529 (((3 / 2.125em) = 1.41176470588235) * .75)
h4 1.75 28 1.071428571 (((3 / 1.75em) = 1.71428571428571) * .625)
h5 1.375 22 1.090909091 (((3 / 1.375em) = 2.181818182) * .5)
h6 1.125 18 1.166666667 (((1.5 / 1.125) = 1.33333333333333) * .875)

Long story short, h1-h5 have a 6px difference and drop equation coefficient .125 (1-.5) to find line height.

On h6, it only drops 4px (I'm guessing to keep it greater than 16px), and bumps the coefficient to .875 (probably to continue the airing out trend of the line-height).

It kind of bugs me that h6 doesn't just drop down to 16px. It could be the same size, but styled differently. This might be something to think about.

Media query

If we wanted to keep the media query, with the h1 and h2 bumped up one size (I do not think we should) it should look more like this:

hed em px line-height equation
h1 3.25 52 1.0384615385 (((3 / 3.25) = 1.043478261) * 1.125)
h2 2.875 46 1.043478261 (((3 / 2.875) = 1.043478261) * 1)
robertdenton commented 6 years ago

Now, the next question is: Can we tighten up these headlines by only jumping 4px instead of 6px? What was the thought process behind 6 and does that screw up the baseline grid? It seems to me that 4px jumps would fit the grid better because that's .25 of 1em (16px) instead of .375 of 1em.

Here's what that math might look like:

hed em px line-height equation
h1 2.25 36 0.8888888889 (((2 / 2.25) = 1.333333333) * 1)
h2 2 32 0.875 (((2 / 2) = 1.5) * .875)
h3 1.75 28 0.8571428571 (((2 / 1.75em) = 1.714285714) * .75)
h4 1.5 24 0.8333333333 (((2 / 1.5em) = 2) * .625)
h5 1.25 20 0.8 (((2 / 1.25em) = 2.4) * .5)
h6 1 16 0.75 (((2/ 1) = 3) * .875)

Numbers sure are a lot cleaner ... Let's see how it looks ... First image has 6px jumps, the second has 4px.

6px 4px

It's definitely tighter horizontally, but I'm not sure the large heads have enough weight for story pages. I do like having the smaller 16px headline size. Another thing is that the vertical space is a bit much. If we were to use this, we should use a base of 2 to divide. This was updated on the second go.

Let's try 8px jumps starting at 16 with a base of 4 to divide.

hed em px line-height equation
h1 3.5 56 1.142857143 (((4 / 2.25) = 1.333333333) * 1)
h2 3 48 1.166666667 (((4 / 2) = 1.5) * .875)
h3 2.5 40 1.2 (((4 / 1.75em) = 1.714285714) * .75)
h4 2 32 1.25 (((4 / 1.5em) = 2) * .625)
h5 1.5 24 1.333333333 (((4 / 1.25em) = 2.4) * .5)
h6 1 16 1.5 (((4/ 1) = 3) * .875)

8, 6, 4

8 6 4

As I should have expected, the 6px really is a nice middle ground. Maybe just drop h6 down to 1em and call it good? Where do we use h6?

Those subheads are valuable. Maybe we add a .h7 .sh7 classes that are at 1em? That's possible right?

hed em px line-height equation
h1 2.875 46 1.043478261 (((3 / 2.875) = 1.043478261) * 1)
h2 2.5 40 1.05 (((3 / 2.5) = 1.2) * .875)
h3 2.125 34 1.058823529 (((3 / 2.125em) = 1.41176470588235) * .75)
h4 1.75 28 1.071428571 (((3 / 1.75em) = 1.71428571428571) * .625)
h5 1.375 22 1.090909091 (((3 / 1.375em) = 2.181818182) * .5)
h6 1.125 18 1.166666667 (((1.5 / 1.125) = 1.33333333333333) * .875)
h7 1 16 1.125 (((1.5 / 1) = 1.5) * .75)

On second thought, why do we need a 1em hed anyway. That's super small.

After all this, my recommendation is to keep everything mostly the way it is, minus the three TODO items at the top.

robertdenton commented 6 years ago

For the sake of complete documentation, this is the size difference between the h1/h2 media queries and how they should look. There's not much of a vertical difference, but it is much wider.

Again, these changes were made by me, when I was ignorant of the overall system. These need to be rolled back. If we want to do media query size changes, we should bump everything 2px or 4px or something that makes sense.

mediaquery