Justified text on the web

My name is Jonathan Miskolczy and I am a former Bachelor of Arts student at the FHNW HGK in Basel, Switzerland. I have studied visual communication with deeper focus on typography. Within my bachelor’s degree I have been working on my bachelor thesis: Designing a variable font for journalistic online media, that I have successfully passed with distinction in August 2021. For my bachelor thesis I have designed an online newspaper for which I created a variable font that can be used in justified texts. This typeface originally was supposed to bring back the typical newspaper character to journalistic online media. While working on my typeface I discovered some issues regarding typefaces used online. I therefore created a new and better way to display them online. For this reason I thought it would be best to share my insights and solution with you. The following text is an excerpt from the bachelor thesis mentioned above.

Most browsers of the world wide web are commonly formatting texts in paragraphs that are left-aligned. With its random hyphenations and cut-off lines, left-aligned texts can often appear as unstructured and can therefore compromise readability. Fur­ther­more left-aligned texts can be reminiscent of manuscript texts that, especially in the context of journalistic online media, can seem premature and un­pro­fes­sion­al.

Justification can be used to deliberately distance oneself from said manuscript text and on top of that can also be used to convey the impression that the present text is redacted and rectified. Assuming that justification has been used for over 500 years it can be counted as a conventional sentence type. Certain advantages of using justification are e.g. a balanced type setting and stressing the structure of the set layout. However, in order to use justification it is necessary to put enough words in every single line to balance the gaps between every single word. Especially with smaller displays e.g. on smartphones, the implementation of justification is going to be a chal­lenge.

My approach to a solution regarding this problem contains the design of a variable font and its implementation on the web by means of HTML, CSS and JavaScript. The variable font I have been designing is called Dorn and is inspired by typefaces of printed newspapers. Dorn is a typical Antiqua and can be distinguished by dynamic buoyancy. My typeface Dorn was designed to be read on a computer screen comfortably. In order to enable legibility, Dorn had to be designed with a small line contrast, emphasised serifs and a greater x-height. This variable font also contains two design axis therefore the width and boldness of the letters can be adjusted smoothly to the size of the screen of the device used. Professor Phillip Stamm supervised the practical approach of my bachelor thesis as my personal men­tor.