free consultation
It is worth remembering that it is the readability that has a major impact on the user's positive experience and his desire to stay on the website. About the importance of the appropriate juxtaposition of fonts on the site, it is rather unnecessary to convince anyone.
Here are some simple rules on how to choose a font for a website, we will tell you about font combinations and their sizes. We will answer the question why 16px on the page is too much ?.
Table of Contents:
Maximum of two different fonts per page
We do not mix, but on the contrary limit the variety for the sake of the readability of the presented text. There are a number of other means by which the text and the entire site can only gain, about which we write below.
An excellent way to communicate the most important information at the first 'scan' of the page by the intern. The secret is in the variety and development of a single hirerarchy of headlines for the page.
It is accepted to use for content the minimum is 12px, optimally it is about 13-14px, although there will be supporters of the 16px theory. Larger sizes are reserved for headings ( e.g. h1, h2, h3), smaller sizes are for text in a side column or footer.
Too little contrast, that is, text that is too bright in relation to the background, will cause not every user to feel like straining their eyes to get information from our site. Useful websites should be created with the user and his comfort in mind.
Too much contrast will cause the design (graphics) to be 'hidden' behind the content - the font will dominate the whole too much.
The user is scanning your text, he is not reading it.
These are some of the most important features in our opinion that can make the same content on a website look completely different.
The right interline (space between lines of text) can work wonders - shorter blocks of text when the interline is shortened gain traction. The standard is about 120% of the font size.
We do not write long blocks of content in one go, we use embellishments in the form of headings, spacing sometimes dashes or a delicate background under some paragraphs. As a result, the whole looks much better, more accessible, and the user pays attention to what we want.
We like when longer texts are divided into blocks, sections - this gives more opportunities to apply light and makes the text more interesting to read, we also style headings appropriately which helps to catch the main information on the page when 'scanning' it.
We highlight the most important information : frame, background, bold, list, slight color change.
Read on the website - let yourself be read.
This is definitely a topic for a separate post (and there will be one) however, in the first place, the main task of the service being built is to provide the information contained in it in an easy-to-read manner.
The content has to be, first of all, well readable with longer descriptions or on text pages and not to tire the eyes ( we do not combine, we go for modern classics ). No one wants a bad typeface to make an article written for several afternoons or a Saturday evening tiring for the eyes of potential customers.
Yes but only in narrow columns
Why?
Browsers do not yet cope with splitting words - they can not move to a new line, hence the formation of rather large gaps between words, which reduce readability. If we have long words in a line we have - a phenomenon more likely.
Wyróżnij odnośniki
Although the method is old but still effective today, most importantly users are used to it. For links we use underlining - it is easy to find in the text a link to the material we want our reader to know.
The first place is certainly https://fonts.google.com, another is https://fonts.adobe.com which offers an unlimited font database.
The advantage of both sites is that it is very easy to use fonts.
Google Fonts
Fonts Adobe
For longer content, paragraphs:
For h1-h3 headings, for example:
Sometimes, when browsing the web, we are tempted to check what font the author of the page used because, most simply, we would love to add it to our font database.
How to check the font on the page ?
The name of the font can be checked ham without installing additional programs in the Chrome browser:
Find the font you are interested in (right mouse and context menu, item 'explore')
Chrome console and compouted tab (1)
Comments Off on Our community's entry:
Very interesting advice, although the lack of specifics in the size of the columns and the font itself, causes a feeling of generality.
Greetings
SYLWESTRUS
I'm terribly annoyed by the new trend where 18px is used on blogs - I don't know where this came from if it was to make the content take up more space to make it look "more serious" as a result. I think I will develop a reflex to use 90% zoom on such sites :). Nice that you wrote about the 16px max rule.
BTW, in your case this Open Sans 15px with 23px line looks awesome. I in Open Sans always gave a weight of 300 which made it hardly visible and often... changed the font to another one as a result of clients' requests. Now I see that skillfully tuned Open Sans looks really fantastic. I used to use PT Sans on my site now it is ProximaNova.
Here I have selected a couple of gems from Google Fonts that are suitable for both main content and titles: https://mansfeld.pl/webdesign/wspaniale-fonty-strone-www/
PAWEŁ MANSFELD
See also:
Digital Agency Hauerpower
Copyrights 2010-2022
