If content is king, then the typography on the site is the queen of the ball, which is a big responsibility. In web design, the font isn’t just a display element for quizzes or headers. It is an effective component of the interface that adds visual weight to graphics, creates an aesthetic and makes a good impression.
Today, outline typography is a hot trend. It is necessary to consider not only its readability, but also as a player entertaining the audience in the arena. Modern designs surprise with font solutions with ideas of visual context. The era of boring fonts is over and designers are experimenting with shapes and styles, even if they are not in fashion.
Let’s face it, when a modern website catches the eye from the first screen with a Hero image, it’s not easy to get interested in typographic delights. Or maybe a designer doesn’t need to be prejudiced? In fact, in skilled hands, all of these obstacles are not an obstacle. Check out the interesting compositions with large outline letters without filling you can think of. Experts predict the popularity of this font in web design in 2020.
So let’s take a look at the effectiveness of using outline typography on websites. 10 new examples of design ideas.
Let’s start with the official website of Las Vegas basketball player Edgie Wilson. Exciting video background in the main screen. Catchy phrases have been invented so that users don’t get lost. They used outline typography: it was necessary not only to emphasize the elegance, but also to create the necessary aura for a woman’s website.
Another trend on the web is animation in the hero section. An interesting idea: combine trends, but minimize animated objects and keep the design clean. This allowed for sophisticated typography in a robust context.
The site is known for its retro chic typography with a hover effect on the homepage. A giant bold outline font is what it takes to make a word stand out. A partially filled with chalk shading font not only enriches the aesthetic making the title touching, but also adds weight to the letters.
The energetic team site adds outlines / typography, ghost buttons and thin lines to the monolithic design to subtly coordinate the user. This despite the rather heavy and saturated video slider, not to mention the captivating transitions. On the one hand, it visually reduces the importance of the second word, on the other hand, it serves as a backdrop for the slide and link page elements.
Nice mix of retro styling with streamlined typography. The navigation links are decorated in an elegant font. Monochrome and free space help not to overload the design with gigantic dimensions. The role of the police is decorative – to create a welcoming atmosphere.
For these unusual sites, the choice of typography was predictable. Toonami with space energy, circles, grids and cubes. The hollow green / blue letters, reminiscent of the high tech world, fit perfectly into the design idea.
Dot to Dot embodies technological elegance. The perfect base for on-site creation with an ultra-fine outline font filled with hover.
In both models, it’s hard to imagine a more interesting typographic idea. Choosing a policy is a well thought out decision.
The use of outline typography can be seen as a questionable decision. It’s hard to get past a canvas based hero with interactive / animated submersion in a water effect. Each movement of the mouse leaves a slight ripple. The streamlined title blends into this background, while maintaining a feminine vibe.
The two models prove that the typography of the outlines is never too big. The terse header on the homepage is elegant and nothing else catches your eye. A delicate balance is certainly maintained.
Outline typography serves as background decoration. Its purpose is both decorative and informative. Due to the subtlety of the font, the deep text does not compete with the foreground.
Rules for successful application
There are rules to help new ideas for using typography in web design survive. First of all: size matters. Even though the sophisticated outline font matches the design perfectly, resist the temptation to design small print with it (the decision is definitely a failure). So more is better.
Second, letters should acquire only tangible outlines. Do not overload the design with unnecessarily bold type, otherwise you can make the lettering stand out from the rest of the content.
Finally, your staunch friend is the contrast. White letters on a black or green background give good contrast. The most extraordinary typographical experiences and ideas are welcome.