В первой части мы рассмотрели 8 основных принципов правильного оформления материалов на сайте. Большое внимание было уделено вопросу читабельности текстов на ваших сайтах. Сегодня мы чуть углубимся в эту тему и поговорим о шрифтах.

Шрифты имеют огромное значение в дизайне. В статье мы расскажем:

— как сочетать несколько шрифтов на одной странице;

— как создать контраст при помощи шрифтов.


1. Где брать шрифты?

На создание хороших шрифтов могут уйти месяцы и даже годы. Если вы захотите встроить в сайт шрифт, вам нужно будет купить отдельную лицензию. Нельзя использовать шрифт, который скачан с торрентов.

Покупка шрифта — это своего рода приобретение лицензии на использование ПО, но не прав на сам файл.

Вот несколько ресурсов, где можно найти шрифты:

2. Как выбрать шрифты?

Любая страница в интернете состоит из шрифтов. Иногда появляется необходимость использовать разные шрифты в оформлении. Но как понять, какие шрифты сочетаются друг с другом?

При работе с визуальным редактором доступны разные типы шрифтов:

Самый простой способ оформить текст — применить на странице шрифты одной гарнитуры. Так они будут выглядеть гармонично.


Гарниту́ра в типографике — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилевое единство рисунка и состоящих из определённого набора типографских знаков.


При использовании разных стилей на одной странице важно избежать конфликта шрифтов:

Именно поэтому так важно иметь представление о способах создания контраста. Он достигается за счет использования разных гарнитур, цвета, размера, структуры, насыщенности. Далее мы будет говорить именно об этих методах оформления текстов.

3. Размер шрифта

Создание контраста за счет размера текста зачастую применяется для заголовков. Противопоставьте крупный шрифт мелкому:

Главное, действовать смело. Применительно к разнице в размерах шрифтов действует правило: “Чем больше, тем лучше” (конечно, в разумных пределах).

4. Насыщенность

Под насыщенностью подразумевается толщина штриха: обычный, жирный, полужирный, сверхжирный, тонкий, сверхтонкий. Полужирное начертание подойдет для подзаголовков или ключевой информации:

Насыщенность в шрифтах также позволяет структурировать и визуально разделять большой текст на части.

В CSS для этого используется свойство font-weight, которое может принимать значение от 100 до 900 с шагом 100 (или bold, bolder, lighter, normal).

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между двумя вариантами: нормальное начертание и жирное начертание.

5. Структура

Под структурой понимают толщину штриха: толстую, тонкую, переходящую от толстой к тонкой:

Контраст создается, когда сильно различающиеся шрифты противопоставляются друг другу:

Если у вас возникают сложности с различием шрифтов, используйте старый проверенный прием. Разместите на странице два шрифта: с засечками и без, как в нашем примере. Не забудьте при этом использовать другие виды контраста, чтобы подчеркнуть разницу.

6. Цвет

Создавать контраст можно с помощью оттенков основного цвета:

Другой способ — добавление теплых тонов. Теплые тона очень яркие и привлекают к себе внимание. Чтобы выделить что-то, их надо совсем немного:

И еще один способ — добавление холодных тонов. Они тусклые и привлекают меньше внимания, чем теплые цвета. Смелее используйте холодные тона:

Однако главная задача материала — быть прочитанным. Важно помнить про контраст шрифта и фона (об этом мы говорили ранее).

27 комментариев
1 Написал RulezZ-DM 20 Июль 2015, 17:53
Статья безусловно хорошая, я как её увидел сразу побежал читать и надеялся, что  хоть вы проявите свет по Размеру шрифта , какой размер лучше использовать в нынешнее время интернета, 13px или 16рх или 115% от стандартного шрифта на страницы сайта! А тут ни слова об этом! Очень жалко!

Хотя жалко у пчёлки! biggrin
0
2 Написал olepav 20 Июль 2015, 17:56
Для заголовка 20pt и более, сейчас это почти тренд. Но всё зависит от дизайна сайта, всё должно быть гармонично.
3 Написал RulezZ-DM 20 Июль 2015, 17:59
Да бог с ним с этим заголовком, размер не так трудно подобрать, я говорю про размер шрифта при чтении самого контента, вот в чём вопрос!   Особенно при разных разрешениях экрана!
0
4 Написал olepav 20 Июль 2015, 18:08
В нашем блоге хороший пример золотой середины, на мой взгляд smile
5 Написал Ucoz_fan 20 Июль 2015, 22:57
14px самый подходящий, хотя вам решать
8 Написал sergeymitrichev 21 Июль 2015, 12:05
Размер шрифта в первую очередь будет зависеть от выбранной гарнитуры

Посмотрите пример, как могут отличаться разные шрифты одного font-size: 15px smile
http://i.imgur.com/VUtVr1x.png

Так что, какую-то конкретную цифру трудно назвать
9 Написал Ucoz_fan 21 Июль 2015, 15:49
верно, все зависит от типа шрифта который был выбран для сайта, далее уже подстраивать
13 Написал †Angel† 23 Июль 2015, 07:34
Шрифт Verdana. Хороший вариант использования шрифта для сайта. Будет хорошо и удобно читаться, благодаря ширине букв и между буквенном расстоянии.
avatar
6 Написал Kany4uHo 20 Июль 2015, 22:59
можно даже использовать 12-14px, смотря какой дизайн и насыщенность цветовой гаммы???? ))))))
7 Написал sergeymitrichev 21 Июль 2015, 11:56
У Вконтакте, например 11px, однако, есть возможность увеличить размер шрифта в настройках до 12px
avatar
10 Написал ViGaCiEdition 22 Июль 2015, 00:20
Я вас умоляю! Не изобгетайте велосипед и пользуйтесь стандартными шрифтами. Наилучший и самый читабельный шрифт (для веб) — Arial. Всё остальное (имеется ввиду нестандартные, декоративные шрифты) создают преграды для воспоиятия текста и очень трудно переваривеются.
11 Написал RulezZ-DM 22 Июль 2015, 00:36
Не знаю, не знаю, я привык к Verdana, Arial совершенно не могу воспринимать!
12 Написал sergeymitrichev 22 Июль 2015, 09:20
Бывают случаи, когда для основного текста нужно применить шрифт с засечками и диагональным нажимом (Garamond, Times). Как Вы понимаете, Arial тут совсем не подходит.
14 Написал Астра 23 Июль 2015, 20:26
Таки кину пару камней.
Первое, что бросается в глаза: размер шрифта визуалка задает в абсолютном формате. Если на сайте он отличается от 13px, возникает нестыковка. Это довольно сложно объяснить клиентам, которые заказывают сайт, но в вебе абсолютный ноль.
Отсюда спрашивается: когда можно будет задать оформление для холста визуального редактора, чтобы он отвечал своему названию - wysiwyg
15 Написал _CrySiS_ 24 Июль 2015, 01:58
Лучше не использовать такой редактор (как по мне). От него толку ноль - я лучше через Word сделаю набросок, и потом на HTML напишу код + CSS. 
Это будет по мне намного проще (как исполнитель).
16 Написал sagamorr 16 Август 2015, 18:26
Спасибо за статью! Хотя конечно те кто пользуются конструктором вряд ли знают про html и css)))
avatar
17 Написал levanijincharadze 24 Декабрь 2015, 04:24
Good cycle of blog-posts! Thanks
18 Написал borschaga 11 Февраль 2016, 19:43
Полезно )
19 Написал pushkin32 11 Февраль 2016, 20:43
У меня на сайте шрифт Verdana  причем в категории раздела 17px а на странице
18px ссылки на литературу 15px и мне нравиться.
ссылка на сайт http://borgo.ucoz.ru/blog/muzykalnaja_kultura_germanii/2012-09-20-12
20 Написал pushkin32 11 Февраль 2016, 20:51
Да, хочу добавить еще у меня в html ставиться вот так <span style="font-size:18px;"><span style="font-family: verdana,geneva,sans-serif;"> Только меняю цифры
21 Написал Astronavigator 12 Февраль 2016, 10:55
Где можно приобрести лицензию на шрифт собственной разработки с новой грамматикой? :'(
22 Написал sergeymitrichev 15 Февраль 2016, 10:45
Уточните, какая Ваша конечная цель? Вы разработали свой собственный шрифт и хотите защитить его от незаконного копирования?
23 Написал Astronavigator 15 Февраль 2016, 12:02
Легализация !
25 Написал sergeymitrichev 17 Февраль 2016, 15:32
Не слышал ничего про легализацию шрифтов) Может лицензирование?
27 Написал Astronavigator 17 Февраль 2016, 19:03
respect
26 Написал Astronavigator 17 Февраль 2016, 19:02
book
Ваш комментарий