I created a text markup framework that combined any glyph set of a font with pixels in a given image as my college graduation project. The text could be in any length so that the output would increasingly provide more context of the image, possibly infinitely if more text is inputted. 

The algorithm in this tool broke down each character's width into a certain number of vertically sliced units to carry characters in containers with optically sufficient space for legibility. This could be easily done with a mono-spaced font. To solve this with any font, I had to break the width spectrum of the given type-set down into a specific number of widths, then it would be possible to add or subtract the units from/to around letters.

I discovered that almost any font in the Latin alphabet has about 5-7 classifiable character widths. This meant if I think of these as main containers in an algorithm as a glyph set, it could produce 5-7 pixel widths.
How does it work?
I also designed wireframes of a hypothetical interface that would allow users to input text, upload images, and transform the comp with some Photoshop-like capabilities.
To illustrate the system, I applied it to two of the most commonly found fonts, Helvetica, and Times New Roman, and to demonstrate its adaptability, I designed a new character set that I named “Pixelized” for this project. In the end, I created a prototype with some coding help that only worked with mono-space fonts for demonstration, and displayed it to my peers and professors (video at the bottom). 

See more projects

Back to Top