Before we start I have a question for you. When you scrolling through a website, what is your expectation? Some one talks good content, eye catching images or like some cool colors. Yes I agreed all of this. But I mostly believe that all the above mentioned things are arranged in a good manner. That’s the importance of learning How to Make Good Typography in Web Design.
I recently saw that some of websites have huge amount of data’s are placed in it. As the user point of view, it is difficult to read and understand. This will cause visitors to return from the website. That also leads degrading from search engines. Today we will talk about what is typography, importance of typography in web design and also look some descent typography examples.
Typography Basics
First look What is Typography?. Simply typography is a creative digital art that by arranging text to make eye catching designs. A better typography only we can make by using good fonts, type faces, better font size etc.
Before go to How to Make Good Typography in Web Design, I will explain fonts and there features. A font is a displayable text or any other characters in a specific style and size. There are mainly 2 Types of fonts.
- Serif Font
- San-Serif Font
Serif Fonts
Serif fonts are fonts that have extra line or shapes in their text edges. Fonts are commonly used in headings. Serif fonts are rarely used by designers. In English news papers you can see this type of fonts. Examples are Times New roman, Courier, Garamond Etc.
San-Serif Fonts
San-Serif fonts are a type of fonts that style is flat and there is no extra style or shapes in text edges. This are widely used in current time. Arial, Impact, Helvetica are the examples of San-serif fonts. These are default fonts in system that are available. Mostly Designers are like this kind of fonts and used in their projects.
Color is also has an important role in Typography. Good contrasting text are easy to read for visitors. It means differentiating text from background. An example we can use, white text in a black background , yellow text in a blue background or vice versa. Designers have some knowledge in basic color theory.
Typography in Web Design: Importance and Influence of Fonts
The right fonts is the key to make a good typography. San- serif fonts are prefer most commonly. But this is up to you. In some kind of vintage fashion you can also choose serif fonts.
The important thing is that you can minimize the use of fonts by one or two. Make this fonts are the main fonts in your website. For better typography you can use different font sizes and font styles. Font sizes can be measured by following font units
- em
- px
- pt
The size for text should be at least 16px for easy reading. If it is print 12px is the standard readable size for A4 paper. The 16px is only for paragraphs not for headings. We can integrate fonts in our website by using Google Fonts, Adobe TypeKit or you can convert local system fonts into web fonts.
You should also make better line height in paragraphs. Line height is depend on fonts. Each fonts have different line height. The only thing is that don’t make text being congested.
One of the other important thing is that, text content should be in multiple paragraphs. Each paragraph contains three to four sentences. This will also result better user experience.
Also you should make appropriate size for text content. For example your site offers some kind of benefits to the customers, then it will be highlighted much as possible. Highlighting includes bold typography and appropriate colors or may be some cool animations. This will result customer to stay on your website.
1. Font Size
I already said that font size is the important factor in typography. Use font size wisely on your text block. Important content may highlighted as possible. Highlighting by increase the font size or by using different font styles.
Considering the above image, you can see that a banner that make some offer to the customer. So there is used some font size variation and some color changes. When entering a customer to this site, most probably the customer will see the banner. Because of the nice typography and attracting color that used in banner.
It is also mentioning some other headings in same size. Because, it will tell the customer to this is the main category. Also they have sub category inside the main category. Means this is child category for the particular item.
Font size is depends on the font you have chosen. In my suggestion are follows. This is only an option. when comes to responsive design it may be changed according to devices.
h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 16px; }2. Use better Color Contrast
What is color contrast and how it is used?
Color contrast is a difference in brightness between background and font. It means that Good color contrasted may differentiate between background and text.
Web designers must have some knowledge in color theory. To create a good design you need to understand how colors are formed and how they relate to each other for creating beautiful Art work.
Color wheels get an idea about how the color are related to each other and how they can be combined together to make different color. Each color represent or related to our mood. So the color selection makes a huge impact in make Good Typography in Web Design.
3. Avoid Full Caps in Paragraphs
In paragraphs try to avoid full caps. Because all the letter in full caps may result less readability. Using full caps in headings is ok for that. But in content section, it makes hard to read. If any of the words or sentence have important than others, try to make differentiate from others like changing colors, make font size bigger etc.
Best and easy for reading paragraph by using sentence case format.
4. Avoid Flashy Animations
Animations can make a website more live. But sometimes it makes a negative impact. Not all customers who visit a website are the same. If the animations suddenly flicker, it may not be readable to everyone. So when we create a website, our design should be designed to be accessible to anyone.
Use some standard animation for your text. It may result nice UI experience as a user. There are some online libraries that provide cool animations.
Follow the above mentioned link and read the documentation for how to do this in your website.
5. Paragraph Splitting
Each paragraph that contain 10 or more sentence may hard to read. A good paragraph contain 3 to 4 sentences. Also you try to make important points in bold style or make some color variations. This will help you to hook the customer in particular areas in paragraph.
Another important factor is that letter spacing in paragraph. Don’t make text as too much congested. Because it will also result negative impact on customer point of view. If we increase or decrease the font size, then it will automatically reflect in letter spacing. If font size increases then letter-spacing decreases and if font size decreases, letter-spacing is increases.
Typography in Web Design: Some Descent Typography Examples
Use Website Typography Generator for Make Good Typography in Web Design
Website Typography generator is the online tools that help to create typography in your websites. It will lets designers like you very quickly and easily create consistent typography styling and spacing live, in the web browser.
In this tool also we can see that how the text will appear in desktop and mobile devices. You can pick the fonts, define font size, adjusting their space etc. The main feature is that you can export this styling as CSS file. But this only in paid version.
Website Typography Generator tool
Conclusion
I think you get a useful information by reading 5 Secret Tips on How to Make Good Typography in Web Design: As concluding I remind for you some important points. Typography plays a major role in web site designing. A good website is the sum of well typography + Great color combinations + Good performance + Great contents.
In typography area you focus on
- Font Size
- Use better Color contrast
- Avoid full caps in paragraphs
- Avoid flashy animations
- Splitting text as paragraph
If you found this content is valuable, please make your love by share the content to others. Also don’t forget to comment.
Freelance web designer and developer from Kerala
