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.
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.
CSS does not offer any
direct tool to maintain the vertical rhythm.
But if used properly,
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
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.