How is vertical alignment similar to and different from horizontal alignment?

Web Typography: Vertical alignment at top of images and text

• I red a number of articles on web typography, but I can't find enough details on the relationship among text and images. I'm interested in the best practices to display images in the top-left corner of a text longer than 1 line. In what follows I assume for simplicity that text has font-size 12px and line-height 18px. For 1-line texts, the best practice seems to be to align text and image in the middle. If the image is taller than the line-height, then we should add vertical margins to match an exact multiple of the line-height in order to preserve vertical rhythm. For multiline texts, the height of the image should be a multiple of the line-height, as explained e.g. here: http://www.studiograsshopper.ch/web-development/typography-and-images/ My concern is about: the exact alignment of image and text on top (and bottom) the distance between image and text With font-size=12px, line-height=18px and text in the middle of the line, the text has 2px "space" both on top and bottom. This means, for instance, that for a 3-line text the "perfectly-aligned" image would have height 50px with 2px margin top and bottom. I wonder if this is the best rule, or if it's better to have an image slightly bigger (or slightly smaller). And what about the distance from the image to the text? Should it depends more on the size of the image or on the width of the text? Any suggestion for 50x50px image or, say, 400px text (50 chars)?

• Answer:

  The blog entry you cited is basically talking about designing using a baseline grid, which is something designers have been doing for a long time. Teehan + Lax has a good entry on how this translates to the web here: http://www.teehanlax.com/blog/designing-faster-with-a-baseline-grid/ My advice is to code toward having the design look intentional, and disregard the numbers if they aren't working. If there's an extra 2px margin visually atop the cap height, resolving that is more important than trying to fit into some kind of formula or rule.