Realistic text size in a 1440 wireframe

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

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.

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)

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

1 Like

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

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

1 Like