I heard that relative units are better then absolute, but sometimes browsers round it wrong and it's hard to calculate. Do you know any tool that can help?
I used SASS/Compass. It's good and very easy, but not perfect…
As per the comment, “vertical text rhythm” seems to refer to line grid. Line grid has generally been ignored in CSS, largely because it is mostly relevant in print media and in multi-column text layout. Basically, the way to make things snap into a line grid is to use consistent sizing in vertical direction, using the same units. For example, if you set line height in em units, set heights and vertical margins in those units, too. To make an image fit into a line grid, wrap it in a container with a height in em units. Alternatively, do all vertical sizing in px units.
It is true that rounding may cause problems, since em dimensioned things ultimate get converted to pixels. So if you set line height to 1.3em and in image container height to 3.9em, the latter might not yield exactly 3 times as many pixels as the former but one pixel less or more. If this is crucial and you consider using pixels, remember that a CSS pixel need not correspond to a physical pixel in a device.
In CSS Line Grid Module, currently existing as an Editor’s Draft only, there are properties for using a real line grid. They have been partly implemented in Chrome, with the -webkit- prefix. If a line grid is desired, it can hardly hurt to add code that tries to snap content into the grid and may do so in Chrome:
body {
line-grid: yourNameForLineGrid;
line-snap: baseline;
-webkit-line-grid: yourNameForLineGrid;
-webkit-line-snap: baseline;
}