
Game for learning Web Typography: The Equilateral Triangle - mrccc
https://betterwebtype.com/triangle
======
pitdicker
The author has written an explanation that is worth reading before starting
the game: [https://css-tricks.com/equilateral-triangle-perfect-
paragrap...](https://css-tricks.com/equilateral-triangle-perfect-paragraph/)

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.

~~~
victorvation
> Normally you would pick a font size or line length, and find a fitting
> lineheight last.

Agreed. In my experience building for the web, line length is usually the
constraint that other dimensions are chosen around: the width of the device, a
fixed-width column of content, or a specified width for a dialog or modal.

In this game, I was able to easily score perfect for line height and font size
sliders, but it found it quite difficult to score anything above 0 for the
line length slider.

------
nickloewen
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.

------
stephencanon
(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.

------
anotheryou
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

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

------
hkon
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.

~~~
krsdcbl
Thats really bad, these few little things are, if anything, an absolute
foundation of Typography - a designer should get knowledgeable with this quite
early in their formation.

~~~
Geimfari
They aren't really foundational, they're just a set of styles that tend to
look nice and are therefore taught in introductory classes. There aren't any
actual rules for things like style/taste/fashion.

------
svilen_dobrev
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.

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

------
RGS1811
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.

