Типографика

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});

Разбор кода по частям

1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.

2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.

3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.

4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).

5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.

6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.

Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.

Разработчики, а как вы решаете вопрос переноса «висячих» слов?

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

Верстка пьесы — это особый вызов для дизайнера. Работая над проектом по оформлению пьесы «Дракон» Евгения Шварца, я получила ценный опыт и хочу им поделиться. Проект я делала в рамках учебной программы, и одним из важных условий было вдохновляться сценографией какой-нибудь постановки или экранизации. Для меня выбор был очевиден — я вдохновлялась визуальным миром фильма Марка Захарова «Убить дракона».

Личное отношение к пьесе и вдохновение
Пьеса «Дракон» мне знакома очень давно — еще с восьмого класса, когда мы ее проходили на уроках литературы. С тех пор она занимает особое место в моем сердце. Кроме того, я безумно люблю творчество Марка Захарова и считаю его экранизацию «Убить дракона» как удачной экранизацией, так и очень интересным самостоятельным произведением. Именно поэтому этот проект мне важен, было приятно выразить дань уважения любимым произведениям.

Развитие навыков микротипографики
Целью учебного модуля было прокачать навыки микротипографики — работы с тонкими нюансами: межстрочным расстоянием, начертаниями шрифтов и отступами. Верстая «Дракона», я здорово улучшила эти умения. Микротипографика — ключевая вещь в книжном дизайне, потому что именно она отвечает за то, чтобы текст выглядел гармонично, легко читался и просто радовал глаз. А при работе с пьесой это особенно важно: структура и ритм речи требуют невероятного внимания к таким деталям.

Работа с текстом: особенности драматургии
Пьеса — это специфичная сложная структура, где важна каждая реплика, ремарка и имя персонажа. С ней работать куда сложнее, чем с художественной литературой. Верстая «Дракона», я столкнулась с несколькими ключевыми моментами:

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

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

• Выбор формата: Я остановилась на вытянутом узком формате страницы, который напоминает театральные программки. Это решение подчеркнуло театральность пьесы и сделало чтение диалогов гораздо удобнее.

Работа с иллюстрациями: визуальное вдохновение
Особую роль в проекте сыграли обработанные кадры из фильма «Убить дракона» Марка Захарова — моего главного визуального ориентира. Вот что я поняла, работая с картинками:

• Обработка изображений: С помощью Adobe Photoshop я стилизовала кадры так, чтобы они выглядели хорошо, несмотря на плохое разрешение исходного материала.

• Интеграция с текстом: Ключевым было разместить иллюстрации так, чтобы они не мешали чтению, но при этом добавляли тексту новый смысл и эмоции.

• Визуальный диалог с фильмом: Эти иллюстрации создали связь между книгой и знаменитой экранизацией, что добавило проекту глубины и уникальности.

Итоги и мои советы
Работа над «Драконом» показала: верстка драматургического текста требует особого подхода — от продуманных стилей до выбора формата. Умение работать с микротипографикой (интерлиньяж, отступы, начертания) оказалось ключевым для того, чтобы текст выглядел гармонично и легко читался. А иллюстрации могут стать мощным инструментом, чтобы усилить впечатление и создать нужную атмосферу.

Если соберетесь верстать пьесу или другой театральный текст, вот что советую:

1. Используйте узкий формат – так диалоги читать намного удобнее.

2. Разрабатывайте многоуровневую систему стилей для разных элементов текста (персонажи, реплики, ремарки).

3. Внимательно работайте с интерлиньяжем, отступами и начертаниями – это основа микротипографической гармонии.

4. Добавляйте визуальные материалы, которые поддерживают и дополняют содержание.

5. Работайте в профессиональных программах типа Adobe InDesign и Photoshop.

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

Недавно шёл мимо вывески Волжского Хора. Не удержался. ) На самом деле, шутка с подтекстом. Шрифт в логотипе, действительно, жуткий. Пришло время сделать редизайн. Надеюсь, автор не обидится, а впрочем, какая разница...

Вы читаете приквел, к моему предыдущему лонгриду на VC «Как за 5 недель я написал свою программу вообще без опыта программирования». Там рассказывал, что работаю в школе тренером и дизайню на фрилансе и параллельно сделал программу с нуля без знания кода — говорят, зашло нормально. Но в лучших традициях жанра — читать можно в любом порядке.

В этом сюжете я отвечу на все «почему» — почему программа нужна почти всем, почему считаю, что прямых аналогов нет и почему это не очередной «велосипед», который будет стоять в гараже истории. Расскажу про фишки, которые родились не ради фишек, а через призму боли длиною в 15 лет и почему Илья Бирман ни в чём не виноват.

Основная проблема и решение — как вводить символы?

Вводить символы тяжело. Когда нужно набрать восклицательный „!“ или вопросительный „?“ знаки, — особых проблем не возникает, справляется даже тик-ток зумерок с СДВГ. Но как только потребуется хотя бы решётка „#“ — пиши пропало, фокуса не хватает даже у бывалых смешариков. Я тактично промолчу про длинное тире „—“ или какие-нибудь модно-молодёжные «кавычки ёлочки», ввод которых возможен только благодаря зубрёжке Alt-кодов. А знак рубля „₽“ вообще кажется подвергся щелчку Таноса и обычные люди его попросту не используют, предпочитая по привычке писать три весёлых буквы — руб. 🤡

Особенно дизайнерам и редакторам. Этих добряков мне втройне жаль — кроме того, что с них требуют красиво оформленные тексты, так это надо делать постоянно и быстро, а желательно вообще сразу «из под пера» пока шаришь экран на созвоне, да ещё и в миллионе разных программ. Начиная от пресловутых Google Docs и Word, заканчивая Figma, Photoshop и Illustrator. (и всё это, желательно за «спасибо» или «большое спасибо», прим. автора)

Текущее решение. На самом деле решение не одно и даже не два — их кратно больше. Однако, самое известное и в целом логичное «типографская раскладка». Типографских раскладок тоже много, но популярной в индустрии стала одноименная раскладка Ильи Бирмана — говорим ему большое спасибо за идею.

Дисклеймер №1 · Я умышленно опускаю рассмотрение любых других способов, которые позволяют: запоминать Alt коды, что-то где-то копировать, открывать какие-либо окна, находить и потом вставлять символы — это просто не то, по своей сути.

Но обязательно поделитесь своим опытом — как вы вставляете свои любимые символы

Дисклеймер №2 · Я рассматриваю все типографские раскладки как явление. Раскладка Бирмана такая же типографская как и десяток других — корень проблем не в ней, а в особенностях работы операционных систем с раскладками.

Не претендую на истину, опираюсь на свой опыт и отзывы комьюнити

Если ты не видишь проблему — не значит, что её нет

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

Утекло много воды, но Посейдон как-то проиграл Афине и теперь мы не обязаны это терпеть — у нас есть суммаризация текста ♥

Слава Афине! Ведь в 2к25 анализ комментариев за 9 лет занимает примерно 3 минуты. Я скопировал и скинул все комментарии в Qwen.Chat и он(а) — сгруппировала их по смыслу, сделала выводы и в процентах расписал(а) сколько чего и куда. Получилось 4 больших группы комментариев.

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

Я не разобрался как на пикабу сделать содержание — но план наш будет такой. Это вообще можно? Подскажите, — «Это реально»?

• Конфликт горячих клавиш — или кто царь горы Фудзи

• Две большие проблемы раскладок — один маленький Вавилон

• Сложности в установке — мама, я не программист

• Запросы на кастомизацию — все хотят свой луна-парк

• Работа · фишки · особенности

• Итоги, планы на будущее

Конфликт горячих клавиш — кто царь горы Фудзи?

Чаще всего проблемы встречаются при работе с Figma, Chrome, Photoshop, Illustrator, Indesign, PuntoSwitcher. Лично у меня были проблемы со всем, кроме PuntoSwitcher — возможно, потому что я им никогда не пользовался.

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

Например, пытаешься использовать «быстрое действие» — скопировать стиль в Figma. Для этого нужно нажать Ctrl+Alt+C. Однако, вместо этого происходит команда вызова инструмента «Комментарий».

Или, пытаешься поставить «кавычки ёлочки» или „лапки“, а вместо этого — ты двигаешь трекинг всей фразы или слова. Или вообще ничего не происходит и думаешь, что запала кнопка на твоём MacBook Pro 16 за мнохаденяк с неподражаемым Magic Keyboard.

Или, ты хочешь в Google Docs сделать «Заголовок первого уровня» — Сtrl+Alt+1, но вместо этого заголовок стирается и ставится степень единицы ¹. Удобно, чё.

Можно продолжать достаточно долго, ведь программ в которых используется Alt в качестве горячей клавиши хватает — начиная от Excel, закачивания Geforce Experience или даже, прости Афина, Skype.

Но самый прикл в другом — это может конфликтовать на ПК и работать на ноутбуке с одной и той же системой на борту, или наоборот не конфликтовать нигде, но сломаться при обновлении или перезагрузке. Может работать в русской раскладке и не работать в английской. Что-то вылезет на Windows, а что-то нет-нет и на MacOS. В общем, полный рандом, и самое главное — непонятно кто виноват.

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

Решение. В hypetype механизм работает так, что правый Alt забирается под ввод символов на уровне драйвера, что исключает любые конфликты. Использование правого Alt в каких то других сочетаниях кроме Alt+Enter за двадцать лет замечено мною не было, поэтому Alt+Enter работает штатно.

Две большие проблемы — один маленький Вавилон

Первая проблема. Софтверная — чаще всего имеет рандомный характер. Я сталкивался с этим на Windows 7 и 10, когда одна раскладка пропадала и приходилось добавлять другую чтобы починить. Многие держат три раскладки «на всякий случай». В отзывах есть разной степень сложности лайфхаки как с этим бороться — от перезагрузки до редактирования GUID раскладок в реестре и синхронизации через аккаунт Microsoft. Но я считаю, что это всё мелочи. С этим можно бороться и жить.

Вторая проблема. Идеологическая — и с ней ужиться уже в разы сложнее. Во-первых, есть понятие «Язык ввода», и во-вторых, — «Раскладка». Те, кто используют раскладки отличные от ЙЦУКЕН и QWERTY — и так страдают постоянно, им не привыкать. Поэтому сегодня рассмотрим только проблему языков.

Например, у вас в системе есть два языка ввода — «Русский» и «Английский» и вы пользуетесь стандартной раскладкой. Тогда качаем две раскладки под наши два языка, удаляем стандартные раскладки, ставим типографские, молимся, чтобы сработало — ура, всё идёт по плану.

Но как-то так исторически сложилось, что в мире больше двух языков. Даже слышал, что их больше десяти. В итоге — либо приходится собирать собственную раскладку под свой язык, либо держать одну из типографских где-то «сбоку» и доставать по требованию, что убивает всю идею быстрого и лёгкого доступа к символам.

Решение. В hypetype всё равно какая у вас «Раскладка» или «Язык ввода», прям вообще. Программа является как бы надстройкой над клавиатурой — третьим слоем над языком и раскладкой. Важно только физическое наличие кнопок.

Сложности в установке — мама, я не программист

С этой проблемой лично я не сталкивался. Но сказать, что установка раскладок дело двух кликов — язык у меня не повернется. Что на Windows, что на MacOS — есть нюансы, привет японистам. Мне повезло, я умею читать и все инструкции из интернета мне помогали. Однако, есть и личные примеры, когда я советовал кому-то раскладки, но в ответ получал: «У меня не получилось установить и я забил».

Суть проблемы. Когда ты пытаешься заменить что-то системное на несистемное — система тебе мешает это сделать. Как итог — постоянные глюки и необходимость читать инструкции.

Решение. hypetype — портабельная программа c функцией автозапуска. Особенность, что при первом запуске для включения «Виртуализации» потребуются права Администратора и перезагрузка, но делается это единожды.

Запросы на кастомизацию — все хотят свой луна-парк

Причем, кто-то просит подстрочные индексы, кому-то нужны дроби, кто-то жить не может без диакритических символов или дореволюционной орфографии. Есть даже те, кто не поленился попросить добавить @ или #, что на мой взгляд, почти логично — ведь непонятно как написать у себя под фотокарточкой #сказачноебали #безфильтров , не сломав при этом пальцы об переключение языка. Лично мне всегда не хватало стрелочек и смайлов. А ещё, мой любимый интерпункт — такая · точка · посередине · между словами. Не путать с умножением.

Суть проблемы. Во-первых, у всех разные задачи — нужны разные символы. Во-вторых, всем нужен точно такой же халатик, но с перламутровыми пуговицами.

Решение. Философия hypetype настаивает на изменении «раскладки» на лету и поддерживает любые символы UNICODE, в том числе любую комбинированную диакритику. Об этом чуть позже.

Работа · фишки · особенности — минигайд по hypetype

После включения «Виртуализации» и перезагрузки, можно полноценно пользоваться. Не обязательно включать автозапуск, можно запускать вручную, когда удобно. Но это вообще неудобно — проверено.

Без активной галочки возле пункта «Виртуализация» программа работать не будет. Виртуализация включается и отключается только от имени Администратора.

к слову, установить раскладку без админских прав тоже не получится

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

Легкая настройка под себя. Кликаем по иконке в трее правой кнопкой мыши, выбираем пункт меню «Редактировать». Откроется интерфейс с «раскладкой». При клике на любую клавишу выйдет окно с двумя полями. Верхнее поле будет ответственно за символ, который вводится Alt+Shift, нижнее — для символов с Alt. В поля вставляем символ или даже символы, которые хотим вводить в будущем. Жмём сохранить.

Перенос на другую машину. Настройки «раскладки» записываются напрямую в config.ini. Конфиг можно копировать на другие устройства, и заменять стандартный, тем самым — использовать свою настроенную «раскладку» на другом компьютере.

Работа с диакритикой. Сначала нажимаем комбинацию нужного символа. Например, для гачека это будет комбинация Alt+Shift+V → запустится 5 секундный режим ожидания ввода символа → вводим нужный символ, например g → поставится ǧ. Ввод диакритики по двойному нажатию на символ с последующим «склеиванием» не является универсальным и очень чувствителен к программной среде ввода, поэтому переработан в пользу текущего способа.

При желании можно вставлять свои диакритические знаки, главное — использовать их комбинируемые версии из таблицы Unicode в диапазоне 0300–036F.

Если нужна инструкция, что с этим делать — дайте знать в комментариях

Эмодзи · каомодзи · комбинации символов. Да — будет работать. Выглядеть в интерфейсе может максимально страшно >_< и криво, но работать будет. Эмодзи работают как лапочки 😎. По аналогии с каомодзи можно придумать миллион способов для ввода комбинаций, которые требуются часто. Например, «средний пробел» + «интерпункт» + «средний пробел» — удобный дивайдер, когда по смыслу или внешнему виду запятая, точка или слеш не подходят.

Итоги, планы на будущее

Мне повезло, я из когорты разработчиков, которые пользуются своим продуктом каждый день и кайфуют. Я искренне уверен, что один раз попробовав hypetype — возвращаться к любым раскладкам уже не захочется.

Плюсы

• вставляет любые символы напрямую с клавиатуры

• позволяет настроить «раскладку» под свои задачи «на лету»

• работает с любой комбинированной диакритикой

• не требует скриптов, подмены файлов и редактирования кода

• не зависит от текущей раскладки или языка ввода в системе

• не конфликтует с хоткеями Windows, Adobe, Figma и т.д.

• не требует установки

Минусы

• при первом запуске потребуются права администратора и перезагрузка

• только для Windows

Планы на будущее

• версия под MacOS (счётчик запросов: 12 шт upd.14.03.2025)

• синхронизация настроек online (счётчик запросов: 1 шт)

Скачать программу можно на страничке проекта Github

Или посмотреть обзор на сайте проекта

По любым вопросам в Telegram @simbarus

Любые мысли, соображения и критику жду в комментариях. Да пребудет с вами хорошая типографика. Всем hypetype!

P.S. Также внезапно, как снег в декабре для коммунальщиков, — мой проект борется за звание лучшего проекта недели на «Продукт Радаре». Буду рад любой поддержке 🤗

Название модели: Shuttle 3 Diffusion

Ссылка на модель: https://civitai.com/models/943001?modelVersionId=1058817

Тип модели: #Модель

Количество скачиваний: 300+

Дата загрузки: 14 ноября 2024

Базовая модель: Flux.1 S

Теги: #shuttleai, #photorealistic, #flux, #typography, #complex_prompts

Комментарий разработчика: Shuttle 3 Diffusion оптимизирована для создания детализированных изображений по текстовым запросам. Модель поддерживает режим "refiner mode," который улучшает детали изображения при более длинных сессиях генерации. Отличный выбор для сложных промптов и задач с акцентом на качество.

Источник: @neurosklad 🤖 - все, что нужно, для твоей нейронки!

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

Но сначала нативная, лаконичная и — уже совсем скоро перейдём к делу — ненавязчивая рекомендация: похожие правила публикуются на канале Плохое/хорошее. Это такой тренажёр насмотренности для всех, кто хотя бы иногда работает с текстом.

В тексте больше нескольких предложений — делим его на абзацы

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

В идеале делить текст на абзацы нужно по принципу «один абзац — один вопрос». Например, этот блок отвечает минимум на три вопроса:

Если мы выпишем вопросы и ответим на них, сразу станет понятно, в каком месте нужно сделать паузу и отбить абзац:

Есть и более простой способ проверить уместность нового абзаца: посчитать количество предложений. Только в редких случаях одна смысловая единица не сможет уместиться в 3–5 предложениях. Если в вашем текстовом блоке больше нескольких предложений, скорее всего, настал час абзацев.

В тексте больше нескольких абзацев — добавляем подзаголовки

Здорово, когда текст разбит на абзацы, но если абзацев будет много, объём всё ещё может оттолкнуть. Обычно читатель сначала пробегается по верхам статьи или сообщения и оценивает, стоят ли они внимания. Для такой «навигации» и нужны подзаголовки.

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

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

— Не содержат «шума» вроде дублирующих слов и частиц. Вот пример, когда предлоги явно избыточны, потому что они не добавляют информативности:

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

В перечислении больше нескольких пунктов — оформляем его как список

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

Про оформление списков важно знать две вещи:

— У каждого вида есть своё чёткое назначение. Нумерованный следует использовать, только если важна последовательность пунктов или нужно подчеркнуть их приоритетность. Во всех остальных случаях будет уместен маркированный список. Например:

— В конце пунктов списка ставится либо точка, либо точка с запятой. Если пункты состоят из длинных строк или целых предложений, лучше ставить точку в конце каждого пункта, а новый начинать с большой буквы. В ином случае (как на скрине выше) каждый пункт стоит начинать с маленькой буквы, а завершать его с точкой запятой — кроме последнего: после него ставится точка.

"Лапки" используем только внутри «ёлочек»

Переходим к более тонким правилам типографики. Далеко не каждый читатель обратит внимание на ваши кавычки, но тот, кто это сделает, будет в восторге от внимания к мелочам. Тем более, что правило максимально прямолинейное: в русскоязычных текстах почти всегда используются кавычки в виде ёлочек — «».

Есть другой тип кавычек, и он почему-то распространён сильнее: так называемые лапки — “”. Наверное, их популярность связана с тем, что во многих клавиатурах «лапки» используются по умолчанию. Но единственное место, где они будут уместны, это внутри «ёлочек» — то есть, если нужны кавычки внутри кавычек. Например:

На их сайте было написано: «Компания “Бонанза” занимается всем понемногу».

Тире ставим, если вокруг есть пробелы, когда их нет — дефис

Ещё одна распространённая ошибка связана с горизонтальными чёрточками.

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

• Дефис — самая короткая черта (-), используется, когда нужно соединить частицы, префиксы или сложные слова. Это если говорить, как в учебнике, по факту же достаточно проверить, есть ли пробелы вокруг знака: если нет — смело ставьте дефис.

• Минус — средняя черта (–), которая используется в числовых диапазонах.

• Тире — самая длинная черта (—), используется во всех остальных случаях. Например, между подлежащим и сказуемым или на месте пропущенного члена предложения. Простая проверка: подразумевает интонационную паузу и всегда с пробелами вокруг.

Подытожим лаконичной шпаргалкой с примерами:

Обычно под каждый вид чёрточки заложена своя комбинация клавиш для ввода. Но проще вбить в поиске название знака + слово «скопировать» и, собственно, скопировать. Например: тире скопировать.

В завершении давайте повторим правила:

• Текст из пяти и более предложений стоит разделить на абзацы по принципу «один абзац — одна мысль».

• Если получилось больше нескольких абзацев, стоит добавить подзаголовки и сформулировать их однообразно.

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

• "Лапки" корректно использовать только внутри «ёлочек».

• Тире отличается от дефиса длиной и наличием пробелов между знаком и словами.

Если у вас есть свои приёмы корректного оформления, делитесь в комментариях. Ну и подписывайтесь на канал Плохое/хорошее, там такого много.