'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:


1. Clarity of typeface


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.

2. Each font has its own character

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.

  • If you do a web page that is inspire confidence, for example. Page law firm to try fonts looking dignified, as Neuton, and Domine.
  • For the party of new technologies, select the font simple for such a futuristic appearance. Open Sans or robots.
  • A site for teens, eg. Clothing, try to use Karl or Merriweather.
  • If you want to give your side of the piece of program code, use this example. Fira Mono.
  • Page 404 - Use a typeface that is associated with the error, such as. Cousine, which is very similar to Courier New from the famous a windows 'blue screen of death'.

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.



3. The petioles, or Polish characters

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.


4. Fonts like to walk in pairs

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:

  • http://femmebot.github.io/google-type/
  • http://fontpair.co/
  • https://typ.io/

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.



Not the font of the text alive

In addition to choosing the right font you can still tinker with the other visual elements of the text.

5. Size matters

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:


                                                        Desktop                                                 Desktop/Mobile                                               
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.


6. Text Color


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.



7. The clear structure of the text

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.

8. Text Layout

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.



9. Text Alignment

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:

  • header H1
  • quotes
  • Captions under the photographs
  • Pictures woven into the text

10. First things first

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:

  • Start each paragraph and headline of the word, which carries important information. It was the first word users read the most.
  • Statistically, the first word of the paragraph will read about 5 times more than the third word in the line.
  • Keywords for your web site you include the information in the first two paragraphs, because often they are the only ones that read visitors to your website.

Summary, which is what you should take away from this reading:


  • Select a font readable, that fits the character of the page.
  • If a page using more than one typeface, make sure that they look good together.
  • Make sure that the selected fonts have built-Polish signs and fasten the appropriate version of the page.
  • Do not use Comic Sans, seriously.
  • Set the font size for headings and plain text.
  • Use mostly black, white and gray, the color of the text.
  • Give the text readable structure using headers.
  • Do not Clog the page text, give him space.
  • Align text mainly to left.
  • Contain the most important information on the beginnings of paragraphs and the beginning of the entire text.



creator web WebWaveCMS - growth hacker 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.

Do not use Comic Sans, or 10 steps to better the appearance of text on a page

09 June 2015
17 September 2018
When I post information about WebWave on various groups and web services I usually encounter three attitudes. Usually just "I am cool with that" type reaction and questions about the
16 August 2018
Optimizing the conversion rate is one of the most significant aspects of managing the website. However, what does it mean? According to the internetlivestats.com, there are over 1.901 bln websites
27 June 2018
The Internet is full of tutorials about building the best and the most effective landing page. However, when to use this tool, to get the most of it? A landing
23 May 2018
Halting Adobe Muse from further development doesn’t seem to be a big deal, as it was not the most popular tool from Adobe Suite. But is it really that meaningless?
08 May 2018
The SSL Protocole provides the encryption required for safe and secure communication with the website. The certificate used to be a standard for pages that processed payments or personal data.

Most popular



Copyright © 2011 — 2018

All Rights Reserved





Try - it's free