Skip to main content
Solved

Realistic text size in a 1440 wireframe

  • November 26, 2024
  • 5 replies
  • 741 views

Flavia_Corradetti

Hi all, I am new to Figma and I am not a developer… I have just changed my role in the company I work for and trying to move toward the design-side.
I have just created in Figma - let’s say like an exercise - some frames for a web application choosing the 1440px preset wireframe but I’m not sure which size the texts should have in the wireframe to obtain a “realistic” preview … if I run the prototype or just play the presentation of the frames the texts seem too big to me but I don’t know if it is just a matter of resizing them in the frames or maybe a lack of responsiveness or … what? I wait for your advice. Which text size do you usually choose for a 1440 wireframe? Thanks

Best answer by Aidil_Goh

You can stick with 16px as your base size. Use it for paragraphs and buttons. And then select font sizes for:

  1. Hero heading - 64px
  2. Article Headings h1,h2,h3 - respectively 48px, 36px, 24px
  3. Small text - 14px

Since you’ll be creating wireframes, exact sizes won’t matter. So long as anyone viewing them can clearly read your content.

Once you move on to UI design, consider using a scale. You can try a service like https://typescale.com/ to figure out which one is most suited to your work.

This topic has been closed for replies.

5 replies

Aidil_Goh
  • New Member
  • 4 replies
  • Answer
  • November 27, 2024

You can stick with 16px as your base size. Use it for paragraphs and buttons. And then select font sizes for:

  1. Hero heading - 64px
  2. Article Headings h1,h2,h3 - respectively 48px, 36px, 24px
  3. Small text - 14px

Since you’ll be creating wireframes, exact sizes won’t matter. So long as anyone viewing them can clearly read your content.

Once you move on to UI design, consider using a scale. You can try a service like https://typescale.com/ to figure out which one is most suited to your work.


Miguel9
  • New Member
  • 1 reply
  • November 27, 2024

Aidil has put forth some useful guidelines, but just keep in mind that size of one font might not be the same for another font.
What I mean is, you can have 2 different fonts both at size 16px and they can be visually different (in terms of size on the page)


Flavia_Corradetti

Thank you so much @Aidil_Goh. Clear and super useful tips.


Flavia_Corradetti

you’re right, for sure this also has to be taken into consideration.


Aidil_Goh
  • New Member
  • 4 replies
  • November 27, 2024

True. Sticking to one type of font e.g. Inter for wireframes thus takes away the worry.