CSS Discrepancy
When you have created your design markup it will have to be altered in order to work in html/CSS due to Baseline & Line Height discrepancies.
There are two main discrepancies between HTML/CSS and design tools in terms of how they
handle type:
- Positioning of baseline
- Handling of line height
This document attempts to illustrate the two discrepancies and propose a solution to bridge the gap.
Baseline Position Discrepancy
InDesign/Illustrator/Photoshop
HTML/CSS
Position of baseline is not affected by font size or family.
These ratios differ in each font, depending on the font metrics. However they remain the same across the different weights and styles of a font family.
*This figure is unique for each font family. Calculations are made by measuring the vertical distance between the bottom of the line-height space and the baseline of a piece of text that is 100px font-size and 100px line-height. For Arial this equals to 0.15 of the font-size.
Line Height Handling Discrepancy
InDesign/Illustrator/Photoshop
HTML/CSS
Line height is measured upwards from baseline to baseline.
The difference between the font-size and the line-height is distributed equally above and below font-size.
Overall Discrepancy (Baseline Position + Line Height Handling)
When we add the two "paddings" added below the baseline by HTML, we get the formula in grey, which is specific to font family.
How this is then applied
When the CSS offset is implemented, everything is then shifted down to align with the grid, correcting the discrepancy between design tools and HTML.
The implementation of the offset to the css will depend on how the page has been structured, so the most appropriate solution is applied
For example: if the text element has bottom paddings/margins applied to it, then these will need to be adjusted to compensate for the offset.
