3 Display Fonts to Try in Your Next Web Mockup: Moralana, Medino and Aurora

Three display fonts to study in a web mockup

Typeface visuals by @shahednext, shared in the original Instagram carousel. The slides show Moralana, Medino and Aurora as bold display treatments. Check the type foundry's license before using any font in a live product.

A display font can give a mockup a distinct personality, but it should not carry every job in the interface. The best way to evaluate a decorative typeface is to place it in a realistic layout, give it a clear role, and test whether it stays readable at the size where people will actually see it. These three specimen slides offer a useful exercise: compare the letterforms, imagine a context for each, then pair the expressive face with a quieter text family.

1. Moralana: make the headline the visual anchor

The first specimen is labeled Moralana. Its display treatment is designed to attract attention, so begin by using it for a short headline rather than a paragraph. Try it in a portfolio cover, event title or editorial hero where a few large words can set the mood. Keep the line length compact and check the word shapes at the actual breakpoint. A decorative face can make a short title feel distinctive, but long lines quickly become difficult to scan.

When you pair it, use a neutral sans serif for navigation, captions and body copy. Let the display font own one clear level in the hierarchy. If both the headline and the buttons compete for attention, reduce the font size or weight before adding more color or decoration. The point of a specimen mockup is to decide whether the typeface deserves the role, not to decorate every component with it.

2. Medino: test its personality against the content

The second slide names Medino. Put the same phrase in each specimen so the comparison is fair. Then test a real heading, a two-line title and a short label. Ask whether the letterforms reinforce the content's tone. A typeface that feels striking in a large specimen may feel overly theatrical when it appears in product navigation or a small card label.

Build a simple pairing around contrast: choose a text face with calmer proportions and a comfortable x-height. Use the display font for one headline, the companion for body copy, and a consistent scale for supporting labels. Check the pair in sentence case and uppercase if the design uses both. The shapes of capitals, numerals and punctuation can change the mood more than a sample word suggests.

3. Aurora: check contrast and spacing in context

Aurora appears on the third named specimen slide. Evaluate it at the intended size and against the real background. Display faces often have unusual details or tightly spaced forms, so test the headline with the exact words you plan to ship. Watch for collisions, awkward line breaks and letter pairs that appear too close together. Adjust tracking conservatively, then review the result at mobile width.

A specimen is not a license to use a typeface. Before shipping, confirm the foundry, license scope, embedding rights and whether web use requires a separate purchase. If the slide does not identify a foundry or license, treat that information as unknown. Do not assume a font is free because an image of it appeared in a social post.

A quick mockup exercise for choosing a display font

1. Choose one role. Decide whether the font is for a portfolio headline, a campaign title, a product wordmark or a section heading.
2. Use identical sample copy. Put the same short phrase in Moralana, Medino and Aurora to compare shape rather than wording.
3. Add a quiet companion. Pair each display face with the same readable sans serif, so you are judging the display type, not three unrelated systems.
4. Test a real layout. Place the heading in a hero card with its actual subheading, button and image. Check the space around the text.
5. Inspect responsive sizes. Review desktop and mobile. If the display face breaks into too many lines or crowds the action, it may be the wrong role.
6. Check legibility and licensing. Confirm contrast, font size and the foundry's actual web license before using the font in production.

This is why mockups matter: they reveal whether a type choice helps the message or merely looks attractive in isolation. If you want to place your own font choices into a polished product scene, explore the NewForm Studio.

Credit: The source slides are by @shahednext. View the original carousel for the visual references. NewForm did not independently verify font licensing or foundry ownership for these specimen names.

Related on NewForm

• 15 Font Pairings for Designers That Actually Work (Rendered With the Real Fonts, 2026)
• 12 Inter Font Alternatives for Better UI Typography (2026 Edition)
• Font Sizes for Websites: The Complete 2026 px Guide for Every Element