In recent years, we've witnessed a revival of handwritten text and calligraphy in pop culture. Naturally, this has also influenced web design. But what makes calligraphy so special, and why do web designers use it in their projects—even though, typically, websites only use two standard fonts for content? What is so unusual about typography that calligraphy and lettering bring to the table?
To understand everything, let’s define the difference between lettering and calligraphy. Lettering is a general term for the process of creating and drawing text. It is often referred to as “drawing” letters. This may include illustrated letters, embroidered text, or artistic treatment. Calligraphy, however, is more about the style of writing and crafting a text. Though there’s still an argument that clearly distinguishes lettering from calligraphy. Calligraphy is often associated with a single, consistent movement or style used to create the entire alphabet.
Fundamental Knowledge
Using a calligraphic font for headlines, logos, or small content blocks is easy, popular, and often doesn’t require the designer to dive deep into calligraphy itself. But by digging into the past and studying types of structures and writing, one can take a more conscious and creative approach to using calligraphy in a project. There are many styles of calligraphy, all different, so we believe it’s useful to be able to sort through this information a bit.
In 2012, Chavelli Tsui (a graduate of Cooper Type ) said: “To improve documents and blogs using handwritten text, one must understand letterforms and how they are created. Why are some parts of a letter thick and others thin? Knowing the history of writing is not enough. You must understand the tools that shaped writing styles. Understanding letterforms is especially important for creatives, no matter the tool—pencil, pen, brush, or Bézier curve.” The toolkit for calligraphy and lettering is indeed impressive. Especially since this creativity can’t be based solely on Photoshop work.
When we begin to write letters, we typically know what they look like, but don’t truly imagine how they are formed in calligraphy. For example, a lowercase “g” can take on many forms. As users, we consume content very quickly. The same applies to handwriting. Our goal is to convey information—not to distract from the logo, menu, sections, icons, or other elements. That’s why it’s important to pay attention to the basic architecture of calligraphic letters, so that when using lettering or fonts on a site, they don’t draw attention away from the main content and allow for effective communication.
In calligraphy, it’s easier to study common parts among groups of letters, which means analyzing the order and direction of the strokes that form writing. Combining the goal and the means of writing allows you to understand whether a lowercase “g” needs an “ear” and what it should look like. Think of serifs in fonts—they improve readability at small sizes. Similarly, small strokes in calligraphy are not just decorative elements.
The Use of Calligraphy
As we mentioned earlier, one of the main goals of lettering and stylistic writing is the fast and effective delivery of information. A company name can be handwritten in a fancy, ornate way for a logo—but will users be able to read it? There’s no point in using calligraphy if every letter has to be drawn manually (i.e., lettering or modifying each glyph). That’s why there are so many ready-made calligraphic fonts with unique character—making them effective tools for communication and visual clarity.
Still, within the main body of a webpage, handwritten text is rarely used. That’s because heavy use of calligraphy lacks economic, artistic, or user-focused sense. In today’s world, people don’t typically write by hand, so going overboard on websites isn’t necessary. However, as a design element, calligraphy is beautiful and irreplaceable.
Calligraphy is used in headings, logos, and titles—creating contrast between standardized uniform letters and handwritten styles. Fewer glyphs are needed where the reader’s eye might get confused by inconsistent shapes and where our subconscious expects uniformity. For example, if you're listing services in a column with icons, using simple calligraphy is fine. It helps highlight and draw attention. But if you're describing the company, contact info, or service details—calligraphy is out of place.
When the structure is small—like a logo—there’s more room for creativity. Such inspiration comes from early 20th-century posters and advertisements. At that time, drawing and handwriting skills offered great opportunities for earning and employment. Here’s a small ad published in The Penman magazine in September 1900.
Notice how simple the composition is and how clearly the information is presented—making it easy to absorb while preserving uniqueness and creative flair. It combines various writing styles, reflecting their origins from different types of calligraphy.
When we look at typography, we’re really seeing echoes of calligraphic writing systems that were developed over hundreds—or even thousands—of years. By studying the origins of these styles, we can better understand how to combine them thoughtfully, recognize character, and design text structures more effectively.
Calligraphy in Web Design
Typography is, in a sense, one of the most powerful tools in mass communication. Its style can say a lot about the market or target audience of a business or organization, indicate professionalism, and either build trust or push users away. Calligraphy doesn’t suit every business—but in certain cases, it can be highly effective.
Satoshi Kuroda (a film artist and art director) uses calligraphy on his website in headings, section titles, and the menu. The homepage also features large handwritten letters.
So Interactive —the combination of yellow calligraphy on a nearly black background gives the site elegance and sophistication. The calligraphy style is extremely simple, but it looks light and graceful—clear enough for users to read the ornate letters.
The website for Publik Coffee Roasters decided to combine several calligraphy styles. One font is used for the logo, and another appears in headlines across the site. However, the main content remains written in a standard, strict font.
The designers behind Lapa-Tuki chose not a traditional calligraphy style, but something between standard and handwritten. Clean and readable, this font is used throughout the site, while some pieces of content are written in a regular typeface.
Other interesting examples include Love Beets, Hublot Loves Football, Bernard Magrez (a French wine producer), Pauline Osmont, and Amazee Labs. All of them—whether personal sites or company websites—have found successful ways to use calligraphy.
Photoshop
Working with calligraphy isn’t easy. If your goal is to write a few words, picking a font and leaving the glyphs as-is is enough. But if you want to go deeper, study lettering, and create something original—you’ll need to draw manually with markers and brushes, study stroke combinations and thickness, and more. We won’t go into all of that now, but let’s take a look at a few useful techniques. They’re not overly complex or new, but they mix effects and glyphs in creative ways—useful for headers, logos, and titles.
Option 1. We used the Boyarsky font and typed a phrase. Then we right-clicked the text layer in the Layers panel and selected "Convert to Shape." Using the Pen Tool and Ctrl (to move points) and Alt (to adjust handles), we modified the existing glyph outlines into something more custom. You can add or delete anchor points as needed. This way, you can create something new and unique based on a font.
This approach is challenging—you need a clear vision of the result and strong skills with paths and the Pen Tool. It helps to prepare a sketch on paper so you can use it as a base or scan it in and trace over it.
Option 2. Take a standard hard round brush and rotate it to 38–40 degrees in the brush settings. Reduce thickness by about 20%. Then, draw your script freely on a blank layer—think back to handwriting classes and add decorative elements. You can also change brush angle and width as needed.
This isn’t necessarily easier. Calligraphy requires smooth motion, and if you lack experience drawing with a mouse, the result may be shaky or jagged. A graphics tablet can help, letting you draw with a stylus as naturally as with a pen—producing smoother handwritten text.
Option 3. Photoshop includes built-in calligraphy brushes. By selecting the right one, you can also draw script. These brushes produce natural thick-thin stroke variation as you draw, even before adjusting settings.
Like in Option 2, drawing with a mouse may be difficult if you don’t have much practice. It’s often easier to draw by hand on paper, scan the result, and refine it digitally. Or simply choose an existing font.
Effects for Handwritten Letters
Writing a word or title is just part of the task. Sometimes, you want to make it truly beautiful. Choose a font and write a word or letter. Modify it manually or convert it to a smart object. In our example, we edited it slightly, and the layer automatically became a smart object.
Choose a colorful background image. Open it in Photoshop and copy it into your working file. Now: activate the image layer, then Ctrl+click the text layer to load its selection.
Add a mask to the image layer and you'll see the letter appear. Unlink the mask from the image and hide the original text layer. You can move the image background freely to choose the best position and color.
Once you're happy with it, right-click on the mask and select “Apply Layer Mask.” You’ll now have a rasterized letter filled with texture.
Open Filter → Liquify . Use the Forward Warp Tool to gently distort the letter background. Adjust brush size with [ and ] and add flourishes if desired. Click OK.
This is what you get. Some may suggest using the Smudge Tool—but if you look closely, it blurs the edges too much. That’s the key difference: Liquify preserves sharpness, while Smudge blurs even with different brush settings.
So if something looks uneven in Liquify, it’s best to fix it using Liquify again—not Smudge or Brush tools.
Conclusion
Calligraphy, as a writing style, is arguably one of the most difficult to master. You can study it—but without artistic intuition and visual thinking, creating original lettering is unlikely. However, you can still modify fonts and apply effects. It all depends on your goal. If you just want ornate letters, find a font and type. If you want something creative—you’ll need to experiment and “go wild” in Photoshop.
Either way, calligraphy continues to be used in web design. Not too often, not too rarely—it’s specific. Just like street art, small fonts, or neon colors. But all of them have their place in web design. So experimenting and adding new skills is never a waste. You never know when they’ll come in handy.