Justified text on the web — a variable font project for running texts

8 min readDec 19, 2021

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. Furthermore left-aligned texts can be reminiscent of manuscript texts that, especially in the context of journalistic online media, can seem premature and unprofessional.

Left Aligned Text versus Justified Text — Typeface: Hollander, Designed by Gerard Unger

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 challenge.

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 Philipp Stamm supervised the practical approach of my bachelor thesis as my personal mentor.

You can see the type specimen on GitHub-Pages and also a live example on my Portfolio

Justified text on the web

In addition to the designed variable font Dorn, existing variable fonts can too be used in justified texts. Commonly, variable fonts are loaded through the same @font-face mechanism as traditional static web fonts.

Display variable fonts on the web

With the existing settings of CSS attributes @font-face, variable fonts can be loaded through the same mechanism as mentioned above, having to add two additional values: font-weight and font-stretch . These two additional values define the range of the weight and width of the specific font that is used.

@font-face {
 font-family: "Dorn";
 src: url("dorn.ttf") format("truetype-variations");
 font-weight: 400 700;
 font-stretch: 50% 200%;
}

In the following example I am using the Google Font Georama designed by Production Type. In order to embed variable fonts via Google Fonts API you simply have to copy the font URL into your CSS @import.

@import url("https://fonts.googleapis.com/css2?family=Georama:wdth,wght@62.5..150,100..900&display=swap");

Here is a list of variable Google fonts.

Variable font characteristics

Custom and registered axes control variable font characteristics and can be controlled with the CSS functionfont-variation-settings. With this function you can specify the four letter axis names of the characteristics you want to vary, along with their values: Weight wght Width wdth Slant slnt Optical Size opsz and Italics ital.

The following example shows the width that is represented by the wdth tag along with a designated value. It defines the design axis of how narrow or wide the letterforms can be.

font-variation-settings: "wdth" 85;

Definition of sentence types

It is now time to define how the paragraph is placed. Simply add text-align and justify. In order to activate hyphens you have to make sure that hyphens is set to auto.

p {
 text-align: justify;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

On top of that you must also specify a language by using the HTML attribute lang. This attribute is necessary in order to make sure that automatic hyphenation is applied in the defined language.

<article lang="de">
 <p>Der geübte Leser liest, indem seine Augen ruckartig über die Zeilen fahren. Diese kurzen Bewegungen werden Saccaden genannt, die mit Fixationsperioden von 0,2 – 0,4 Sekunden abwechseln. In mehreren Saccaden wird eine Zeile abgetastet, und in einer grossen Saccade springen die Augen nach links zum nächsten Zeilenanfang zurück. Nur während einer Fixation wird die visuelle Information aufgenommen.
 </p>
</article>

Further typographic corrections can be inserted manually in the HTML code like soft hyphens  and thin spaces  .

<article lang="de">
  <p>Der geübte Leser liest, indem seine Augen ruckartig über die Zeilen fahren. Diese kurzen Bewegungen werden Saccaden ge&shy;nannt, die mit Fixationsperioden von 0,2&thinsp;–&thinsp;0,4 Sekunden ab&shy;wech&shy;seln. In mehreren Saccaden wird eine Zeile abgetastet, und in einer grossen Saccade springen die Augen nach links zum nächsten Zeilenanfang zurück. Nur während einer Fixation wird die visuelle Information auf&shy;ge&shy;nom&shy;men.</p>
</article>

Font size for different screen sizes

In order to view texts on different screen sizes optimally, the CSS function font-size needs to be variable. Using CSS clamp() for font sizes allows you to set a font-size that grows with the size of the viewport width vw. As the name states, CSS clamp() clamps a value between an upper and lower bound and enables selecting a middle value within a range of values between a defined minimum and maximum. It therefore uses three different parameters: a minimum, a preferred and a maximum allowed value.

font-size: clamp(1rem, 0.6875rem + 0.8333vw, 1.25rem);

With this tool the values can be calculated easily.

Adjusting the width of text to fit its parent container

To adjust the width of your text to simultaneously fit its parent container you can additionally use a JavaScript function, inspired by the article Adjust the width of your text to fit its parent container using a variable font width axis written by Mandy Michael and also one of her code examples.

It solely requires information about the minimum and maximum of the font width as well as the minimum and maximum values in pixel of the column width in which the font is supposed to adapt to.

const maxWidthAxis = 125;
const minWidthAxis = 85;
const maxColumnWidth = 600;
const minColumnWidth = 375;

To sum it all up in your JS, CSS and HTML code

JavaScript code

var column = document.getElementById("column");
var container = document.querySelector("body");function variableWidthAxis() {
    const maxWidthAxis = 125;
    const minWidthAxis = 85;
    const maxColumnWidth = 600;
    const minColumnWidth = 375;const width = column.clientWidth;const percent = (width - minColumnWidth) / (maxColumnWidth - minColumnWidth);
    const scale = percent * (maxWidthAxis - minWidthAxis) + minWidthAxis;const newWidth = width > maxColumnWidth ? maxWidthAxis : width < minColumnWidth ? minWidthAxis : scale;container.style.setProperty("--width-axis", newWidth.toString());
}window.addEventListener("load", variableWidthAxis);
window.addEventListener("resize", variableWidthAxis);

CSS code

add the new variable --width-axis to the font-variation-setting

@import url("https://fonts.googleapis.com/css2?family=Georama:wdth,wght@62.5..150,100..900&display=swap");:root {
  --width-axis: 85;
}body {
  font-family: "Georama";
  font-variation-settings: "wdth" var(--width-axis);
}p {
  font-size: clamp(1rem, 0.6875rem + 0.8333vw, 1.25rem);
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

HTML code

add id="column" to your element. This attribute serves as a base value of the column width.

<article id="column" lang="de">
  <p>Der geübte Leser liest, indem seine Augen ruckartig über die Zeilen fahren. Diese kurzen Bewegungen werden Saccaden ge&shy;nannt, die mit Fixationsperioden von 0,2&thinsp;–&thinsp;0,4 Sekunden ab&shy;wech&shy;seln. In mehreren Saccaden wird eine Zeile abgetastet, und in einer grossen Saccade springen die Augen nach links zum nächsten Zeilenanfang zurück. Nur während einer Fixation wird die visuelle Information auf&shy;ge&shy;nom&shy;men.</p>
</article>

You can see the full implementation of this code in this code example. Beyond that there are many more CSS-functions and settings that can be used to get the most out of the used font in the best way possible. Other useful CSS functions that helped me throughout my bachelor thesis can be seen in this code example.

I am looking forward to your feedback and constructive criticism. You can reach out to me on LinkedIn.

Special thanks go to Prof. Philipp Stamm as my lecturer in font design, typography and corporate design. Moreover I want to thank him for his extraordinary engagement with which he shared his knowledge with me.

I also want to thank Dr. Invar-Torre Hollaus as my lecturer for pictorial history, -theory and -generic questions. I am thankful for the inspiring discussions that I had with him that eventually built the foundation of my bachelor thesis.

At this point I also want to thank my mentors, lecturers, fellow students, friends and family for supporting me throughout and beyond my bachelor thesis.