Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!


Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

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

web designing fonts 1



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.

web designing fonts 2

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, but remember that the choice is much greater. To see how a piece of text is presented in a font, you can use

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

web designing fonts 3

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 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.

web designing fonts 4

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:






48 px

42 px

32 px

32 px


36 px

26 px

26 px

24 px


28 px

20 px

22 px

18 px

normal text  

16 px

16 px

16 px

16 px

web designing fonts 5

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.

web designing fonts 6

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.

web designing fonts 7


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.

web designing fonts 8

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.


Author: Andrew Szelemetko. 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.

13 November 2017


Darmowe szkolenie z tworzenia stron internetowych 


Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Do not use Comic Sans when web designing, or 10 steps to improve the appearance of text on a page


Free website builder WebWave makes creating websites effortless. You can start building your website either from a scratch with a blank page or, if you are looking for some inspiration, with a free template.  Web design software for free? It is easy! 













Clik here to chat with us.

This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.

get started

webmaster panel

log in