Syncope

Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.

Basically, it's a set of tools which adjust the rhythm and output the styles in a preferred, production–friendly format. It is also a lot of fun to play with! In fact, if it weren't for that, this tool wouldn't have seen the light of day.

Rhythm matters

Vertical rhythm is a typographic concept in which lines of text are evenly spaced, i.e. regardless of font size or variant, each line must be precisely aligned to the grid of the rhythm. Just like the text you're reading at this moment.

When visually organized in such way, the text is usually easier to read and simply looks better as a part of the web page ecosystem. Long story short, it is something that every website should implement to provide the best reading experience.

How does it work?

CSS does not offer any direct tool to maintain the vertical rhythm. But if used properly, font-size, line-height, padding, margin combined together with a simple math will do the trick, which is exactly what Syncope is all about.

The key factor to the success is the knowledge of the cap height value for the particular font. Most often than not, it equals 0.68 but it differs for some typefaces. Cap height makes it possible to align the baseline of the text to the rhythm grid knowing only the font-size and line-height.

So is that it?

Not really. Syncope is just a specific approach to the problem of vertical rhythm but not the only one. There are many great resources to learn from and many on–line tools that do the same job.

Also, to my surprise, different web browser engines render things in a slightly different way. It happens quite often when using EMs or REMs as a preferred output unit (sometimes with pixels too). Apparently, this aspect of rendering isn't standardized.

Found a bug? Have some comments? Check out Syncope on the GitHub.