Народ, всем привет. В прошлый раз мы говорили о главных правилах в верстке сайта и как его принять у программиста или на что обратить внимание при заказе. И там мы затрагивали довольно большой блок про текст и типографику, и это бесствольно важно. Кто не в курсе, типографика – это некие правила оформления текста на сайте, например. И это тоже почти целая наука, которая сильно влияет на восприятие и конечный результат. Даже банально, если я зайду на ваш сайт по продаже холодильников и там буде просто портянка текста с описанием этих холодильников, что-то непонятное, где про что, куда нажимать, а какое имя бренда вообще, то я просто уйду. И вы не заработаете денег просто из-за неверно оформленного текста.
А среди конкурентов побеждает тот, у кого не только кнопочки красивее или баннер цветастее, а у кого и шрифт грамотно подобран и текст расположен так, что я сразу глазами выхватываю то, что мне нужно, это меня цепляет и я делаю заказ именно у вас. Но, на самом деле, все гораздо проще, чем вы думаете, и даже если вы сами не пишите сайты, открою вам по секрету, многие программисты вообще не задумываются сильно о типографике. И в сами можете ему немного подсказать, тыкнуть пальцем и сказать, что вот это шрифт с засечками - моветон, центрирование по центру – убого, а вертикальный шрифт должен быть снизу вверх, а не сверху вниз.
1. Большие буквы и шрифты. Это и понятно, ведь большой и крупный шрифт воспринимается гораздо лучше. И это относится не просто к банальному заголовку или написать название своей фирмы покрупнее. Это оптимальный подбор размера шрифта, чтобы и не занимать текстом слишком много места и не смотрелось вычурно, и при этом было легко читать. При этом выделяя главные моменты более крупным шрифтом. А уж что говорить про шапку сайта, бренд, даже логотипы (если он текстовый) на продукции или рекламных баннерах. Пи этом более мелкая типографика заполняет пустое пространство и дает эффект наполненности.
Кстати, Вам может быть это интересно:
2. Выравнивание текста. Как я уже сказал, выравнивание по центру – это моветон, выравнивание столбиком тоже, оптимальным считается выравнивание по левому краю. Исключение – подзаголовки или микротексты в несколько слов, которые могут располагаться друг под другом и по центру. И да, я тоже знаю, что выравнивание «столбиком» очень нравится, но даже заметьте, что в Дзене, да и во многих другие блогах, выравнивание происходит по левому краю. А все из-за пресловутых отступов и расстояния между словами, что разрушает целостность и читабельность. Мы просто привыкли к такому расположению из книг, но интернет диктует свои условия.
3. Длина строк. И это, кстати, тоже играет большую роль. Слишком длинные строки на странице – мешает понять суть и «не читабельно», поэтому делайте лимит максимальной ширины у текстового блока. Короткие, кстати, аналогично, и именно поэтому очень важно правильно адаптировать блоки текста в них под мобильные устройства.
- оптимальный размер строки для десктопной страницы – 55-65 символов, для мобильной версии – 30-40 символов.
- еще есть так называемые «вдовы» – это одинокие слова на строке, которые остаются в конце абзаца или страницы.
- а также «сироты» – висячие строки, которые убежали на новую страницу. От них обеих нужно избавляться.
Что-то еще?
Далее давайте пробежимся по небольшим моментам, которые тоже можно учитывать и которые, кстати, отличают профессионала от любителя в типографике. Еще раз повторюсь – многие программисты не являются заядлыми любителями типографики, обычно этим занимается дизайнер. А когда вы нанимаете одного человека на все – готовьтесь к компромиссам. Просто даже из-за наличия времени. Но все же какие-то моменты у более профессионального человека выходят на автомате, так сказать:
- использование елочек в цитатах в виде кавычек, а не лапки (запятые сверху и снизу). Последние используют только в случае, когда надо поставить кавычки уже внутри цитаты.
- заголовки делают по методу пирамиды, то есть от крупных к более мелким (H1 – H6), а не в разнобой и не понятно как. Сам текст делают стандартной высоты и везде одинаковый по всему тексту
- желательно не набирать заголовки капслоком, то есть не делать большие буквы подряд, восприятие человеком такого текста гораздо хуже (хоть и кажется наоборот)
- текст на фотографиях или изображениях должен быть контрастным, и либо затемняйте всю фотку сразу или отдельный ее участок
- в самом дизайне на странице допустимо использование нескольких шрифтов. Но текст одного уровня (заголовок, или уж тем более логотип) должен быть набран везде одним шрифтом.
- сокращайте все лишнее и вместо текста на кнопке – «Оставить заявку на обратный звонок» написать просто «Обратный звонок» – такой текст будет считываться быстрее.