Is an always evolving script, that stretchs a font width to fit the screen size.

AdapType is a script that allows any font width to respond to the window size.

This is a project thought as part of the Master's degree in Design and Multimedia at the University of Coimbra, Portugal.

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.


This scrip stretch aplys only to the width of the font, 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. So, y coordinates will be done exponencially.


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.


While creating the extra wide font, 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, was created a middle ground between the two options.


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



Get Font


The script was build with the help of other two script. Jquery and Opentype.js, that reads and filters the information needed to draw a font and its letters.

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.


For the inicialization of the script some extra scripts need to be downloaded.

<script type="text/javascript" src="PATH_TO/jquery.min.js"> </script> 
                        <script type="text/javascript" src="PATH_TO/opentype_modified.min.js"> </script> 
                        <script type="text/javascript" src="PATH_TO/AdapType.min.js"> </script>

Setting Up

Call a canvas where the script will draw de text

 <canvas id="canvas_id"> </canvas>

Initialize script

var font= new AdapType({ 
                        fonts:[{"font1":"PATH_FONT_REGULAR", "font2":"PATH_FONT_EXPANDED"}], 
                        textToRender: "PLACE_TEXT_HERE", 
                        canvasID : "CANVAS_ID" 

Run Script


Make it resonponsive. This pice of code, enables the canvas, and its letters, to be resized, in width, automatically when the window size is changed.

 $( window ).resize(function() { 


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 number Indicates the stroke color.
strokeWidth 0 number Indicates the stroke width.
animateonEnter false boolean Animate font stretch, when window is loaded.
start max string string Where the stretch will start, with its max value or min.
exponential true boolean Describes the type of calculus for y coordinates. For more information go to PROCESS.
lineHeight 1.2 boolean Describes the line spacing is the vertical distance between lines of text.

All this options can be changed with the help of the change Methods, or while initializing the script, in the followwing way:

var font_1= new AdapType({ 
                    fonts:[{"font1":'Path1', "font2":'Path2'}],
                    textToRender: "OPT",
                    canvasID : "doc38",
                    mode: "chosenLetter",
                    chosenLetters: [1,3],

 var font_2 = new AdapType({
                fonts:[{"font1":'Path1', "font2":'Path2'}],
                textToRender: "ION",
                canvasID : "doc39",
                mode: "random",
                stroke : "#db3535",


Get Methods

Getting font size of a Adaptype Object.

            //returns the number 200

            //returns the string #db3535

            //returns the string "random".

            //returns the string "HI".

            //returns the string "max".

            AdapType.getExponential() NEW
            //returns the boolean as true.

            //returns the string "percentage".

            AdapType.getCanvasWidth() NEW
            //returns the number 35.

            AdapType.getCanvasID() NEW
            //returns the string doc37.

            AdapType.getMinWidthPx() NEW
            //returns the number 206 (pixels).

            AdapType.getMinWidthPer() NEW
            //returns the number 17.85095320623917 (percentage).


Adaptype can take a while to be completely loaded.
When running functions (like AdapType.changeText()) on events like on window loaded (not click events), since JavaScript is asynchronous it will run any function, even if all the information is not ready (usually return error: this.font1.checkWords is not a function ).
So the next function is recomended for this kind of situations, and it may be implemented with the following code:

            AdapType.changeText("new text");

Change Methods

Change canvas width to the width specified, when the text doesn't fit the canvas, will automatically decrease its font size. (This will not upadate the canvas, if you want it, use AdapType.changeCanvasWidthDraw());


Change canvas width to the width specified,, recalculate widths to each letters and show it in the canvas.


Change the text of the text and shows it in the canvas.


Change font size and draw on canvas.


Change the color of the text and shows it in the canvas.


Change the mode option, and draws it in the canvas.


Change letters selected for the mode chosenLetter, recalculate widths to each letters and show it on the canvas.


Change Exponential option and draws it in the canvas.

AdapType.changeExponential(boolean) NEW

Other Functions

— Inicializing


— Window Resized

This function should be called "onWindowRsized". It recalculates widths to each letters, according to new size of window and show it on the canvas.


— Re-Random

Makes a new random for letters, changing its widths. If mode isn't random will change it.


— Animating

Animates current width to new width. When decreasing width prevents from going beyond min width of the font, established by Font 1.

            //VEL – velocity of animation
            //TO – width to animate (ex: 100);
            //ANIMATING_MODE – mode of animation (“easeIn”, “easeOut”, “easeInOut” and “linear”)

— Draw

Draws in canvas, given widths for each letter. Does not change itself nothing to the canvas and the letters.

000webhost logo