This week, we’re taking a look at a monogram I designed for a friend a little while ago. The brief was for the letters “MJ” to be combined in a way that would make the letters interact with each other in an interesting way while maintaining legibility at a small size. Bonus points were awarded for boldness and simplicity, with a little oddball along the way.

The idea was to make the J become part of the M and function as its right most leg. After a few iterations, I found that having the J joined to the M made it so that the J was not obviously a different letter, and seemed to just be a curly M. However, having a break between the two letters made it seem that there was a J, and then some other weird letter, perhaps a toppled over A, next to it. To solve the problem, I took out the hairline on the left most leg to make use of the kind of ultra high contrast style typography where nothing but the thicker parts of the letters are visible and the hairlines disappear entirely. In that way, the J can be distinct from the M, but still look like it is part of the same letter.

The second concern was for the piece to work best at two sizes – one being avatar size and the other being favicon size. With the version above, it functioned well as an avatar at 300 x 300 pixels, but once it was scaled down to favicon size, at 32 x 32, and sometimes 16 x 16 pixels, the black outline of the letters became too thin in comparison to the inner red section, and the image ended up a little confusing.

This version is 141 x 141 pixels, but scales down well to smaller sizes. Comparing the two versions, it almost seems that they could be the same image, but if the smaller one were to be scaled up to the size of the first, the black outline seems too chunky and thick. Fortunately, the image was only to be used at small sizes, so I was free to make the outline bold to suit the context well. In the name of versatility and future proofing, however, both versions were sent to the client to make sure that the logo could be used in a variety of scaled-up contexts.