Game for learning Web Typography: The Equilateral Triangle

The author has written an explanation that is worth reading before starting the game: https://css-tricks.com/equilateral-triangle-perfect-paragrap...

To be honest this game is a bit of a mess. Normally you would pick a font size or line length, and find a fitting lineheight last. Here we are for example guessing line length based on a given line spacing. But, still useful to drive the point home there is some relation.

This is neat. I think it would be more helpful as a learning tool if it showed the difference between user input and the goal. The triangle indicator communicates what you should have done differently, but it doesn't help to visualize what that would look like.

(a) The "equilateral" triangles on the intro page aren't. (b) It goes downhill from there; the basic point being made is sound, but it's quite misleading to consider a single paragraph in isolation, rather than a full column of text. The right judgements for one are not the right choices for the other.

I just totally disagree :)

I like huge line heights and short line widths.

In my browser I even force p{max-width: 60ch;} on all sites

Adapting to his style or typography bias, you just need to make sure that you can fit a line (cap height) between two lines and you'll get a good result.

For my taste the line height is too low, rather than cap height I'd focus on the EM box as minimum (The space the type designer has given each character).

Problem for me as a developer in reading about these things, is that I often end up in arguments with designers who have not read about these things, and they refuse to consider such input.

i see some bias there about line-width being like in news-paper column/s - or a narrow blog-like middle column (so there is more space for ads?). Which.. just isn't so.

The game should imho show the answer by showing the actual formatted text.

The standard scored against was mostly good, although his preferred column width was pretty arbitrary, and the best line-height can depend on the context of a piece of text and its use.