Note: The image with an upwards and downwards pointing arrow with a red background has a margin-box of zero height.

Step 1: Select a font-size from the below buttons or select a UA font size setting (see screenshot below for Firefox) or select a line-height from the below buttons.

font-size:

line-height:


Step 2: Select get the style.

line-height:
height:

Note: The height is 50px for each block (being blue or green) plus font-size * line-height (ratio).

Example 50px + font-size * line-height (ratio) + 50px = height.

Extra note: This page so far only is testing "Times New Roman". Below is a table showing font-size in pixels and corresponding line-height size and ratio. The line-height values come from Bruno Fassino's Normal line-height, plot versus font-size test case.

font-size and line-height
size (px)line-height (px)line-height (ratio)
16201.250
20241.200
24301.250
28341.214
32381.188
36431.194

Example of Firefox font size setting