

Set text on the web to a baseline grid with Sass and rems - kjannis
https://sassline.com/

======
mosburger
I feel like I don't understand enough about typography to grok what this is
all about. It'd be nice to see really basic primer on the site about what a
baseline is and why it's a good thing. Looking at his site and blog, I can
sorta "tell" that the typography feels nice. But what exactly is this library
actually doing? I'm a software developer who isn't terribly good at front-end
stuff or design and I feel like I'm missing out. :)

~~~
pdkl95
"Vertical Rhythm" => keeping ALL text aligned vertically, regardless of where
it is on the page or the element type. All text is anchored to integer
multiples of a basic vertical distance unit, which (If I remember correctly)
is the distance between the baselines of the smallest font-size that to be
used.

"baseline" => The line the text 'sits' on, which defines the "origin" of the
letters vertically. (at least in the greater Latin-based family of languages).
The lowercase letters generally span the distance (of one "x-height" or "ex"
in CSS) between the "baseline" and the "median". Some letters (including most
capitals) extend higher to a hight higher than the median, and some letters
have "descenders" that extend below the baseline. The point is that the
baseline is the fixed point of reference we use when drawing the letters (i.e.
cursive handwriting, which usually returns to the baseline between letter.

The idea of using these concepts in page layout is based on the idea that the
pattern-matching our brain does to parse our vision is always trying to find
signal _everywhere_. Therefor, if we help it a bit by putting _EVERYTHING_ \-
as measured from the anchors the brain uses - into a simple pattern, it will
be recognized faster. To accomplish this you have make it so interval between
the baselines of the normal body-text _continues_ (perhaps as a multiple of
that interval) into the h[1-6], li, custom divs, everything. You should be
able to lay hypothetical ruled paper over the page and have _all_ the text sit
nicely on the paper's lines.

This is kind of hard to do in CSS, as you have use the line-
height/margin/padding/border to fill the remainder of the baseline interval
height and the current tag's font size. It can get _really_ messy if you have
a lot of different tag-to-tag situations or strange margins. There are tools
(e.g. SASS/SCSS libraries) to assist, but you really have to include this idea
from the beginning of the project or face the possibility of needing "minor
corrections" everywhere.

I doubt there is much of a measurable benefit from these techniques - it's not
going to make everybody read your pages twice as fast. On the other hand, I
would agree with you that it can kind look really nice. Just paying attention
to typography and layout _at all_ can make all the difference between a
readable page and a noisy mess.

A few pages that describe this in further detail:

[http://24ways.org/2006/compose-to-a-vertical-
rhythm](http://24ways.org/2006/compose-to-a-vertical-rhythm)

[http://alistapart.com/article/settingtypeontheweb](http://alistapart.com/article/settingtypeontheweb)

[https://medium.com/written-in-code/aligning-type-to-
baseline...](https://medium.com/written-in-code/aligning-type-to-baseline-the-
right-way-using-sass-e258fce47a9b)

------
espadrine
The page is not very in-depth and the link to a promised blog post does not go
to a blog post. Is there something missing?

~~~
LukeB_UK
The blog post is here:
[https://jakegiltsoff.co.uk/posts/sassline-v2-0](https://jakegiltsoff.co.uk/posts/sassline-v2-0)

Seems the author has a bad redirect mechanism when he redirects from HTTP to
HTTPS.

