a use for the ‘ex’ unit value in css

Combining images with text in a cohesive manner requires planning and problem solving and is a necessity in graphic design. Most designers prefer to see an optical alignment between the tops of images and the tops of blocks of text. It gets even sexier when the top of the image is aligned with the x-height of the top line of text in the text block. This gives a better visual and optical alignment.

In the example paragraph below, I’ve merely applied the severely under-used ex unit value to the positioning of the image. The result is the perfect optical alignment with the top of the paragraph it lives in.

Font Preview

Here is a preview of a font I’m currently developing. It’s based off of Feder-Grotesque, originally designed by Jakob Erbar in 1919, although I’m looking to modify it for less of a German appearance (for lack of a better description), so it won’t be an exact revival. Currently the redrawn letters are the same as Feder-Grotesque, but it’s only in the early stages of the design process and I’m not sure if I want to do a revival or maybe just something based off of the original. All I know is It will be a multiple-master font with many weights, alternates and other goodies.

Free Font: NINJO

Ninjo was inspired by ninjas and the disco era. I wanted to create a super-funky display font that was easy to manipulate and play with. I used this opportunity to hone my skills in type design software and open-type programming, making many mistakes and corrections along the way. I am offering this display font for free, there will be a link at the end of this post. Enjoy!

Examples