FontForm

Web Application, UI Design, Problem Solving

FontForm is a font design application that works on the typeface anatomy parameters.  FontForm provides an opportunity to design new fonts just by changing the value of different parameters and also provide an opportunity to change the parameters of an existed font.

Overview

This project looks into the problem faced by designers during designing a new font style. This application helps the designer to design new font and edit the standard font style on the basis of a font’s anatomy parameters. After finishing the design the user can download the file in formats of .OTF, .TTF, and .FNT.

Approach

To gather data and insights about customer pain points and preferences, I conducted user research. This will include surveys, interviews, and observations to understand the process of font design.

Design Process

Phase 1: Probelm and Research

Problem

Font Design is a long process for designers, and it takes a lot of time. Sometimes designers wish to change the parameters of a standard font but it is not possible. Every designer has to design a font from the scratch.

Research

For the better understanding of users and font design process it is important to understand the Typography Types and Typographic Anatomy.

Types of Typography

There are thousands of typefaces in the world. Each one can be classified into five primary groups: serif, sans serif, script, monospaced, and display.

Typographic Anatomy

Typography is the art and technique of arranging type. It is applied to the symbols’ style, arrangement, and appearance, including letters and digits.

Typographic Measurable Parameters

X-height
Ascender line
Apex
Baseline
Ascender
Crossbar
Stem
Serif
Leg
Horizontal bar
Arm
Cap height
Descender line

Typographic Design Parameters

Bowl
Counter
Collar
Loop
Ear
Tie
Vertical bar

User Group

Typographers, Graphics Designers, UX/UI Designers, and Design students are the main user groups for this project. To understand the font design process and what problems they are facing I conducted interviews and a survey.

Affinity Mapping

Affinity Mapping helped me to organize ideas or insights. It allows large numbers of ideas stemming from interviews to be sorted into groups, based on their natural relationships.

Sorting cards according to theme

Sorted out the cards in order to understand the mental model of users on the basis of their struggles during font design, their interests, their dependency on tools & other activities, and the lack of modern tools.

Survey

Surveys targeting individual young designers allowed me to gain a better understanding of the awareness of font design process and the technique/software designers use for the font design.

User Personas

There are two user personas that are based on real-life data and reflect the wants and needs of your target audience. User personas helped me to make product decisions.

Pain Points

-Font design process takes a lot of time.
-Not able to change the parameters of a font.
-Not able to add a pattern to the font.
-Sketching and the initial phase take too much time.
-Not able to edit the standard font.
-Takes a lot of time to find that the designed font is unique.
-Not able to download font file to install
-Most of the time users design fonts manually.
-Designed font works only ton one platform.
-Registration of a designed font is a long process.
-A change in the design of one letter can not be applied to other alphabets.

Ideation

After all the research and brainstorming, I came up with some solutions as possible. There are some features that can be added to the application. The Integration of AI to generate the font design and the addition of parameter editing will reduce the time of the design process.

User Flow

I created a user flow for the app that's simple and easy to use. It guides users smoothly from the start to their core interactions, ensuring accessibility and a pleasant experience.

Visual Language

FontForm is a font design application that is going to be used by users from different fields and age groups. So, cute visual language is more appealing. Thus, the visual language of UI uses rounded rectangles to create a user-friendly, cute, and playful atmosphere.

Phase 2: Design

Wireframing

After I defined the flow and the screens I needed, I proceeded with creating wireframes to explore the experience in more detail on a screen-by-screen basis.

Font + Form

Final UI

After completing the user flows and wireframes for every task, I proceeded with the final screens.

View more projects