Set text on the web to a baseline grid with Sass and rems | Hacker News Reader

Set text on the web to a baseline grid with Sass and rems

sassline.com

28 pointskjannis4 comments

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. :)

"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://alistapart.com/article/settingtypeontheweb

https://medium.com/written-in-code/aligning-type-to-baseline...

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?

The blog post is here: https://jakegiltsoff.co.uk/posts/sassline-v2-0

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

Reply on news.ycombinator.com