And once again — typography. This topic is so hot and complex that it deserves a lot of discussion. And the point isn’t just about understanding or finding ideas for selecting the “right” or “beautiful” fonts for a web project. It’s because stylistics and trends are constantly evolving . Even more than that, the overall perception and opinions about whether typography should be artistic or strict are shifting. In other words, it’s not the technical requirements that are changing, but rather how people view and evaluate the artistic nature of typography.
Thus, even while following general rules and typographic axioms — like letter size, roundness, x-height, and so on — fonts themselves can take on many forms: from calligraphic to decorative and monospaced. At the same time, their combinations can look stunningly beautiful, as if the designer didn’t just use a pre-made font, but created an actual image — a lettering piece.
Today we want to focus specifically on decorative fonts and creative ideas for combining or styling them in Photoshop. This article might even get a sequel, since there are countless ideas for decoration — and even more ways to use them.
Font Decoration
Decorative fonts have a rather tricky reputation in the world of web design. On one hand, they may look simple; on the other — overly artistic. In any case, using a decorative font is challenging, and you really need to understand which specific type of decoration will suit the project at hand.
For example, the designers at detheme , tequila mockingbird , moetbius , and .earls all used very different styles of decorative fonts. Some of them are beautiful as-is, while others were designed more like standalone images and don’t even exist as actual fonts. Yet, the lettering looks great — and never gives the impression that the web design is outdated or dull.
Lettering
Another beautiful style within typography is lettering. Note: not calligraphy — but lettering, which is created specifically for a particular word or image and nothing else. Unlike a regular font (which is a consistent set of characters following design rules), in lettering, each letter is hand-drawn by the artist. Each letter can have multiple lines, embellishments, and look completely different from the rest in the composition.
In web design, pure lettering is rarely used for main content. More often, you’ll see it in logos or as part of a homepage’s visual design. Designers sometimes replace lettering with handwritten fonts — most of which are drawn on paper, scanned, and processed digitally, or with typefaces that just mimic a handwritten look.
Examples include goldfront , brancottestate , rilke , and hiddensocksclub .
Slab Serifs
Thin, strict serif fonts often symbolize strength and structure in a project — which is why they’re typically combined with fonts of similar tone, not with their opposites. Moreover, they can appear overly serious or even give off a slightly anxious feel. Still, in recent years, these fonts have been used more often — and even slightly embellished.
Take a look at madeinthefuture , nitwinski , and grkfresh . Each one uses bold, dense, serious serif fonts — and they look very compelling. They often enhance the readability of content more than many decorative or modern styles.
Font as an Image
This is another example of how typography can be used not as content but as a core design element. In such cases, the font takes center stage — it's large, textured, with effects like light, blur, glow, shadow, and layering. Usually, these fonts aren't part of the main layout or body text; they serve purely decorative or attention-grabbing purposes.
We found several compelling examples. Sites like rooki.design and nerisson apply this technique beautifully. It’s especially effective when used with gradient effects and careful contrast — not just between the letters and background but also between different parts of the same word. It looks vibrant and artistic.
Type as Illustration
This is a rarer technique, but it’s incredibly striking. Here, the typography itself becomes an illustration. Letters take on shapes, volume, or even animated motion — something that barely resembles conventional text. As a result, users might not even read it at first, but instead view it as a visual or artistic element.
Some examples: pentagram and dymelife . Their sites use text as both a visual and a dynamic tool: letters jump, shift, or stretch depending on interaction. It doesn’t always improve legibility, but it definitely leaves a strong impression.
Overlays and Blending
Another creative idea for working with fonts is using blend modes. You can create layered text or images with a blend or transparency effect. This works especially well when you want the font to “merge” into the background but still be readable.
Examples include sneakypeek and kaipoche . These websites use text overlays that fade into the background image or pattern. The type remains visible, but it's more of a stylistic statement than a purely functional element. You can use opacity, Multiply/Overlay modes, or gradient masks — the goal is to have the typography interact with the visual environment.
Outlined Fonts
A simple but trendy technique is using outlined or stroked fonts — especially sans-serif. They're used both for large headings and sometimes even as part of animated sequences. The key is to ensure the outline contrasts well with the background, so readability is not lost.
Outlined fonts give a very clean and modern feel. You can use CSS to create this effect or just apply it in Photoshop when preparing banners or layouts. workandprogress and WeTransfer's project showcase this approach well. These fonts can also be animated — with the outline appearing gradually or reacting to scroll/mouse movements.
Typography + Animation
Motion is increasingly becoming a key part of modern websites, and typography hasn’t been left out. Now we often see animations not just on buttons or cards but in the text itself. This might include hover effects, shifting letters, fade-ins, scroll-triggered transformations, or even interactive font morphing.
The effect is stunning — especially when the animation is smooth and subtle rather than excessive. Examples include panamaera and hoodzpahdesign . These sites use text animation as a meaningful design element — not just a gimmick — and the result is both stylish and immersive.
Combining Opposites
One of the boldest moves in modern typography is combining completely opposite font styles — like pairing a strict modernist font with an extravagant decorative one. When done well, this contrast creates a fresh, memorable impression.
But this kind of experiment isn’t easy. It’s critical to ensure both fonts are legible and complement rather than clash. Try to balance stroke weight, spacing, and contrast in a way that feels intentional rather than chaotic.
Projects like UXPin Studio and Alright Studio show how to do this well. Their typography feels balanced despite the drastic stylistic differences — it’s like a visual dialogue between two voices.
Conclusion
In 2018 and beyond, typography is no longer just about picking a clean font and setting the right line height. It’s about integrating text into the heart of visual storytelling. Letters can become art, motion, symbols, or structure. And every element — whether it’s a minimal sans-serif or a chaotic hand-drawn logo — should serve a specific mood or function.
Don’t be afraid to break the rules. Typography is evolving. And some of the most exciting design happens where convention ends and imagination begins.
Don’t be afraid to break the rules. Typography is evolving. And some of the most exciting design happens where convention ends and imagination begins. Don’t limit yourself to safe pairings or traditional layouts. The web is a living canvas — and type is your brush.