How an emerging CSS standard can fix old problems and raise the bar for web apps
The problem with text boxes today
In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. The example below shows distances between text boxes set to 32px. As you can see, all the vertical spacing is visually much bigger than 32px, even though you set them all to the same value.
I’ve been using the 4px baseline grid for 2+ years now and have been trying to get my team to use it as well. I finally overcame my procrastination and decided to talk about it in my first Medium article. I’m looking for feedback on this method, so please let me know your thoughts! Here goes nothing.
The problem
It drives me crazy that the text bounding box almost always brings in extra space above and below the actual text. Therefore, when the bounding box is used to measure space, it ends up being bigger than you intended. The bigger the line height, the bigger the problem. In the example below, the design was created by measuring the space between bounding boxes. …
Ethan Wang
Move whole pixels at Microsoft
