First impressions are often lasting ones. This applies to the world of web design just as much as it does to our “real” world. A hero image on a homepage can leave a lasting impression, but it is often the typography that ties users to the brand. Before your user has read your message or even a single word, the typography you choose can become an indelible UX feature. It can create that lasting impression.
Words tell a website’s story. Typography, on the other hand, often reflects something about you or your brand. Your choice of typography can elicit a response, turn a user off, or have no noticeable effect. Think of typography as being the tone of voice of your website as you relate your message.
Times Roman, Arial, Calibri, etc., are attractive fonts when used in the right places. Yet, to add a little personality or pizzazz to your site, hand-written fonts are far more interesting. They can be used almost anywhere. And there is such a broad range of free handwritten fonts available that finding the right one is usually not that difficult.
It can be a time-consuming ordeal to find that “just right” hand-written font-style. Hence, we would like to offer some inspirational help – by showing you websites with some distinctive personalities. These are driven in large part by the style of the hand-written typography they use.
At first glance, this decorative text appears to be hand rendered. In truth, it is actually a decorative typeface the Serve Seattle site executes to near perfection.
Notice how it perfectly reinforces the site’s message, whereas a more common sans serif font would not be near as inviting.
Pauline Osmont is an Art Director, Web Designer, and Illustrator in Lyon, France. her page showcases her creative projects using a beautiful hand-written typography positioned squarely on the hero image.
Multiple font sizes and font types can often conspire to convey a message perfectly. The inspiring hand-written font is the driver of Tadah Foods’s mission – promoting the sales of high-quality East Mediterranean cuisine to help fund non-profit organizations.
Sweet Magnolia Gelato
Sweet Magnolia Gelato Co. makes delicious gelatos, sorbets, and other treats in a variety of unique combinations. Their quirky website hints at the variety of offerings and the fact that this business features local and regional ingredients.
The hand-drawn typography and handcrafted design elements are a perfect fit for this company’s brand.
We Are Island
The streamlined minimalist design of the We Are Island website is not only engaging, but provides the perfect backdrop for the use of a calligraphic-style of font.
A particular synergy exists between the image and the typography; a synergy that the guys at Island understand quite well.
Husband and wife team Alexey and Svetlana founded Skylark Learning with the aim of creating products that offer better opportunities to young children through early, fun-based learning. The website typography has the right audience in mind.
Authenticity and commitment to quality is evident in the Austin Eastciders website, which reflects their service to both their employees and their community. These ideals set the stage for enjoying a tasty beverage in the company of good people.
This culture is also reflected in the site’s carefully chosen, beautifully hand-written typography.
Creatures and Features
They have neither experience, nor prior knowledge. All they have is an insane amount of passion, a case of crazies, a love for the arts, and the desire to create a life we love, doing what we love to do.
It’s little wonder Creatures and Features has such a whimsical artistic look, sprinkled thorough with beautiful handwritten typography that totally matches the mood.
The creative portfolio of Mahedine Yahia doesn’t quite fit normal design expectations. Yet, it stands out, with its interactive effects and eye-catching hand-crafted text.
Interaction and a large video are the key highlight of the WinShape Camps website. Compared to other sites in its niche, its design is stellar, and its typography is strongly suggestive of fun and excitement.
Petit Mariage entre Amis
Any wedding-themed brochure, invitation, or website would be lacking something without a pastel or watercolor palette and a handcrafted font. Petit Mariage entre Amis beautifully showcases both.
Most designers will tell you that text and typography not only be beautiful, but can often be the most critical element in a design. Since text is necessary, it is fortunate when it is also a thing of beauty.
Sarah Ray demonstrates this on her site with beautiful typography complementing her illustrations.
Pilar de la Banda
Pilar de la Banda specializes in building brand experiences. On her site, she combines technology and design with passion to create innovative solutions to brand communication problems and needs.
Hand-written typography is combined with useful information to give the Vintage Hope site a retro appearance. Although hand-drawn elements are only used for section headers, they still contribute to the authentic style that typifies this website.
The Production Kitchen
Examples of heavy hand-writing and hand-drawn elements is not widespread, and may or may not represent a trend. Overcrowded and “too artistic” designs such as The Production Kitchen website nevertheless appeal to an audience, although it may be a limited one.
Designers try to achieve a distinctive design without compromising on its user-friendliness. It’s actually not all that hard to do, as the web design of The Ordinary suggests.
Visiting the actual Space Needle is a great experience. Visiting its single page website is as well, with its beautiful loading screen and amazing scroll effect.
The power of gamification is put to good use here to achieve the right user experience. This site is fantastic inspiration for any project requiring a dose of typographical creativity.
Typography has its own personality. And it can transfer that character to the entire website just as imagery can. Your choice of typography has the power to turn a not-out-of-the-ordinary website into a compelling, a relaxing, or suspenseful one.
- Going Up: Vertical Lettering in Web Design
- Making a Statement: The Use of Stacked Text Blocks in Web Design
- Exploring the Elegance of Line Typography in Web Design
- 30 Examples of Large Typography in Web Design
- Exploring the Latest Trends in Web Typography
- Using Images to Enhance the CSS Hover Effect
- Out of the Way: Corner Navigation in Web Design
- 10 Beautiful Examples of Illustration in Web Design