Web Font Design Fantasy Tour

(Shavaughn haack Timmliu & Charrywang translation Sevenshao correction Check the original reproduced please indicate the source)

First impressions are usually an ongoing impression. Whether you realize it or not, your layout can help users build an experience before they even start reading a word or click a button. The layout is not just about a story, it tells the user is behind the site and what the people behind it are doing. The processing of the font creates an atmosphere that also causes recall as the tone of the voice.

You need to ask yourself what you want to say and how you want to express it. Think about the user: What do you want them to feel and experience when the page loads? Layout to establish a communication model, but also to express the personality of a website. The choice of fonts will determine how people respond to your site.

The following websites have very obvious personalities, most of them are created by layout. Admittedly, sometimes they are not perfect (unfortunately, performance is often a problem), but they attract users by using fonts to generate interest. Good Web layout is not only a good visual processing, but also pay attention to speed. Many designers completely ignore performance. Please note: These sites are not tested on older browsers or mobile devices. Of course this is not the gist of this article. Instead, we'll look at the interesting typography and the innovative use of fonts at close range.

Matt Luckhurst
This Web page is also fun to be colorful. The first thing to look at is a lively line of letters, followed by a seemingly randomly dispersed letter spelling out Matt's name. The hover effect shows an example picture of each item, which is very effective, almost out of the letter limit. This site shows that fonts can be merged into the design as planar elements. Mixed with multicolored lined letters that break the classics, we may be able to find ideas more clearly from serif fonts.

Playful
Wow, this site is really humorous! The tone of the site is not based solely on the character of the font, but on the way it is formatted. It breaks the order of our regular communication. Usually you see an axially symmetrical layout in a printed poster, which is usually impressive. In this site, the choice of fonts is not very personalized decorative or very fun decorative fonts, it is a very simple use of sans serif fonts. A great background design tactile experience that guides the direction of reading and the movement of the head from side to side when the user reads the text of the site.

Atelier
All parts of the site deserve attention. The entire page is grouped together by different elements to have a dynamic. The website logo is a wide but elegant typeface that creates a design tone. The sense of movement is created by a slanted line that is consistent with the tilt of the first letter "a" in the logo, creating the rhythm of the site. The slide preview captures your eyeballs deeply, and the pictures make you feel unfettered. However, the background image of this site actually has: 2560*5350 pixel, 2.4MB, ouch!

Cirp
This site, designed for vineyards, is unique and innovative, designed like an old-fashioned poster. This beautiful website design successfully found a feeling of wine. I like the shadow behind the "Russian River" that follows the movement of your mouse and creates motion on an additional static page. The main disadvantage of this place is that, in a sense, text is embedded in the site as an image, may make the text can not copy and paste. And, of course, similar designs are created that require not less than 3.4 MB and 43 HTTP requests.

Max Di Capua
The layout and typography are mixed together by a set of template systems, usually with several parts overlapping. The method of this layout is very refreshing because it is inflexible and very easy to change. Typography is the same feeling, because they all have a lot of spacing, whether it's a large amount of text or a dense text. Title and descriptive text, which appears next to the artwork in an easy-to-read, sans-serif font.

Rijksmuseum
A very common font of large letters within the entire screen range, but also extends to the entire page. Makes "Rijksmuseum" look much larger than reality. The home page shows the museum's content by looping through beautiful pictures. Navigation is also interesting: when you click, it slides down and lets you select subdirectories. The size of the entire site is only 955KB and 31 HTTP requests--the optimizations are great.

I shot Him
The website of the design studio greets you with a picture of you welcoming you, which is fresh. Users immediately have a feeling of being in these designer studios. There is a sense of strangeness, but at the same time feel very real and reliable. The font is the focus, but not too noisy or too depressing. I love the way they come out of the perfect computer to show their own unique side. Although this page is not as good as the interaction you expect, the studio's personality is perfectly displayed in this picture, which is deep and substantive. Handwriting makes the site look very personal, and allows users to create a psychological expectation for the design of the studio. All of the fonts in this site, in addition to the welcome language, are enhanced with ease but creativity, short text but direct purpose. Another interesting area is navigation: It's hidden on the landing page, but you can see it when you hover over an icon. When you slide to the bottom, the navigation is still fixed at the top.

Banger ' s
This site has a lot of characters. Banger's is a down-to-earth little restaurant focused on beer and sausage. Its story looks like it was painted on a gray card box, and their food was transported through the box. Its logo looks like a hand-painted marker, it's unique, it doesn't seem perfect, but everything else seems to match it. Fixed navigation bar is very good when you slide up and down, the effect of hover (the title turns red) is very simple and effective. Fonts contribute a lot to the whole visual identity, and the graphics are great, but the performance is not particularly good. The biggest drawback is that the homepage has 7.2mb,254 HTTP requests. To be honest, that's a little unacceptable.

Caava Design
The Caava design uses sans serif fonts to make this site neat and clean. "The good designs are good business (great business Value)" uses a large font size, is very obvious and easy to read, the following is an introduction to italic. The entire site's fonts are used for purposeful purposes and do not need to be noisy, and the content of the site is not inferior to the entire file. However, small text may be too small for reading. and the grid spacing of typesetting is very messy. The strong contrast of the font size also makes users lose confidence when they read the entire site. Again, the entire vision does not match the 5.7mb,90 HTTP request.

The Black Sparrow
This site looks a bit retro, a lot of fonts make this site appear eclectic, there is a very simple feeling. The theme of this mini bar lounge is based on Chaeles Bukowski's novel, combining some literary elements with the ancient typewriter typeface logo. I like its navigation bar, when you hover over the top of the mouse, those small icons to rotate the way. The site really has a sense of the 1930s, and the Sparrows ' illustrations make it feel stronger. However, in space permitting, the font size is slightly smaller and less readable.

Nocturnal
The beautiful and thick lined fonts here look neat, clean, big and easy to read. The site is very spacious, so the whole site has a lot of breathing space. Simple, neat layouts and the handling of fonts allow users to quickly make a comprehensive and simple impression of the designer's work. This site is very efficient as a collection of design works. It didn't do anything special, just focus on the artist's work. Sometimes these are the things that need to be shown most.

Marie Guillaumet
Handwriting fonts make this personal site look very beautiful and personality. It also gives people a designer's entire body to put into this work process. A strong sense of individuality and uniqueness accompanied by the designer, turned around is her work. Handwritten fonts also follow hand-painted icons, with added letters, which almost feel like we are staring at her visual diary, understanding the individual part of the designer, which slowly leads to potential customers.

Vintage Hopenhagen
The title of this site looks like a rough mark with a very thick brush. The font is amazingly coarse and expressive. The background is a beautiful picture. It gives the user a sense of openness and freedom, while portraying the characteristics of the organization. Vintage Hopenhagen by borrowing ancient porcelain to raise money for the unfortunate people of Malawi, the whole vision looks exciting, happy and positive. At the same time the Web site only 1MB and 40 HTTP requests, which is very admirable.

Browser Awareness Day
This site is loaded down, users can be guided to use, making the site fun, fast, and secure. Use decorative fonts on each side of each keyword. Each letter is a clear idea, which captures the user's attention and lures the user down to see more content. The small label on the right uses a very comic writing font that is added to this very funny website. When you're on the bottom, the same comic writing font is used on the site with another interesting font.

Rob Edwards
The font of this website is very beautiful. This is part of the design, but it also gives visitors a psychological anticipation of the designer's work. The "Hi there" is huge and captures the user's attention. Other decorative circus fonts are very eye-catching and interesting. You don't see this every day, it's very effective as an introduction. The rest of the entire site feels a little bit inappropriate, especially in space and contrast.

82nd&fifth
The site is all about vision, and its typography proves it. The sans serif font is very elegant and lightweight, and the background color block for the title setting is very delicate. For this site, fonts are not the focus, but powerful photo support. The whole site is very dynamic, and when you slide down, some small blocks are loaded. The site also has an apparently visible navigation bar, and when the mouse hovers over it, a black navigation bar exposes the entire menu. The entire site is relevant to every part of the artwork it shows. The disadvantage is that there are 6.4MB and 120 times HTTP requests.

ECC lighting&furniture
Whether you like it or not, Helvetica occupies the main stage of the site. The classification button of the website is very lenient, which captures the user's attention firmly. The graphic design of this website is very classic, clean and minimalist. The text of the vertical navigation bar at the top right of the site creates a very interesting effect, but it still allows the user to focus on the main category navigation. This is very interesting only when the mouse hovers over the picture area.

Marianne Brandt
What do you expect when you hear the name "Marianne Brandt"? How do you convert it to a Web site? Usually, a Bauhaus level of focus on function is the key. This site really has the Bauhaus flavor, the flat color as well as the Futura font. The whole aesthetic is minimalist, clean but absolutely inflexible.

What captures my attention is the "Thanks/danke (English and German)" piece. Which language you have set determines which "thanks" is shown in red. This is a great idea for those websites that support multiple languages. Different choices remind me of the different color blocks in different areas, which is a good way to classify the information in the website. Color, geometric styling, and the entire typeface are all Bauhaus.

Nate Navasca.
The site has a little tradition of font and style selection. Use a thick, sans-serif body as the caption, a serif font as the content text. If it's not bad, why fix it, you say? Designers focus on the functionality and simplicity of the site, and it really works.

Ewket
This is a simple flat design website. With the most basic styling design, like the first layer of oil painting. Ewket is committed to the cause of basic education in Ethiopia. The font used for the site content Andale Mono is not what you expect, but it can be read. The font is a sharp, sans-serif typeface with an empty feel. Ewket is a grassroots project, so its entire design looks very basic and simple, and also reflects its function. However, it does not respond well to its performance, 4.6MB and 58 HTTP requests seem a bit unnecessary redundancy.

The Re-class
I like its nameplate, it creates an old-fashioned cinema feeling. This font has an old feeling in contrast to the article's serif font. This site has a simple, clean and very complex old movie experience. The design of the navigation bar allows for a good application of the top space. Once the site's visual identity is set up with its nameplate, when you hover your mouse over it, different classifieds will appear in the nameplate position.

The Whig
This restaurant is a place where you can sit down, relax, and have a drink with your little friends. Medula One font is used to interpret such a feeling. Instead of being overly decorated, this sans-serif font has a medieval feel. It's very friendly without affectation, and it's a good backdrop for this little bar.

Find&form
Clean, monochrome aesthetic features, this site allows content text to be minimized. The layout of the website is very concise and low-key, let the picture itself to say. Monochrome fonts look a little bit special here, but it conveys the team's slogan that "the Digital world longs for an old campus craft". This kind of aesthetic is the same age as ours. Another interesting thing is that when you slide down to the bottom of the site, the navigation bar moves horizontally to the right, leaving some room for the rest of the site.

Carrera
The design of Carrera website has an eternal charm, just as its product is true and eternal. The design of the website should conform to the temperament of product design. The glasses company cited one of its goals as "a perfect balance between tradition and fashion." Simple, bold uppercase font to achieve this, the traditional feeling is not outdated or outdated. Although the font and logo style is very different, but very bold and eye-catching. At the same time, it is worth mentioning that the interesting mouse hover effect is also a unique part of the entire site.

Myfelt
The font style used in this site is very friendly and warm, and the copy illustrations are consistent with the product temperament. All these elements are added together to convey the same message. The point that I am interested in this site is that the points on the carpet are incorporated into the logo and nameplate.

Vogue
Designer Claus Eggers Sørensen design Playfair display font, bringing a bold but not publicity style. The elegant lining is in line with Vogue's brand. For designers, it looks better to put the font in a larger font size.

All Saints pence
There are many ways to use fonts to achieve traditional and elegant styles, and the site is just as good as mixing lines and a small number of serif. The Garamond Premier Pro display font looks modern and sophisticated, perfect for matching body text, and suitable for vineyards and wines.

Evening Edition
The typeface of the nameplate is consistent with the traditional print newspaper. It gives a sense of authority and a distinction between news sources and tabloids.

Served MCR
This interesting graffiti-style site is for a table tennis game. Typography looks primitive in hand-drawn style. In some areas, there are elements that are animated or animated backgrounds. Animation is not commonly used in web design, but it attracts users ' attention. A registered entry is an example of a clear and prominent text. Because the text is not many, this kind of typesetting is suitable, still can maintain the usability of the website. However, the performance of the page is bad, the page size has a 7.5mb,175 HTTP request. Whether on the computer or on the mobile side, the main background image has 2032*4761 pixels, 2.2MB size.

Enso
Large, bold, fully capitalized sans serif, as if it were shouting. However, ENSO also uses soft tones to reconcile this bold layout-though yellow is a bit hard to read. The layout is novel and interesting; the designer wants you to notice the layout of the page from top to bottom and scroll down to see all the information. This is a very clever approach, because navigation is scattered around the page in bright pink text. Logo at the top of the page as the home button, when the mouse slide out of the whole word.

Crafting Type
The site is about style design, so its layout is to sell itself. On the logo, the contrast between the slender uppercase "crafting" and the thick lowercase "type" creates a visual balance. Text uses large font size to ensure readability. Serif fonts and a simple and generous layout also contribute to readability.

Nautilus
This beautiful site is neat, clean and easy to navigate. Typography plays a big role, and three of the fonts used come from the same series. This is a good way to differentiate styles, to be consistent and not to interfere with beauty. Unfortunately, this page layout also has its price: 12.6MB size and 73 HTTP requests, and two oversized images, 3.5MB and 2.4MB respectively.

Kick My Zen
The first thing you see on this page is this thick bold "Kick my Zen". Thin fonts (called the kg how Many times) are contrasted with other bold styles in their charming handwriting style. This beautifully designed web site is an easy, informal way to test how much money you've wasted on bad habits, and the site doesn't take up a lot of network bandwidth. Including all the pictures on the page, it is only 1.2MB, although the initial load will be 161 times HTTP requests, more content only when needed to load.

Monocle
Monocle is a beautiful website with classic quality. It uses a different number of points in the lining and not lining the body, it looks simple and generous. Monocle is a global news website focused on international affairs, business, culture and design. The layout is innovative, but it also provides the things that all users need. Categories are loaded with labels, and subcategories are used to reduce the level of information.

Rezo Zero
Julien Blanchet's custom fonts are unique and compelling. It establishes a brand identity and uses mint green on a monochrome web site background. This kind of font is neither excessive use nor full use, but with the beautiful interpretation of the logo it.

More Sleep
Simple, but friendly and seductive! This is the first time I have visited the website feeling. Large size and slightly rounded corners have a friendly feeling. Typewriter-style fonts are used for description and interpretation, with a mellow, soft, warm ambience.

Lenta
Lenta is a Russian news website. The magic is how this type of image quality guides you and affects your view of the site and its content. The identity of any news website is established by its nameplate. A clean, sans-serif font is used here to convey the authority of the news source in bold style. This font is still valid when text is translated into other languages. With the traditional layout of the news, the entire site's articles and billboards use serif fonts.

Pixel Recess
Pixel recess uses sans-serif fonts Adelle Sans, which are neat and clear, and are great for on-screen display. What's more intriguing, however, is the title font, Zeitgeist, which is a bit distorted, pixel-or even a little blurry-and feels the same side of the playground in the upper left corner. The pixel is traditionally considered a wrong use, but because the rest of the site is sharp, it attracts attention-indeed, it's a clever idea.

It's not just about what you say, but how you say it, right? Depending on your purpose, we can try more and be more creative in typography. We can boldly use large characters, bold, or novel and unique handwriting. We should always remember that fonts have to be readable, because if no one can read them, there is nothing to show off. If you set the rhyme and style, the font can make so many designs.

Beautiful fonts and large areas of the background picture is very easy to distract people. But we can't ignore performance. Custom Web fonts can slow down loading, so let's find a way to fix this.

Finally, if you're exploring a much more interesting site for fonts, be sure to contact Typewolf and font in.

Source: http://mxd.tencent.com