'Content is king', as they say many webmasters, but do not forget that the content of the acts by their appearance. Look that can be modified in many ways to make the website work better. You can change the font, size, color, and text layout. Area that this is a typography.
In this article I will show you what steps to take to make the text on your website looked really good.
At the beginning you should understand what the font. Font PWN according to the dictionary is "kind of magazine for computer or printer." Many people mistakenly or otherwise on the font typeface says "font". Although commonly this concept is understandable, it is erroneous and better use font or typeface. Therefore, in this article you will not find the term "font".
Google Fonts offers hundreds of fonts freely available for use on websites. With so many it is hard to decide which is the best. Selecting font, remember these important aspects:
The text on the website should be mainly clear. Fonts such as Pacifico, or pinyon Scirpt although they look very nice, are terribly difficult to read. Choose a simple font that does not distract from the text and it is understandable at first glance. Of course, do not forget that the typeface was aesthetic and nicely presented on the site.
The same text in 3 different fonts.
Many typefaces looks at first glance attractive and evokes the thought "I got it! This one. " However, not every font will be a nice fit to the page you create. Although visually will look around, remember that the font has its own character and affects how your page will be received. The same text written in two different typefaces magazine can carry a completely different content.
Choosing the typeface, remember two important aspects, that is, who is a reader and what the text has to pass each other.
Interesting and commonly used fonts can be found on page typewolf.com, but remember that the choice is much greater. To see how a piece of text is presented in a font, you can use wordmark.it.
And remember, if you do not create pages kindergartens or toy store to forget about Comic Sans.Nawet if you create any of these pages, think twice if it's the best choice!
Why this is not a good choice, you can learn to comicsanscriminal.com.
Not every font is suitable for use on the website in Polish. Some simply do not have a case of tails, dots and dashes, so often used in our native language.
To make sure that the font that you are no Polish characters during a search on Google Fonts, select the filter that will show you only fonts from Latin Extended.
Adding the font to the page, be sure to select Latin Extended.
How to add font from Google Font to websites created in WebWave learn in the tutorial.
When you've selected a font, you may want to spice up a web page by selecting it to steam. Then use one font for example. In the menu and footer, and the second to use the presentation of the text. You can use the tool typegenius.com that the selected text cut propose a few. Interesting connections fonts you can look at these pages:
Make sure that the additional font you choose has the Polish characters!
How Your call can check tool webfontblender.
Remember that counts most of all your mind, and if the proposed combination you do not like it, it is not in use. You can do your such that you deem appropriate. You can also limit ourselves to one font on a page.
In addition to choosing the right font you can still tinker with the other visual elements of the text.
An important attribute of the text is its size. To website it was, as clear as possible should set the appropriate size for headers and plain text. Slightly different sizes look good on computers and other mobile devices. Some people prefer a big headlines, others a little less. Below a couple of proposals for the size, that look good and are very clear:
|H1||48 px||42 px||32 px||32 px|
|H2||36 px||26 px||26 px||24 px|
|H3||28 px||20 px||22 px||18 px|
|normal text||16 px||16 px||16 px||16 px|
The structure of the headings on the website for desktop and mobile
If you are a supporter of smaller fonts, then you can start with a smaller counts px for plain text and choose the following headers proportionally. For some time It is common, however, that 16px is the optimal size for text on web pages and this definitely recommend it.
Try also to lines of text have the correct length. A line of text is easy to read, about 60-75 characters on the computer (yes I know, do not adhere to their own guidelines), and 35-40 on the smartphone. If a line of text will be longer, the reader will have trouble focusing the eyes on the text. If the line is shorter, the reader too often will need to jump eyes from the beginning to the end of the line, resulting in his tired eyes.
The text color it should be adapted to the background color. On the bright side, I recommend black, but not always. Sometimes black is able to look at very hard, especially when the color of the page is very clear. You can then turn black to gray, which looks much lighter and not so much in contrast with the bright background. On a dark background, use clear text. Preferably white or very light gray.
Examples of text colors depending on the background.
The text color can be used to attract attention to important content, eg. Header. You can use a light color on a dark background for the header, as is done in this article that stood out and he drew attention to himself. But remember to always choose colors from a palette of colors that you used on the page. Too much color makes the page a motley and unpleasant to the eye.
Well drafted text has a structure consisting of a header H1, H2, H3 and content standard. Such a structure of the text organizes it and makes it easy to navigate, making it more user friendly. Remember, too, that the text formatted in this way is better understood by search engines.
Conclusion of the key phrases in the headlines has a positive impact on SEO. Do not go overboard with this. Remember that the text is primarily for the reader and for him to be understood. Even if you land on the first page of Google search results, but your site will be rejected by the Internet, it does not reference any of the benefits.
A good habit is to highlight key words or text fragments, eg. Using bold. The user then knows what is important and quickly reviewing your article, you can easily capture the most important passages and determine if it is worth reading in its entirety.
Text needs space. Website swamped the text is not very friendly to the eye and discourages browsing. Keep a space between content, and other page elements. Add space between paragraphs and away headers from paragraphs putting a blank line. Yes formatted text much better to read and easier to navigate them.
Text alignment has a very large impact on readability and the appearance of the entire page.
Almost always the best solution is to align the text to the left side, far less Justify the text, and if you have a problem, it means that the text should be left-aligned.
Align Right recommend to leave the gurus of design, because it is not easy to use it to get a nice effect.
Sometimes you can not afford to center the part of the text, particularly well suited to the:
Users online read the pattern F. This means that often do not read your text in full. Their attention will focus on the first two paragraphs, because there you include the most important information for the reader. Below are heatmapy that show where the focus is catching readers while browsing the site.
Heatmaps for pattern F
Pattern F can draw the following conclusions:
Andrew Szelemetko CCO / Growth Hacker
For more than five years working at the interface between technology / customer. I'm interested in how a person use of technology and how can this process faster and easier. You can find me Google+ and Facebook .
Free time I spend on the bike and mostly outdoors.
Copyright © 2011 — 2018
All Rights Reserved
YOU SHOULD USE WEBWAVE TOO!
Try - it's free
HELP & SUPPORT