Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>16 июн 2022</li>

3 <li>0</li>

4 </ul>Рассказываем о висячих предлогах, правильной пунктуации и выравнивании текста.

5 Иллюстрация: Image by Rawpixel / Rawpixel / Shillingtoneducation / Annie для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Рассказываем о мелких, но важных нюансах правильной вёрстки текста, которые часто игнорируются начинающими дизайнерами.

9 Первое и самое простое, что нужно сделать дизайнеру с текстом, - "склеить" неразрывным пробелом все союзы, предлоги, частицы и местоимения короче четырёх букв со связанными с ними словами. Благодаря этому абзац будет выглядеть гораздо аккуратнее:

10 Не "склеено""Склеено"В один из ближайших вечеров, когда К. проходил по коридору, отделявшему его кабинет от парадной лестницы, - в этот день он уходил с работы почти что последним, только в экспедиции в круге света от маленькой лампы ещё работали два клерка, - из-за двери одной комнатки, которую он всегда считал просто кладовкой и никогда сам туда не заглядывал, он услышал какие-то стоны. В изумлении он остановился и прислушался, чтобы проверить, не ослышался ли он; некоторое время было тихо, но потом всё-таки снова послышались стоны.В один из ближайших вечеров, когда К. проходил по коридору, отделявшему его кабинет от парадной лестницы, - в этот день он уходил с работы почти что последним, только в экспедиции в круге света от маленькой лампы ещё работали два клерка, - из‑за двери одной комнатки, которую он всегда считал просто кладовкой и никогда сам туда не заглядывал, он услышал какие-то стоны. В изумлении он остановился и прислушался, чтобы проверить, не ослышался ли он; некоторое время было тихо, но потом всё-таки снова послышались стоны.Кроме того, "склеенные" союзы и предлоги помогают читателю быстрее понять текст, так как все смысловые единицы фразы будут у него перед глазами:

11 Не "склеено""Склеено"Как раз когда К. в очередной раз дошёл до двери.Как раз когда К.в очередной раз дошёлдо двери.Обычно правила "склеивания" на сайтах стараются автоматизировать через скрипты, чтобы дизайнер или верстальщик не тратил на это время. Если вы работаете в популярной CMS, например WordPress, то, скорее всего, этот скрипт уже для вас кто‑то сделал и разрешил использовать бесплатно.

12 Также можно склеивать существительные и прилагательные. Но это регламентируется в правилах издания или внутри продукта вашего клиента:

13 ДопустимоИдеальноНо каково пришлось больному адвокату, этот добрый малый даже говорить со мной не мог.Но каково пришлось больному адвокату, этот добрый малый даже говорить со мной не мог.В разных языках принято использовать разные кавычки. Для начала предлагаем запомнить их для русского и английского языков, так как, вероятно, они чаще всего будут встречаться в ваших проектах.

14 Русский языкАнглийскийКавычки первого уровня - "ёлочки".Кавычки второго уровня -"лапки“.

15 Кавычки первого уровня - “английские двойные”.Кавычки второго уровня - ‘английские одиночные’.

16 ПримерСоколов говорит: "Часы "Электроника 50Д“ гораздо надёжнее".ПримерByung-hoon warned, “Mother will be angry. ‘Wait until your father gets home,’ she'll say.”Наиболее распространённая ошибка - использовать " и ' как кавычки. Знак " означает дюйм, а знак ' - апостроф. В качестве кавычек их используют только разработчики и только внутри кода.

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

18 дефис (-)обычно выравнивается по высоте строчных знаков;

19 минус (-)выравнивается по центру прописных и цифр, а его ширина равна плюсу (+);

20 тире (-)самый длинный знак из всех;

21 короткое тире (-)немного длиннее минуса, обычно используют для обозначения диапазонов чисел и дат.

22 Скорее всего, на вашей клавиатуре правильных знаков нет. Чтобы не запоминать странные значения из Unicode, советуем установить<a>типографскую раскладку</a>.

23 Также дизайнеры любят использовать висячую пунктуацию - когда кавычки, запятые и точки оказываются за пределами текстового блока:

24 Изображение: Skillbox MediaЭто правило<a>предложил</a>Артемий Лебедев в "Ководстве" в 2005 году, однако сейчас его никто не использует, так как на экране реализовать это довольно трудно. Кстати, на сайте Студии Лебедева висячую пунктуацию тоже уже не применяют:

25 Скриншот:<a>Студия Артемия Лебедева</a> / Skillbox MediaВ большинстве книг о дизайне, например в "Новой типографике" Яна Чихольда или "Модульных системах" Брокмана, текст выравнивается по ширине. Такой ход уместен в печатной продукции, когда дизайнер контролирует всю текстовую колонку вплоть до миллиметра и может менять ширину пробела как угодно.

26 В вёрстке для экранов используют выравнивание по левому краю, так как выравнивание по ширине работает плохо. Обычно ширина текстовой колонки зависит от устройства или ширины окна в браузере - это значит, что дизайнер на неё не может никак повлиять. Посмотрите, как выглядит выравнивание по ширине у нас на сайте:

27 Выравнивание по ширинеПо левому краюПожмёт ли она мне руку? Надзиратель мне не пожал руку, думал он, глядя на женщину уже другим, испытующим взглядом. Поскольку он встал, то и она тоже встала; она была в некотором смущении, так как не всё в словах К. было ей понятно. И вследствие этого смущения она сказала то, чего говорить совершенно не собиралась и что к тому же было совершенно неуместно.Пожмёт ли она мне руку? Надзиратель мне не пожал руку, думал он, глядя на женщину уже другим, испытующим взглядом. Поскольку он встал, то и она тоже встала; она была в некотором смущении, так как не всё в словах К. было ей понятно. И вследствие этого смущения она сказала то, чего говорить совершенно не собиралась и что к тому же было совершенно неуместно.Больше о вёрстке и типографике

28 <a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>