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

Baseline position discrepancy

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

Lineheight position discrepancy

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)


Overall Discrepancy

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


Application of line height

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.

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.