Jesse Lawson

Software engineering, artificial intelligence, writing, and open-source tools

Feb 27, 2018 - Blog

Fluid Typography Examples for Beautiful Mobile Reading Experiences

One of my projects I’m working on, in addition to crowdfunded storytelling, is a platform to connect other crowd-funded storytellers with readers. One of the principal components of this platform is the ability to read stories on your mobile device in a way that is aesthetically pleasing to the eye. In this article, I’m sharing with you some examples of fluid and responsive web typography that I’ve come across, along with my thoughts on how I will or will not integrate it into my platform.

My quest for an optimal rendering solution for long-form text in the browser that would work seamlessly across devices started with an article on MadeByMike about using Viewport units to define text-size boundaries. The demo he provides is actually a really cool example; open it up on your desktop and simultaneously on your mobile device to really get a feel for what’s going on. I like this a lot, but one aspect of using viewport units that might be off-putting for some designers is the lack of precision control for font sizes. Ultimately this might not matter, as surrendering pixel control for a more pleasing experience should be an easy opportunity cost to make.

Paragraph text is obviously my main focus here, but I couldn’t help but smile when I stumbled on fittextjs.com. This JS library does exactly what it’s name implies: it fits text (preferably headlines) to the parent div’s width. Super neat if you want a predictably fluid heading experience, but probably not appropriate for long-form paragraph text.

That’s when I stumbled on Molten Leading. Check out this example and confuse yourself a bit before reading why the hell this is so cool.

The idea started with an article on NiceWebType:

When a responsive composition meets a viewport, there are different ways to fill space. What interests me most here is a fundamental triadic relationship in typesetting — that of a text’s **font size, line height, and line length**. Adjusting any one of these elements without also adjusting the others is a recipe for uncomfortable reading, which is one reason designers have such a difficult time with fluid web layout.

This makes a lot of sense. When designing a layout that will work well on a mobile device, one of the things you always have to keep in mind is how it will scale when viewed on a larger (read: desktop or laptop) screen. If you’re not careful, you’ll violate the Reading Distance Contract, a term a just made-up to mean the comfortable reading distance of one to one-and-a-half feet from the viewer’s face for a mobile device, and one-and-a-half to one-and-three-quarters feet for a laptop for desktop.

... an increase in font size can be jarring to readers; A larger font size affects reading distance comfort. If I were to rotate my iPad while reading, and the text scaled up, I can imagine needing to hold the device a few inches farther away as a result. This is not what designers want to have happen to text intended for reading.

In case you just want to compare a side-by-side of a desktop example and a mobile example, below is a screenshot of this molten leading demo from my mobile phone. Compare it to the web demo on your desktop or laptop.

[caption id=“attachment_31” align=“aligncenter” width=“304”] The molten leading demo as viewed on a mobile device.[/caption]

This is exactly what I am looking for: something to provide a rich and fluid reading experience no matter how you are reading this. I am not a huge fan of ragged-right text, but I know a lot of people have grown accustomed to it because most of the reading people do nowadays is of text on social media. One idea I was thinking of was to give users of my platform the option to enable text justification. I mean, why not?

Well it turns out that justifying text on web pages is a huge web design no-no. However, looking through this article and articles around the web like it all bring out a few central themes:

  • Justification in web design has not taken off because browsers have no way of professionally typesetting justified text (a la the InDesign example on the article I linked)
  • The difficulty in reading justified text is 100% a byproduct of browsers not being equipped to justify text correctly
  • The stigma against justified text in web design is unique in the typesetting community

The last point I want to really touch on. When it comes to book design and typesetting, justified text is always going to be the preferred method–and has been for hundreds of years. One can argue that the web is fundamentally different than a book, but I would counter-argue that since we are reading an enormous amount of content on our mobile devices, we need to start typesetting the web like we would a book.

Designers and web developers are always going to clash on this topic, so don’t feel like there is any one side to stay on. Since I’m designing an experience for mobile reading, I am drawing from what I have come to love about reading on my Kindle: the fact that the text is typeset beautifully (and justified). Typesetting, see, is an art in and of itself, and by that I mean that the presentation of a block of text is itself an expression of thought. Symmetrical expression in typesetting is paramount to a uniform experience of thought transference, and it can be achieved by justifying your text.

About ten years ago there was this project called Sweet Justice, which promised to justify text in the browser–and quite nicely, if I might add.  Its mission is simple:

Sweet Justice lovingly inserts the obscure yet wonderful soft hyphen into the text of any element marked with the **sweet-justice** class, and turns on [CSS text justification](http://www.w3.org/TR/css3-text/#justification). It requires either jQuery or YUI3 to function.

And the text rendering is wonderful:

[caption id=“attachment_38” align=“aligncenter” width=“284”] The orange is because of some weird flux settings. If you’re not using Flux, you’re computering wrong.[/caption]

So what is the path going forward? For the platform I am building, I am going to explore combining (in a highly customizable yet opinionated fashion) the molten leading and sweet justice packages. I’d like to see what this looks like on a mobile-first platform, and I can probably get some of my short stories typeset this way as a way to beta-test this method.

I’ve created a new GitHub repo for Sweet Justice here, removing some of the outside dependencies so that it’s 100% pure Javascript (i.e., no dependencies other than yourself). Feel free to follow along, and be on the lookout for a follow-up to this article.