Type on Point is a web-based tool for creating typographic art. My love of typography and the idea sharing power of the internet led me to build this web based app.
The Problem: Everyone has a message worth sharing with the world, but design software can be cost prohibitive and more complicated than it needs to be.
The Solution: Type on Point has constraints which make the creation of short form text easier to create in less time. Because it was created with this specific goal in mind it dispenses with some features to focus on the user's end goal.
*Yes, I am a type nerd, but I'm not a jerk about it.
The TyPo Studio, is where text based art comes to life. Once text has been entered to the Headline input it appears on the art-board where it can be manipulated. By using the range sliders, each which control a different typographic property, the user can manipulate their design with precision. Hovering over the icons that accompany each range slider reveals a tool-tip which defines a typographic property.
Introduction
The Type on Point interface is intended to be an intuitive and exploratory space for type. The end goal being a typographic image called a typo. Shared within the Type on Point community and across social media, typos are a new form of memes. Type on Point encourages positive messaging by example and rewards users who create insightful, meaningful, interesting, or profound typos by promoting their work.
Messages must be said plainly and in public to have an impact. The written word is a powerful information delivery system and typography serves to encode it. The design of type contributes to an idea's meaning in various ways as the viewer decodes the message. We perceive the shape of the letters as we read them and they influence our understanding.
John and Yoko attempt to spread a meme through society: this effort took considerable physical effort and economic means. Conversely, today anyone has the ability to share an idea world-wide if they have access to the internet.
Competitor Analysis
The public can contribute to the creation of media, where mass media once was a one-way street, now our ability to create consumable ideas to share and comment on them dwarfs what one media-outlet can produce.
To discover how web-based meme generators work I examined a few examples. My goal was to analyze their design patterns and features so that I could use a format that meme creators already understand, but with the intention of evolving the experience and final product.
Some considerations that came from this exploration are listed below.
•The parameters of a quote/headline/thoughts in type
•Rectangle - bounding box
•Grid structure / Margin(s)
•Point size - “heading” size vs copy text
•Width / Weight
•Kerning / Leading / Tracking
•Small caps
•Background image
•Bold / Italic / Underline
•Rectangle - bounding box
•Grid structure / Margin(s)
•Point size - “heading” size vs copy text
•Width / Weight
•Kerning / Leading / Tracking
•Small caps
•Background image
•Bold / Italic / Underline
Personas
The User Tapestry™️ helped to explore the broader user base for the site. Each individual identifies with the design of a specific glyph to create a sense of their personal brand. I got a broad picture of the people who might use the site; think of it like a proto-persona on steroids.
Site Flow
Concept Sketching
As ideas were being explored flat mock-ups were generated as proof-of-concept in Adobe Illustrator. At the top left there is an experimental layout of the user interface for the Ty-Po Studio. The elements of the WYSIWYG editor came together after researching other sites with similar functionality. The typo can then be instantly posted to the gallery where image options like download, share, and print were proposed.
Prototyping
Whenever I wanted to add new functionality to the Type on Point web app I made working prototypes with Codepen. In this way I could ensure that the code functioned properly and made integration into the system much easier.
*The prototypes below are interactive, try them out!
On-boarding
Ty, the site's mascot, will show you around with a modal tour the first time you visit the page. Writing this on-boarding flow required multiple edits to achieve fluidity and to match system vocabulary.
TyPo Studio
Users of Type on Point will find that there is a step by step process which guides them towards their message creation. Each control panel has unique inputs for the user to experiment with. Navigate to any control panel by choosing its corresponding navigation tab.
On the color and stroke control panel each element has a corresponding color-picker.
Instant feedback is given to the user as their actions are reflected immediately on the art-board.
The Artboard tab provides the designer with preset widths and heights for their typo, allowing them to use common social media dimensions with a single click.
Additionally there's a range slider for the border-radius or 'Round Corners' which works well in the Type on Point Gallery because it supports PNGs with transparent backgrounds.
Instantly add text styles (shadows, three dimensionality, outer glows, and backgrounds) to any text-box. Many of the styles stack; add a text shadow and size augmentation combo!
Rotate text in 3D space using a novel UI. Add perspective or draw your text on an arc. (see prototype section above to try it)
After adjustments the only thing left to do is post your typo to the gallery where it is stored in database along with your design selections so you can come back and edit or remix it.
One of the newer features in the Typo Studio is carousels. This is where people will get a ton of value for their LinkedIn cringe posting. The example is of a 'seamless' design which swipes without breaking the image and text flow across slides.
Log-In and Profile
Type on Point has its own profile system, each typographer gets their own profile page and the ability to update their profile in the database I set up. The site uses PHP and AJAX.
Profiles are an important part of the site because it allows users to save their favorite work, delete Typos that aren't up to their standards, and track stats on their word counts. All the functions of a CRUD web-app!
Social
A complete suite of socially networked Typos: Share your TyPo with typographer friends, post a status, and manage your posts and messages. You can add friends to your friend list and follow their activity in the feed.
Mobile optimized!
Made possible by a database, I used this visual structure designer to associate User IDs to their comments and Typos
The Gallery
TyPos appear in the gallery with a single click at the end of the Typo Studio process. Each Typo is a shareable piece of art!
after refactor
Design Iterations
After many design iterations, tests and explorations, the UI improves. My main goal was to find an order of operations that streamlined the TyPo creation culminating at the last step. I was fortunate enough to sit down with people willing to let me look over their shoulder as they used the site, because of this I gained great insight into how other perceive this interface. Along the way I removed steps entirely or rearranged them, I adopted new way of producing images, and gained an appreciation for managing large code bases.
an early version of the typo studio 2017
the updated refactoreed typo studio 2026
Text shadow and artboard inner shadow (most current 2026)
text-shadow v2
tet-shadow v3
a middle skeuomorphic version of the typo studio
Dark mode
Final Thoughts
This project influenced my understanding of how design systems work, how moving from desktop to mobile is a totally different experience and should be treated as such and just how difficult it is to support all screens and browsers. Through this work I learned a vast number of CSS properties and HTML elements along with their attributes. I feel that I know a bit more about what is possible on the web and now I'm even more interested in the cutting edge of web apps.
Next Steps:
There is always work to be done. I hope to clean up code and improve the site speed. The navigation a bit better across the site, especially on mobile where I intend to make it a bottom navigation. *update: The mobile version now has bottom nav :). *re-update: the bottom nav was lost in the refactor bringing it back soon.
There is always work to be done. I hope to clean up code and improve the site speed. The navigation a bit better across the site, especially on mobile where I intend to make it a bottom navigation. *update: The mobile version now has bottom nav :). *re-update: the bottom nav was lost in the refactor bringing it back soon.
People need the ability to share their views in public and feel that they are heard. Writing is a powerful form of communication with the ability to reach people across time. We're not always able to express ourselves verbally, and that's why the poet writes, sometimes our thoughts and feelings need to be revealed in other ways. The way we design and share typographic messages should meet the need for expression while also impacting culture in positive ways.
Next Project
[password protected]