AdapType

About

AdapType is a project thought as part of the Master's degree in Design and Multimedia at the University of Coimbra, Portugal. With the help of mentors Artur Rebelo and Luis Lucas Pereira and the support of family and friends.

AdapType is a script that allows any font width to respond to the window size. For this, it needs TWO font files, to make the stretch possible, since each master indicates the minimum and maximum width the font can take.

With this, the script can generate any width of the font and draws it, in the canvas.

This script uses jQuery and opentype.js, which allows to read a font data and change it. Some functions were added to opentype.js, so the AdapType would be possible.

Compatible Fonts

For the development of this project I needed a typeface that would suffer the stretch by the script.

To carry out the proposed idea, an extra large version of each font was created to make its stretch possible.

Reglo

ABCDEFGHIJKLMNOPQRSTUVWYXZabcdefghijklmnopqrstuvwyxz

Get Original Download Adaptation

Arvo

ABCDEFGHIJKLMNOPQRSTUVWYXZabcdefghijklmnopqrstuvwyxz

Get Original In Development

Process

How the calculus is made

This scrip stretch aplys only to the width of the font, so each coordinates as a diferente calculus, to get the proper result. Variables x of each points will be done linearmente, across de mininum and maximum width of the font.

On the other hand, y coordinates will be done exponencially because, if we are streching the font width and any y coordinate is diferent between the two fonts, it means it is a point of a diagonal and if this coordinate increases linearlly, will deform the diagonal width.

Deciding letter forms

For Reglo font, specifically, some letter forms were changed, so the new version extra wide, would be possible.

These letters include the following.

Creating Extra Wide Font

While creating the extra wide font, some letters raised more doubts. Were found different solutions for each letter, one was to along continuously the font, other was to add a horizontal line to suffer the stretch.

After some consideration, in letters like A, X and Y, was created a middle ground between the two options.

In letters like W and V, the letters were alonged continuously, since other options were going to make the letter mistaked by other letters.

Compatible fonts

For the script to work the two fonts need to have exactly the same number of points. Because the script will create paths with the points of each letter, with no specific order.

If the fonts have diferent points, the letters will be deformed.

How to use

1. Include JQuery, Opentype.js and AdapType.js

2. Create canvas

3. Initialize AdapType, indicating font to stretch and place to draw

var font= new AdapType({
fonte1: 'fonts/Condensed.ttf',
fonte2: 'fonts/Expanded.ttf',
textToRender: "AdapType",
canvasID : "canvas_id"
)};

4. Run AdapType

font.runAdapType();

Options

Option

Default

Type

Description

fontSize
100
number
Defines size of font to draw.
mode
equal
string
Defines what mode each letter will be stretched: random
, equal
, firstLetter
, lastLetter
, chosenLetter
, deform.
chosenLetters
null
array
Defines witch letter will be stretched, in mode chosenLetter
.
canvasID
null
string
Link to canvas to draw.
canvasWidth
100
number
Indicates percentage of window to canvas use.
canvasWidthMode
percentage
string
Indicates the type of measure of canvas width, percentage
, pixels
.
color
black
string
Color to fill font.
stroke
transparent
string
Indicates the stroke color.
strokeWidth
0
number
Indicates the stroke width.
animateonEnter
false
boolean
Animate font stretch, when window is loaded.
start
max
string
Where the stretch will start, with its max
 value or min
. 

Reglo

ABCDEFGHIJKLMNOPQRSTUVWYXZabcdefghijklmnopqrstuvwyxz

Arvo

ABCDEFGHIJKLMNOPQRSTUVWYXZabcdefghijklmnopqrstuvwyxz

Cowhand

by Toshi Omagari

Custom Typeface

by Natasha Jen

Francis Typeface

by Nicola Djurek

Dúbia

by Bürocratik

Custom Typeface

by Pedro Cruz

How the calculus is made

Deciding letter forms

Creating Extra Wide Font

Compatible fonts

1. Include JQuery, Opentype.js and AdapType.js

2. Create canvas

3. Initialize AdapType, indicating font to stretch and place to draw

4. Run AdapType

Text

Mode

Letter to Change

Font Size

Canvas Width

Stroke

Fill

Stroke

Animate