bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

EMDb

Here is a document I've been building over the past year while working on CSS files based on ems for dimensions.
Let's say you want the text in <div id="foo"> to have a font size of 14px, while its parent div has a font size of 16px. In ems, this translates as (target size)/(context size) = 14 / 16 = 0.875em. What I used to do was reach to the calculator app each time, and copy paste the result in my css.
At some point I realized I was often calculating the same sizes over and over again; storing these recurring sizes in a document allowed me to refer to it for a quicker copy&paste, resulting in a less tedious workflow. Project after project, little by little these tables completed themselves, and here we are today.

a screenshot of the emdb text file

Formating decisions

The value is followed by a semicolon: placing the caret after the colon of the css rule, a simple paste will finish the line, no need to type the semicolon at the end. In the case of replacing an existing value, placing the caret after the colon and hitting command+shift+right arrow followed by command+V proved to be a smooth keyboard ride.

The target and context in pixel sizes in the comments are here for two reasons: it made finding the right value in this reference document quicker(1) and it's easier to get back in the logic of the file when you haven't worked on it for a while — it lowers the em abstraction bar.

The 16px column is the first one, as it is the one I have been refering to the most, given it's the default font size in html documents. The following columns respect the logical order, but only even numbers. Odd font size contexts are not referenced here because I haven't been using them in my designs.

The file is available here on GitHub, so feel free to fill the remaining voids, and improve it whatever way you may find.

Happy em sizing everyone.

(1) the eyes don't have to grab the correct line from the target values in the left column and then follow this line to the adequate context column.

Posted in
« past present »