Pixel Generated Typeface


An experimental interface to create typefaces by playing with pixels based on existing fonts. 



GRAPHIC DESIGN TYPOGRAPHY TOOL GENERATIVE


TOOL

p5.js, HTML/CSS



Pixel generated based on the font Minion.


Concept


The audience can interact with the typeface and directly adjust their looks through moving the slide bars. The limitation of pixels, which is also the ‘resolution’ of the screen, can dramatically change the form of each letter. This reflects how we designed low-res typefaces on early computer screens and video games, a nostalgic feeling. The bigger the pixels are and the lower the resolution is, perhaps the further we go back in time.

By setting different parameters for two classic fonts, Helvetica and Minion, people can directly get a playful feel of typography and generate dynamic output.




Pixel generated based on the font Helvetica.

Technology


I used p5.js to anaylize the brightness of pixels of the original typeface, and set the pixels with the parameters before displaying on screen. The user can manipulate the pixel sizes and rounded corners of within a grided system, generating an unique set of fonts everytime they use.




    Interface of the tool, both mobile and desktop friendly.



    TUAN_HUANG © 2024


    REACH ME AT