Prototypo, Create Your Own Bespoke Typography in Just a Few Clicks

Prototypo is an online application that allows everyone to create from two basic models (sans serif + one with) a typography that will be adapted to the final needs in its final context.

We have proposed to Prototypo to present their service on the blog free of charge because we love this concept and we want to highlight young startups in the field of design.

No need for required knowledge or technical skills, just adjust the thirty parameters using sliders. Each setting affects the entire alphabet. In minutes, the user can export a conventional font file and use it in his authoring software, or on the web, just like any other font.

Can You Introduce Yourself?

In the team, we are 2 co-founders: Louis-Rémi Babé, developer, and Yannick Mathey, graphic designer. Before starting the Prototypo adventure, we were both freelancers for clients: web design, interactive design more widely. Three years after the diploma of Yannick (2010) during which a first version was developed, Louis-Rémi sent an email to Yannick to know where the development was. After a few presentations and a beer, they decided to work together, first one night a week and then full time on the project. After a successful crowdfunding campaign on Kickstarter (June 2014) the team decides to get involved on Prototypo sustainably.

Can You Introduce Us to Your Product?

Prototypo is an online application that allows everyone to create their own custom font. About thirty sliders allow you to modify the shapes and proportions of each letter, and these changes affect the entire alphabet. From two basic templates (a sans-serif and a Garalde) one can create a large number of variants of very different forms. Once the user is satisfied with the result, he just has to download the font and use it like any other typography.

How Did You Get the Idea?

Yannick studied graphic design at the Decorative Arts of Strasbourg (HEAR). Like any graphic designer he uses everyday fonts and like any graphic designer he has already tried to draw his own typo. Unfortunately, it is a discipline that requires not only great mastery of the tools and history of the typo, but also many hours of work: drawing a full font takes several weeks to several months for a typo professional .

It was from the frustration of not being able to draw his own typos for his graphic projects that Yannick decided to work during his DNSEP on a tool that would save time in this practice: an alphabet is a system, and as every system has recurring rules; we can then “code” and automate the rules. After a year, a first version developed under Processing was born. (Prototypo Alpha)

What Is the Strong Point of Your Solution?

Prototypo allows in a few minutes and very intuitive way to create a typographic prototype. Its simplicity of use makes it possible to quickly lay the bases of a design and then to come to retouch it in a traditional software to correct the details. We then gain considerable time on repetitive tasks that are often devoid of creative meaning. In a context of call for tenders, creation of logos or simply of a pure creation, Prototypo can be very useful to make profitable the time of the graphic designers which can be very expensive …

What Are the Next Features of the Product?

We currently offer 2 basic templates within the application. The next step is to add more, in different styles, to increase the possibilities.

As the application is on the web, we also want to add options to visualize changes in real time on an existing website: we can draw his typo taking into account its end use, within a web model; eventually, we would like to integrate the same principle into the applications used by all graphic designers: Illustrator, Photoshop, etc.

Finally, we will also create tools to allow more sophisticated users to create parametric templates themselves so that they can redistribute them, a bit like WordPress themes on ThemeForrest.

Zoom on the Operation of Prototypo

A demo is present on the site’s homepage, www.prototypo.io:

Once connected to the application, all you have to do is create your first project using the Collection menu in the left sidebar and fill in its name and the basic template you want to use:

Interface to create a new project

The application has 3 different views that can be displayed or hidden with the menu at the top right:

  • a glyph view that allows you to see in detail the changes on the letter,
  • a word view to apprehend the silhouette of the alphabet and understand the relationship between the letters,
  • a paragraph view to visualize the quality of optical gray on texts in small bodies.

3 views are available to suit all scales of a character drawing

All the parameters are present in the sidebar, and divided into 3 categories: functional parameters (heights, etc.), stylistic parameters (letter fat, etc.) and all that concerns the serifs in a 3rd tab.

3 tabs cut the different sliders according to their specificity

Each slider is set to have an optimal amplitude, allowing sometimes to enter a more experimental creation phase; the cursor will then turn red to indicate this phase.

The cursor goes red when entering a phase that may be experimental

Drawing fonts is a matter of rhythm, sometimes breaking a too rigid system. For this, there is an option that allows to individualize letters or groups of letters. It is therefore possible to create larger letters than others or any other specific modification:

Create rhythm in fonts (GIF)

To create an individualization group, simply click on the icon at the bottom right or in the top menu: edit> individualize parameters.

Activate the “individualisation” mode

Then appears a panel to create a group. This directly integrates the letter being modified into the glyph view. After having named this group, we can associate other letters that will have the same specificities as the pre-selected one.

Individualization group creation panel

Once the group is created, the interface is tinged with yellow to signify that we are in the “individualisation” mode:

Interface of the individualization mode

There are two ways to modify these individualized parameters: in px (value in absolute relative to the initial setting) and in% (value relative to the global settings of the alphabet).

To switch from one mode to another, each cursor has an icon that allows this change:

Different states to switch from absolute mode to relative mode

Once all the settings are done, all that remains is to export. Again, there are several types of export:

  • Export to merged OTF exports a ready-to-use font where all the forms that make up the letter have been merged into a single outline.
  • Export to OTF creates a font file where the shapes have not been decomposed. We can then refine the font in a typographic drawing tool such as FontForge (Open-Source)
  • Export to Glyphr Studio opens a new window to the Glyphr website which is an online manual font editing tool.

Difference between a merged export and a non-merged

You have just created your first font, and it would be useful to add variants to it! From what you have just created, it is possible to add a bold, an italic, a condensed version, etc.

To do this, return to the Collection menu and click on the name of the font you have just modified, then click Add a variant.

If you choose a predefined name, such as Bold, then the grease will be automatically adapted according to this type of variant.

Project management menu and creation of variants.

Here !

There are two offers to use Prototypo: a free version, limited to 6 parameters, and one from € 15 per month where you can create an unlimited number of fonts. (think about the annual offer, 2 months are offered!)

The next development to come within the application:

  • A new font, an elzevir.
  • Ability to synchronize a website and see the police evolve in real time.
  • Tools to manually modify the font, directly in the application, keeping the automatic behaviors then.
  • Automatic spacing (interlacing) and kerning (pair approach) options.

Leave a comment

Your email address will not be published. Required fields are marked *