Type details and credits
Typeface name and methodology
- Typeface:
- Noto Serif
- Designer:
- Google Fonts Team
- Source:
- Noto Serif - Google Fonts
Noto serif is a serif typeface designed by the google fonts team as a part of the noto family. I chose this font for this project because of its balance between the structure and its softness, this mimics the inked precision of polka tattoo linework.
References
Citations and references
- Google Fonts. (n.d.). Noto Serif. https://fonts.google.com/specimen/Noto+Serif
- Typ.io. (n.d.). Noto Serif in action on divami.com. https://typ.io/s/iysja
- Simmons, J. (n.d.). The Layout Lab. https://labs.jensimmons.com/
- purpleflavoredgrape. (2025, October). Tattoo-inspired visual typography composition [Video]. TikTok. https://www.tiktok.com/@purpleflavoredgrape/video/7465129184092802335
Concept/art direction
Inspiration for the design
This project, the Polka Tattoo Typograph Lab, merges the structural experimentation of Jen Simmons' CSS compositions (Web Design Experiments by Jen Simmons) with the expressive chaos of Polka tattoo style. This tattoo style is defined by the fusion of geometry, collage like layering, and a deliberate break from traditional norms.
Here, typography becomes the tattoo medium itself. The letters are not just text, they act as lines of ink carved, layered, and abstracted. The site's geometry borrows from the symmetrical grids of Polka tattoos, using intersecting diagonals and a structured balance to create a stark, typographic contrast without relying on imagery or color.
Here in this project the typography becomes the medium of the tattoo, not just leaving it as text but the letters act like lines of ink that's carved, layered, and abstracted. The sites geometry borrows from these aspects from the symmetry that is imposed of these tattoo like grids with polka style. The intersecting diagonals and structed balance shows a stark typographic contrast instead of using imagery or color
Each composition reflects a different side of this typographic contrast to display the meaning behind the polka style:
- Type as Image: The typography becomes the artwork itself, directly illustrating a tattoo style, as seen in the flower inspired by someone's actual tattoo.
- Type in its natural habitat: The typeface is shown to be versatile, capable of being highly expressive while still functioning effectively within a web context.
- Favorite Character: This focuses on a single character as a design object, highlighting the precision of the digital letterform in a way that mirrors the deliberate anatomy of a tattoo stroke.
Overall, the visual identity embraces the core tension between the rigid grid and the chaos of the Polka style, showcasing the duality of permanence and iteration that lies at the heart of both tattoo and typographic design.
Process Notes
Research
Analyzed polka tattoo patterns and diagonal symmetry, then explored how CSS Grid and transform properties could recreate that visual tension in a web environment.
Composition
Built responsive layouts using HTML5 semantic structure and CSS custom properties. Focused on accessibility while maintaining the diagonal aesthetic across devices.
Color + Texture
Limited palette (cream, black, red) to emphasize typography over decoration. Used box shadows and borders to create depth without imagery.