Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 25 Jul 2025 17:47:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 225069128 Fonts for Wireframing https://frontendmasters.com/blog/fonts-for-wireframing/ https://frontendmasters.com/blog/fonts-for-wireframing/#respond Fri, 25 Jul 2025 17:47:16 +0000 https://frontendmasters.com/blog/?p=6637 When you’re doing a design prototype, it’s common to use the actual fonts the design will use, but use “lorem ipsum” text. The idea being to not distract anyone with real words when they are supposed to be looking at the design. Or you just don’t have any real text to work with at that point. That might be controversial as working with real content as soon as possible might lead to better designs, but ya know, c’est la vie.

When you’re wireframing though, you’re almost pre-design prototype at that phase. You might still be in Figma or the like though, so what font do you choose then? I love the idea of using a font that just references the idea of type being there, but isn’t actual letterforms. That way you still get the sizing and reflowing and everything of real type, without worrying at all about the actual text. I had trouble finding something (I kept looking for “squiggle fonts” and not finding anything.) So now that I have found them, I’m linking them up:

I used Redacted for the graphic I made for this post.

]]> https://frontendmasters.com/blog/fonts-for-wireframing/feed/ 0 6637