Typeplate & Markdown

Upon relaunching Nofont.com in early October I decided to try out Typeplate and let it set all the typographic defaults for the site. Heres my first impressions …

A short note in all fairness Since I run my site using Markdown that is being converted to html this article is equally about the pros and cons of working with Markdown. So just keep in mind that this is not a Typeplate review, it’s opinions and suggestions from me trying to achieve decent typography in a browser.

Let’s get going …

Once Typeplate was installed everything just felt better. Type felt smoother, reading felt easier and the overall feeling of what you look at became much more joyful. I can’t put my finger on what it was, it just felt that way.

The main difference, I think, might be that I know ‘something’ has happened in the background and that just makes everything feel better.

Text in general

The people over at Typeplate have had the sanity to treat new paragraphs as you would do in traditional- and booktypography; no whitespace preceding it. I love that and it just makes the text more well balanced and the reading gets, in my view, much easier.

Left: Paragraphs with Typeplate Right: Paragraphs without Typeplate

Markdown causing images to be indented

The downside this is that images and basically anything wrapped in a p-tag will get the same treatment.

Markdown (and also Wordpress as far as I know) has the bad habit of wrapping images in p-tags and the result is that images are indented as well.

This was pretty easy solved since I kind of know how I write my articles and my templates.

p + p img {
    margin-left: -1.5em;
}

Indentation of first paragraph after an image

The same happens to a p-tag after an image in a text. Since Markdown wraps the image in a p-tag the succeeding paragraph gets indented when it shouldn’t. I just want to be clear that this is not an Typeplate bug, it’s a result of a complete lack of typographic consideration in our cms’s and html-converters.

So one solution is to mess with the Markdown we are writing; duct-tape the succeeding paragraph to the image like this:

![Alt-text](url-to/image.jpg)
Lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum.

That will wrap both the image and the paragraph in the same p-tag. But I’m not very happy having to structure Markdown just to fix presentational issues like this. I want to keep my Markdown the way I always have, like this:

![Alt-text](url-to/image.jpg)

Lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum dolor sit ahmet lorem ipsum.

Since there is now way of selecting «the paragraph that comes after a paragraph with an image in it» with plain css a minor Javascript/jQuery solution had to be used. Once the $('p:has(img)+p'):addClass('no-indent'); was in place it was easy to remove the indentation with css.

jQuery adds an extra class to the paragraph succeeding the image. With that class we can remove the indent. Thanks a lot Karl Westin, Wouter Admiraal, Andreas Nymark and Jordan Moore for helping me out with this fix

Typographic scale

Typeplate has a headline hierarchy based on the «Modular scale"-concept (Modular scale is a pre-defined relation of sizes for headlines).

This is something that really bothers me. Typeplate says «We don’t make aesthetic design choices» but in this case they do. By defining a relation between typesizes they are stepping into the ‘looks and styling'-territory.

I removed the pre-defined typographic scale completely. Finding the scale and visual rhythm between bodycopy and headlines is so intimately related to the overall design and feel of the text that I wouldn’t let someone else, or even worse, an algorithm take care of it. Not even if the intention is to give me a starting point to work from.

Handling of abbrevation

Typeplate is equipped with a decent support for all-capital-abbreviations. But I think they go about it the wrong way … and I assume that it just hasn’t been a high priority issue from them since their proposed solution contradicts what they say on their website:

Small capitals help to make abbreviations way easier to read but won’t stand out from the text.

Yes, correct. But the proposed solution is to make the small capitals bolder and a different color than the text it is in. ¿Que?

1. Original text, 2. Typeplates proposed handing of small capitals, 3. My revised treatment of small capitals in text.

So instead of their css:

abbr {
    font-variant: small-caps;
    /* https: //developer.mozilla.org/en-us/docs/css/font-variant; */
    font-weight: 600;
    text-transform: lowercase;
    color: #808080;
}

I suggest:

abbr {
    font-variant: small-caps; 
    /* https://developer.mozilla.org/en-us/docs/css/font-variant */
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.12em;
    color: inherit;
    margin-right: -0.1em;
}

«What’s that ‘margin-right: -0.1em;’’ stuff doing there?» you ask. Well, that is a completely different article about letterspacing in software.

Conclusion

If you aren’t using Typeplate for your site, project or app I highly recommend you doing so. The project is fairly young but in my mind it has huge potential.