Adaptype

Adaptype is a Javascript script that allows a developer to stretch a font width to a specific size and also provide a group of functions, like animations that allows for a personalized usage of the script and fully “play” with a font while building a website.

As I was in my Masters in Multimedia and Design, I had to decide what to do for my thesis. In my University, you had three options:

Until this point, I was only involved in projects about design or about development, so I found that this was an opportunity to join the two fields and actually develop something that I was passionate about.

So, I came up with the idea of developing a web script that would automatically change a font width to fit the window size, without deforming its strokes and, by being part of my thesis, do a lot of research about it.

This project ended up working on:

1. Thesis Research

My research focused on two key aspects, Typography, where I focused on different time periods and how tools were being developed to allow a font to have a bigger range of variants.

I started my research in the industrial revolution, where movable types were very thick, in order to fit perfectly on the page and bring more impact to the designs. I also focused my research on the study of old modular fonts, as Fregio Mecano, where modularity is used to change the form of the letter completely.

Finally, I gathered some contemporary typography experiments, where designers used code to explore the typographic form and the infinite variability that that code could bring.

2. Building the Font

After some research, I came to the conclusion that, for my idea to work, I needed to have two font files, one with a normal width other with a larger font width. This would allow me to interpolate each point that builds a letter and apply the font width that I wanted, without deforming its strokes.

With limited time I decided to pick an already existing geometric font, Reglo by Sebastien Sanfilippo and do a version of it with an extra-large width.

To build the extra-large font, I researched and gathered several extra-large fonts that had different approaches to some letters. For example, for letters with diagonals, there was not a unique approach to it, some stretched the diagonals other added a horizontal line to stretch it.

After some experimentation and some consideration, I decided to do a mix of the approaches I found. For letters with diagonals, I choose to add a horizontal line, but at the same time stretch the diagonal. This allowed me to keep all the letter’s appearance, considerably coherent between them.

I had some considerations while working on the font, like I made some minor adjustments to some of the original font letters, to allow me to stretch it easily with code and while I was building it. One of the adjustments was, I made sure I kept the same exact number of points between each letter in the two font files. This would later allow me to read and compare each letter’s information and easily stretch the font with code.

3. Code the script

Before I started coding exactly, I gathered tools that could possibly help me achieve what I wanted to do. I research scripts that could read the information from a font file, like Opentype.js, and get acquainted with some of its functions.

With an early version of the two font files, I started working on the script. I gathered the information about the font and drew it on the canvas. After drawing, it was time to compare the two font files to draw a middle width between the two font widths.

As I did this, I found that it was not so easy.

If I was stretching the font with and if a “y” coordinate of a point changed between the two fonts, it meant it was part of a diagonal and its widths were being deformed. So I came to the conclusion that, for the interpolation between the two fonts to work without deforming any stroke, I had to do different calculations between the x and y coordinate.

The x coordinate needed to be calculated linearly and the coordinate needed to be calculated exponentially.

With the main functionalities done, I started organizing the code, gathering the main functionalities into an easily reusable object, I made several functions that would create different effects on the font and made sure the stretching was being calculated according to the container and window size.

I was having fun with it, so I also decided to make some animations that would transform the font from a normal font width to fit the container and making this animation easily repeatable, customizable, and with the possibility to be triggered by different events.

4. Presenting my work

The website had to show my full process in this project, from research to building the font and script, the script documentation to help developers re-use it, and be a fun application of the script.

So I made sure the website incorporated a lot of the core functionalities of the script and showed it in creative ways. As I was building the website, I ended up having ideas for new functionalities for the script, so I ended up doing these as I was finishing the website.

The website was part of my thesis, so I had to present it on a set date. But a few months later I ended up redesigning it fully, to be more playful and clean. In this second phase of the project, I also organized the script code and added more functions.

I really enjoyed working on this project. I was able to work in fields I’m very passionate about, and do things I haven’t done until the moment, like, building my own font and working on developing my own script.