Дизайн Leo Jamelashvili
2 208

Основные правила типографики для веб-дизайна

В закладки

Очень частая ошибка в дизайне, которую я встречаю постоянно и абсолютно везде – это заглавные буквы. Используйте очень редко или не используйте вообще текст, набранный заглавными буквами. Строчные буквы смотрятся намного красивее и эстетичнее, они визуально не перегружают дизайн и немного легче читаются. Есть шрифты, в которых есть только заглавные букву, но они не в счёт.

Если же вы все-таки решились использовать для заголовков (для основного текста ни в коем случае нельзя!) заглавные буквы, не допускайте ошибку 90% людей, даже опытные дизайнеры часто грешат этим. Заглавные буквы обязательно нужно разряжать. Когда вы используйте заглавные буквы, вы должны оставлять место между буквами и чем жирнее шрифт, тем больше место должно быть. То есть нельзя ставить в редакторе кернинг (межбуквенное расстояние) на параметр «авто», оставляйте всегда больше место.

Но не перебарщивайте, разрядка букв должна быть меньше интерлиньяжа (расстояние между базовыми линиями строк). Это правило вытекает из «внутреннего и внешнего». Для строчных букв действует обратное правильно, их нельзя разрежать, иначе потеряется основной смысл их использования – лёгкость чтения.

Ещё одна ошибка в типографике, которую допускает множество людей – выравнивание текста по центру. Читать текст, выравненный по центру, длиннее 3-4 строк вызывает дискомфорт для глаз. Выравнивать по центру можно только заголовки, для всего остального стоит использовать выравнивание по левому краю. Такое выравнивание встречается нам повсюду, мы привыкли к нему и легче воспринимаем такой текст. В век «фастфуд контента» люди перестали читать большие объемы текста. Важно не только заинтересовать пользователя на чтение, но и сделать этот процесс максимально удобным.

Также, не стоить делать текстовый блок длиннее 75 символов, оптимальный вариант – 60-65 символов. Если текст длиннее, то глаза будут напрягаться, переводя взгляд с конца строки на начало новой.

  • Если текст был полезен, то не забудь подписаться на блог в телеграме — t-do.com/leojblog

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Leo Jamelashvili", "author_type": "self", "tags": [], "comments": 11, "likes": -2, "favorites": 22, "is_advertisement": false, "subsite_label": "design", "id": 45815, "is_wide": false, "is_ugc": true, "date": "Sat, 15 Sep 2018 20:45:09 +0300" }
{ "id": 45815, "author_id": 165809, "diff_limit": 1000, "urls": {"diff":"\/comments\/45815\/get","add":"\/comments\/45815\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/45815"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

11 комментариев 11 комм.

Популярные

По порядку

Написать комментарий...
12

Тоже начать что ли клепать статьи-пустышки для блога, чтобы потом выставить себя экспертом, а потом курс какой-нибудь запустить?)

Я не дизайнер, ни разу. Программист-фрилансер. Но даже я понимаю, что статья "ни о чем".
Элементарно.

Первое, что бросается в глаза:
1) шрифт - его тип, его размер, кол-во различных - в статье ничего об этом нет
2) тут до основных правил еще писать и писать....3 абзаца, в которых воды, как в моем дипломе....
3) статья для кого? Если для дизайнера, то он это и так знает, а если нет - то зачем использовать слова, которые "начинающие" могут не знать - кернинг, интерлиньяжа
4) почему это никто не читает большие статьи, увольте. С радостью читаю большие, структурированные статьи на различных ресурсах. Главное ее содержание и хорошее оформление

Ответить
1

1) Я писал про основные ошибки в типографике. В размере шрифтов их не так уже часто допускают. Вряд ли кто-то будет делать основной текст больше размером, чем заголовок.
2) Опять же, я написал о тех ошибках, которые чаще всего встречаю.
3 Если ты не заметил, в скобках рядом со всеми определениями я написал их значение.
4) Тут говориться не про "большие статьи", а про большие объемы текстов на сайтах, никто не читает огромные портянки текстов, например, на продающих сайтах. Их нужно всегда разбивать на абзацы и доводить до читабельного состояния. И с этим глупо спорить.

Ответить
1

Кто учил "тыкать" для начала? В какой момент времени "тыкать" стало нормой?
1) при чем тут размер?
на сайте повсеместно 5+ шрифтов юзают - это базовая ошибка.
на сайте юзают шрифт с засечками - это базовая ошибка.
на сайте задают шрифты в абсолютных значениях - это базовая ошибка.
А то, что Вы перечислили - вилами по воде
3) отредактировали статью - это хорошо, но нужно делать сразу
4) Вы явно путаетесь - четко написано - "перестали читать большие объемы текста". Это явно к размеру текста, а не к его структуре....Или пишите корректно - про структуру
Во-вторых, что же за сайты-то такие продающие? Нахватаются фраз, а потом везде используют. Вы сами понимаете, что такое продающий сайт?
На сайте делаются заявки на миллион в месяц, но на нем нет ни текстов особых, ни форм, ни призывов к действию и верных заголовков. Он не продающий что ли?
А сайт, которые имеет вылизанный текст, яркие призывы к действию и цепляющие заголовки, но не приносящий дохода - это продающий что ли?
Любой сайт, который проектируются нормально - продающий. Каждый веб-мастер учитывает ЦА, которая будет им пользоваться, а уже от этого используются необходимые инструменты для призыва к целевому действию.

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

Вы тут давеча выкладывали кучу статей (а потом успешно скрыли или затерли), где было четко написано - нужно воспринимать критику.....так в чем же дело?

Ответить
1

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

Про продающие сайты тоже есть стать. Я уверен, в том, что нет продающего дизайна, но продающие сайты - есть. Продающий сайт - совокупность копирайтинга, дизайна и маркетинга, это не про то, сколько сайт приносит дохода. Если структура сайта выстроена таким образом, чтобы заинтересовать человека, а потом взять у него контакт или закрыть на продажу - значит сайт продающий.

А те статьи заблокировали на сайте просто, за то, что я перезалил их из телеграма.

Ответить
0

Батюшки, ну только заказывать у Вас что-то:)
Сначала начинаете задвигать про "продающие сайты", но сами даже заголовок статьи не можете корректный сформулировать, ведь - "основные правила" и "нужным сказать именно про эти" - это небо и земля.
Как же вы УТП будете формировать?
Нет продающих сайтов. Если делать сайт нормально, то он решает поставленные задачи. И все тут. Ничего лишнего.
А то, что многие сайты не решают задач - так это уже от исполнителей зависит, но никак не от "7 супер фишек, которые заставят Ваш сайт работать! Бесплатно!".
Книги и курсы, это, конечно, полезное дело....но лучше иметь толику своего критического анализа.
Ну и воспринимать критику тоже нужно нормально:) Я не "ведро говна" лью, а уточняю те моменты, которые не ясны мне. Другие люди, видимо, тоже не поняли смысла, коли статья не снискала славы.

Пишу-то эти комменты ради того, чтобы не было "перезалил их из телеграма". Хочется авторский, уникальный контент на сайте иметь, а коли будет интересно - можно и в телеграм перейти.

Ответить
0

К чему был твой коммент - я не понял. Ты пишешь про "посты-пустышки", но оставляешь такой же коммент, делая вид, что в чем-то разбираешься.

Ответить
4

Основные правила >>
Только два банальных правила...
А тема ведь очень серьезная и обширная, особенно с учетом того, что большинство дизайнеров интерфейсов не имеют дизайнерского образования и пришли в профессию самоучками. И большинство пробелов как раз в таких основах, как типографика, теория цвета и верстка.
И типографика, к слову, это основная база, так как веб-страница это документ. И именно текст и умение обращаться с ним решают насколько будет визуально эффективен этот самый документ.

Ответить
2

Ох тыж осчасливил нас автор своей мудростью, как жеж раньше то жили! И хоть бы на пару нормальных книжек дал ссылки, погуглил бы. Давайте таким авторам морды арбузами разбивать, а?

Ответить
3

Вы как будто статью не читали!!! Поправляю вас:
АВТОР ОСЧАСТЛИВИЛ МУДРОСТЬЮ!!!
к а к ж е ж р а н ь ш е т о ж и л и ! И х о т ь бы н а п а р у ...)))

Ответить
0

опять, блин, комментарии содержательнее статьи(((

Ответить
0

что-то с редизайном в нагрузку кучу никчемных статей опубликовали. зачем?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }