search

shalanah / baseline

New method for creating leading on the web
http://shalanah.github.io/baseline
34 stars 1 forks source link

Article that explains how it works #4

Closed d4h0 closed 2 years ago

d4h0 commented 4 years ago

This is awesome! :)

Did you end up writing the article that explains how it works?

Alan Stearns' article that you link to at the end of https://shalanah.github.io/baseline/ is not readable (there are some problems with the page).

shalanah commented 4 years ago

Hey @d4h0 ! Glad you find this cool, thanks for the heads-up on the broken link. I'll try to find something comparable.

I still haven't done an article on it yet! But I have given a couple of talks on it. Here's a link to my slides: https://docs.google.com/presentation/d/1Vk0OnUSUkvvBIiQdzJVvtHMCjGAWYWwf6r5c2N0_33g/edit?usp=sharing

Hopefully I'll find that time to write it all up!

d4h0 commented 4 years ago

Thanks, @shalanah!

I have a question regarding "Challange #2 – First line placement":

That's only relevant if I want to port a design from Photoshop, right?

So, if I only care about vertical rhythm, then I can ignore this part of the presentation, correct?

If you write the article, it would be great, if you could explain exactly what the benefits of baseline grids are.

I have read many articles about vertical rhythm and baseline grids, but I still don't understand the benefits good enough to explain them.

As far as I understand, the benefits are that designers and developers speak the same language and that it's easier to control the vertical rhythm.

Without a baseline grid (with vertical rhythm based on line-height), if I have a two-column design and – on the same grid line, but in different columns – I have two different fonts (or the same font in a different size), then the baselines of the two text lines are not on the same visual line – is that correct?

Btw. I will package your font as NodeJS package so it's easier for NodeJS programmers to use it (I'll try to add the font to this project). That's okay with you, right?

If it makes sense (not sure yet) and I'm able, I'll also publish a package that will help with the implementation of the baseline grid (probably only for ReactJS or a CSS-in-JS framework).

d4h0 commented 4 years ago

I found this answer/sniped from you on StackOverflow.

If I run the sniped, for some reason, the text of the second 'article' element is not on the baseline grid.

Do you know why?

shalanah commented 2 years ago

Wow! I'm sorry I'm so late to the game here @d4h0 ! I didn't see this till now. Sorry to leave you hanging. You may use the font for whatever purpose :) . I also just released a talk on youtube (that I hurriedly recorded a while ago but just finally decide to release!) and a working codepen that you can see in the Readme of this repo. Hope that helps!

shalanah commented 2 years ago

I haven't written an article but have a youtube talk that can be watched so closing for now!

d4h0 commented 2 years ago

Thanks for your response, @shalanah! :)

I'm looking forward to watching you presentation! :)