Art Direction + Research Notes

About / Site Description

The Polka Tattoo Typography Lab studies how tattoo inspired geometry collides with expressive serif forms. This page collects the research, typographic notes, and art direction that ground the rest of the project.

Gurmann Basran

Author and Designer

about me

I'm a UX/UI Designer and web developer exploring the intersection of typography and visual identity. Currently studying Interactive Media Design at University of Lethbridge, I blend technical skills with creative problem-solving to craft user-centered digital experiences. This project explores how typographic systems can embody the raw, geometric energy of tattoo art.

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

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.

Gurmann Basran

© 2025

Typography Project

Valid CSS!