In 2006, Oliver Reichenstein wrote the article "95% of Web Design is Typography", which was one of the most controversial articles of the year. As Reichenstein puts it in the article: "Web design is not just about picking and using beautiful fonts, it's more about how we use them in our designs."
1. Bold typography above the fold
Oversized, shocking, direct, non-dramatic above-the-fold text is probably the most prominent use of text in recent years. The oversized images commonly found on the fold are replaced by oversized text. These titles are closely related to the theme, brand or information, and the visual effects presented through the oversized size are not much better.
The effect As you can see, typography has become the most eye-catching presence on the web. For example , in the first screen of six white letters are presented in a striking way on a black background, with strong contrast.
Font used: Dharma Gothic Heavy
The European creative design company s website uses a more condensed, narrow white font on the website, with colorful animation elements to create a stylish feel.
Font used: Custom (Souffl Web)
2. Use elegant serif fonts
Traditional serif fonts have elegant features, and designers are increasingly using serif fonts in web pages to create an elegant and graceful atmosphere.
Often, designers highlight the most important parts of a web page, such as titles or descriptions, with the help of popular serif fonts like Calluna and Minion.
Behind the pages of , designers greet users with a serif font above the fold.
Fonts used: Arno Pro and Proxima Nova
Fonts used: Miller Disp, Lt
3. Straightforward plain text
There are fancy and diverse visual designs, and naturally there are designs that return to the basics and pursue natural and straightforward designs. The same is true in text layout.
's website called Word is to independently render the display effect of text on the web page:
Font used: Browser default font
Jackson wrote on his website: "Text is the most powerful tool in the web". Designing web pages with text is not an easy task, but when done well, users won't even realize the lack of images. .
Copenhagen-based design agency filled their homepage with simple, straightforward text to present their work:
Font used: Maison Neue
A picture is worth a thousand words, but text is actually more accurate in controlling information.
is a freelance writer who uses only text to present content on his website. This website features a text-only visual design and interaction to engage users with the help of interactive elements.
Font used: Work Sans
's portfolio website, he also uses plain text to build visuals, but he uses the simplest characters, weights and color variations to decorate.
Font used: custom
4. Use monospaced fonts
Monospaced fonts are highly functional b2b data and are often used in densely populated situations, such as code or articles. It seems that monospace fonts themselves have a retro texture, and today’s popularity in the designed a captivating portfolio website that uses runaway effects and monospaced fonts to create brutish visuals.
Font used: Space Mono
website also uses monospaced fonts to create a gritty texture.
Fonts used: Titling Gothic, Space Mono
5. Use Highlights to Appeal
It’s also a good way to use highlighting to build a hierarchy of content, which helps visitors navigate and grasp key information.
is a design agency from San Francisco. Due to the long-winded content on the homepage, in order to let users grasp the key points, they used a fluorescent green highlight logo.