EM Chart

Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad.

Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). You can check the actual font-size in pixels using Firebug by checking “Show Computed Style” in the Options menu in the upper right corner of the CSS/Style panel while viewing in HTML mode.

You’ve checked the design comp and measured exactly 9 pixels of bottom margin under the H3 until the next element. Of course you can set the bottom-margin of the H3 to 9 pixels and move on. But that won’t scale when a user bumps up their text size in their browser and your vertical rhythm will crumble as the H3 grows in size but keeps the same 9 pixels of bottom margin.

The Formula

The formula for computing the EM multiplier is:

desired pixel size / current pixel size = multiplier

So for the H3 example: 9/24 = .375

The Chart

It’s a handy formula to memorize, but it’s still lame to punch it into a calculator dozens of times a day. I figured it couldn’t be too hard to loop through the formula in PHP or JavaScript to create a lookup chart. So I whipped it up in PHP then later changed it to JavaScript to keep it more portable. The EmChart places desired pixel size in the columns, and current pixel size in the rows. Here’s a screen shot of looking up our H3 example.

Everyday Usage

I use the EmChart all the time when converting design comps to HTML/CSS templates – which is basically all day every day. I find it very useful for calculating bottom margins, line-heights (which are unit-less, but the formula still applies), top margins, and top/bottom padding among other things. It’s also really handy for keeping nested relative font-sizes straight. The CSS and JavaScript is all included within the HTML page to keep it portable. I actually launch it as a standalone application using Fluid (Mac). Feel free to copy the source and use it as you’d like. But get in touch if you make any derivatives.

As I mentioned, it doesn’t matter how your current font-size is set. So this will work for you regardless of what font-size or unit is (or isn’t) set on the HTML element, BODY element, or any other element. You just need to know the effective pixel size of the current element you’re working with.

1px	1px	2px	3px	4px	5px	6px	7px	8px	9px	10px	11px	12px	13px	14px	15px	16px	17px	18px	19px	20px	21px	22px	23px	24px	25px	26px	27px	28px	29px	30px	31px	32px	33px	34px	35px
2px	0.5	1	1.5	2	2.5	3	3.5	4	4.5	5	5.5	6	6.5	7	7.5	8	8.5	9	9.5	10	10.5	11	11.5	12	12.5	13	13.5	14	14.5	15	15.5	16	16.5	17	17.5
3px	0.334	0.667	1	1.334	1.667	2	2.334	2.667	3	3.334	3.667	4	4.334	4.667	5	5.334	5.667	6	6.334	6.667	7	7.334	7.667	8	8.334	8.667	9	9.334	9.667	10	10.334	10.667	11	11.334	11.667
4px	0.25	0.5	0.75	1	1.25	1.5	1.75	2	2.25	2.5	2.75	3	3.25	3.5	3.75	4	4.25	4.5	4.75	5	5.25	5.5	5.75	6	6.25	6.5	6.75	7	7.25	7.5	7.75	8	8.25	8.5	8.75
5px	0.2	0.4	0.6	0.8	1	1.2	1.4	1.6	1.8	2	2.2	2.4	2.6	2.8	3	3.2	3.4	3.6	3.8	4	4.2	4.4	4.6	4.8	5	5.2	5.4	5.6	5.8	6	6.2	6.4	6.6	6.8	7
6px	0.167	0.334	0.5	0.667	0.834	1	1.167	1.334	1.5	1.667	1.834	2	2.167	2.334	2.5	2.667	2.834	3	3.167	3.334	3.5	3.667	3.834	4	4.167	4.334	4.5	4.667	4.834	5	5.167	5.334	5.5	5.667	5.834
7px	0.143	0.286	0.429	0.572	0.715	0.858	1	1.143	1.286	1.429	1.572	1.715	1.858	2	2.143	2.286	2.429	2.572	2.715	2.858	3	3.143	3.286	3.429	3.572	3.715	3.858	4	4.143	4.286	4.429	4.572	4.715	4.858	5
8px	0.125	0.25	0.375	0.5	0.625	0.75	0.875	1	1.125	1.25	1.375	1.5	1.625	1.75	1.875	2	2.125	2.25	2.375	2.5	2.625	2.75	2.875	3	3.125	3.25	3.375	3.5	3.625	3.75	3.875	4	4.125	4.25	4.375
9px	0.112	0.223	0.334	0.445	0.556	0.667	0.778	0.889	1	1.112	1.223	1.334	1.445	1.556	1.667	1.778	1.889	2	2.112	2.223	2.334	2.445	2.556	2.667	2.778	2.889	3	3.112	3.223	3.334	3.445	3.556	3.667	3.778	3.889
10px	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9	1	1.1	1.2	1.3	1.4	1.5	1.6	1.7	1.8	1.9	2	2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8	2.9	3	3.1	3.2	3.3	3.4	3.5
11px	0.091	0.182	0.273	0.364	0.455	0.546	0.637	0.728	0.819	0.91	1	1.091	1.182	1.273	1.364	1.455	1.546	1.637	1.728	1.819	1.91	2	2.091	2.182	2.273	2.364	2.455	2.546	2.637	2.728	2.819	2.91	3	3.091	3.182
12px	0.084	0.167	0.25	0.334	0.417	0.5	0.584	0.667	0.75	0.834	0.917	1	1.084	1.167	1.25	1.334	1.417	1.5	1.584	1.667	1.75	1.834	1.917	2	2.084	2.167	2.25	2.334	2.417	2.5	2.584	2.667	2.75	2.834	2.917
13px	0.077	0.154	0.231	0.308	0.385	0.462	0.539	0.616	0.693	0.77	0.847	0.924	1	1.077	1.154	1.231	1.308	1.385	1.462	1.539	1.616	1.693	1.77	1.847	1.924	2	2.077	2.154	2.231	2.308	2.385	2.462	2.539	2.616	2.693
14px	0.072	0.143	0.215	0.286	0.358	0.429	0.5	0.572	0.643	0.715	0.786	0.858	0.929	1	1.072	1.143	1.215	1.286	1.358	1.429	1.5	1.572	1.643	1.715	1.786	1.858	1.929	2	2.072	2.143	2.215	2.286	2.358	2.429	2.5
15px	0.067	0.134	0.2	0.267	0.334	0.4	0.467	0.534	0.6	0.667	0.734	0.8	0.867	0.934	1	1.067	1.134	1.2	1.267	1.334	1.4	1.467	1.534	1.6	1.667	1.734	1.8	1.867	1.934	2	2.067	2.134	2.2	2.267	2.334
16px	0.063	0.125	0.188	0.25	0.313	0.375	0.438	0.5	0.563	0.625	0.688	0.75	0.813	0.875	0.938	1	1.063	1.125	1.188	1.25	1.313	1.375	1.438	1.5	1.563	1.625	1.688	1.75	1.813	1.875	1.938	2	2.063	2.125	2.188
17px	0.059	0.118	0.177	0.236	0.295	0.353	0.412	0.471	0.53	0.589	0.648	0.706	0.765	0.824	0.883	0.942	1	1.059	1.118	1.177	1.236	1.295	1.353	1.412	1.471	1.53	1.589	1.648	1.706	1.765	1.824	1.883	1.942	2	2.059
18px	0.056	0.112	0.167	0.223	0.278	0.334	0.389	0.445	0.5	0.556	0.612	0.667	0.723	0.778	0.834	0.889	0.945	1	1.056	1.112	1.167	1.223	1.278	1.334	1.389	1.445	1.5	1.556	1.612	1.667	1.723	1.778	1.834	1.889	1.945
19px	0.053	0.106	0.158	0.211	0.264	0.316	0.369	0.422	0.474	0.527	0.579	0.632	0.685	0.737	0.79	0.843	0.895	0.948	1	1.053	1.106	1.158	1.211	1.264	1.316	1.369	1.422	1.474	1.527	1.579	1.632	1.685	1.737	1.79	1.843
20px	0.05	0.1	0.15	0.2	0.25	0.3	0.35	0.4	0.45	0.5	0.55	0.6	0.65	0.7	0.75	0.8	0.85	0.9	0.95	1	1.05	1.1	1.15	1.2	1.25	1.3	1.35	1.4	1.45	1.5	1.55	1.6	1.65	1.7	1.75
21px	0.048	0.096	0.143	0.191	0.239	0.286	0.334	0.381	0.429	0.477	0.524	0.572	0.62	0.667	0.715	0.762	0.81	0.858	0.905	0.953	1	1.048	1.096	1.143	1.191	1.239	1.286	1.334	1.381	1.429	1.477	1.524	1.572	1.62	1.667
22px	0.046	0.091	0.137	0.182	0.228	0.273	0.319	0.364	0.41	0.455	0.5	0.546	0.591	0.637	0.682	0.728	0.773	0.819	0.864	0.91	0.955	1	1.046	1.091	1.137	1.182	1.228	1.273	1.319	1.364	1.41	1.455	1.5	1.546	1.591
23px	0.044	0.087	0.131	0.174	0.218	0.261	0.305	0.348	0.392	0.435	0.479	0.522	0.566	0.609	0.653	0.696	0.74	0.783	0.827	0.87	0.914	0.957	1	1.044	1.087	1.131	1.174	1.218	1.261	1.305	1.348	1.392	1.435	1.479	1.522
24px	0.042	0.084	0.125	0.167	0.209	0.25	0.292	0.334	0.375	0.417	0.459	0.5	0.542	0.584	0.625	0.667	0.709	0.75	0.792	0.834	0.875	0.917	0.959	1	1.042	1.084	1.125	1.167	1.209	1.25	1.292	1.334	1.375	1.417	1.459
25px	0.04	0.08	0.12	0.16	0.2	0.24	0.28	0.32	0.36	0.4	0.44	0.48	0.52	0.56	0.6	0.64	0.68	0.72	0.76	0.8	0.84	0.88	0.92	0.96	1	1.04	1.08	1.12	1.16	1.2	1.24	1.28	1.32	1.36	1.4
26px	0.039	0.077	0.116	0.154	0.193	0.231	0.27	0.308	0.347	0.385	0.424	0.462	0.5	0.539	0.577	0.616	0.654	0.693	0.731	0.77	0.808	0.847	0.885	0.924	0.962	1	1.039	1.077	1.116	1.154	1.193	1.231	1.27	1.308	1.347
27px	0.038	0.075	0.112	0.149	0.186	0.223	0.26	0.297	0.334	0.371	0.408	0.445	0.482	0.519	0.556	0.593	0.63	0.667	0.704	0.741	0.778	0.815	0.852	0.889	0.926	0.963	1	1.038	1.075	1.112	1.149	1.186	1.223	1.26	1.297
28px	0.036	0.072	0.108	0.143	0.179	0.215	0.25	0.286	0.322	0.358	0.393	0.429	0.465	0.5	0.536	0.572	0.608	0.643	0.679	0.715	0.75	0.786	0.822	0.858	0.893	0.929	0.965	1	1.036	1.072	1.108	1.143	1.179	1.215	1.25
29px	0.035	0.069	0.104	0.138	0.173	0.207	0.242	0.276	0.311	0.345	0.38	0.414	0.449	0.483	0.518	0.552	0.587	0.621	0.656	0.69	0.725	0.759	0.794	0.828	0.863	0.897	0.932	0.966	1	1.035	1.069	1.104	1.138	1.173	1.207
30px	0.034	0.067	0.1	0.134	0.167	0.2	0.234	0.267	0.3	0.334	0.367	0.4	0.434	0.467	0.5	0.534	0.567	0.6	0.634	0.667	0.7	0.734	0.767	0.8	0.834	0.867	0.9	0.934	0.967	1	1.034	1.067	1.1	1.134	1.167
31px	0.033	0.065	0.097	0.13	0.162	0.194	0.226	0.259	0.291	0.323	0.355	0.388	0.42	0.452	0.484	0.517	0.549	0.581	0.613	0.646	0.678	0.71	0.742	0.775	0.807	0.839	0.871	0.904	0.936	0.968	1	1.033	1.065	1.097	1.13
32px	0.032	0.063	0.094	0.125	0.157	0.188	0.219	0.25	0.282	0.313	0.344	0.375	0.407	0.438	0.469	0.5	0.532	0.563	0.594	0.625	0.657	0.688	0.719	0.75	0.782	0.813	0.844	0.875	0.907	0.938	0.969	1	1.032	1.063	1.094
33px	0.031	0.061	0.091	0.122	0.152	0.182	0.213	0.243	0.273	0.304	0.334	0.364	0.394	0.425	0.455	0.485	0.516	0.546	0.576	0.607	0.637	0.667	0.697	0.728	0.758	0.788	0.819	0.849	0.879	0.91	0.94	0.97	1	1.031	1.061
34px	0.03	0.059	0.089	0.118	0.148	0.177	0.206	0.236	0.265	0.295	0.324	0.353	0.383	0.412	0.442	0.471	0.5	0.53	0.559	0.589	0.618	0.648	0.677	0.706	0.736	0.765	0.795	0.824	0.853	0.883	0.912	0.942	0.971	1	1.03
35px	0.029	0.058	0.086	0.115	0.143	0.172	0.2	0.229	0.258	0.286	0.315	0.343	0.372	0.4	0.429	0.458	0.486	0.515	0.543	0.572	0.6	0.629	0.658	0.686	0.715	0.743	0.772	0.8	0.829	0.858	0.886	0.915	0.943	0.972	1
36px	0.028	0.056	0.084	0.112	0.139	0.167	0.195	0.223	0.25	0.278	0.306	0.334	0.362	0.389	0.417	0.445	0.473	0.5	0.528	0.556	0.584	0.612	0.639	0.667	0.695	0.723	0.75	0.778	0.806	0.834	0.862	0.889	0.917	0.945	0.973