Оформление текста: Базовые правила оформления текста и изображений на сайте

18 правил визуального оформления текста

Today we will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle…

Category: News / January 27, 2023

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

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

Поэтому при разработке текста для сайтов надо учитывать не только стандартные требования типографики (о них мы тоже скажем в этой статье), но и специфику текстов для веб. Ниже — 18 правил об этом.

1. Выбор шрифта — учитывайте характер

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

2. Избегайте стандартных шрифтов

Прошли те времена, когда одним из безусловных требований к текстовому оформлению сайтов было использование только стандартных шрифтов для текста (это было связано с тем, что отображались только шрифты, установленные на пользовательском устройстве). Сейчас есть возможность использовать сторонние шрифты (например, Google Fonts, читайте подробнее об этом тут), так что ваша фантазия практически ничем не ограничена. Если вы используете Times New Roman или Arial, тем самым вы говорите миру, что вам неизвестны другие варианты 🙂 Вернитесь к правилу №1 и подумайте над характером вашего текста, сайта и аудитории. Скорее всего, стандартные шрифты не отразят его в полной мере.

3. Избегайте клише 

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

4. Используйте два разных шрифта

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

5. Контраст

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

6. Размер имеет значение?

Когда говорим о шрифтах — безусловно. Минимальный размер текста, который можно прочитать — 8 пикс. Но на многих устройствах и разрешениях он будет уже не виден. Мелкие сноски, примечания — можно использовать шрифт размером 10 пикс. Для основного текста — 12-14 пикс, но в некоторых случаях можно и крупнее. Здесь правило такое: чем больше размер текста, тем меньше шрифт. Очень длинная статья, набранная шрифтом в 15 пикс, вызовет недоумение. Как и небольшой абзац текста, набранный 12-м.

Для подзаголовков — 16-18 пикс, для заголовков — от 18 и далее, в разумных пределах, конечно.

7. Не используйте все заглавные

Не набирайте текст заглавными буквами. При чтении человеческий мозг воспринимает слова как формы, так быстрее и эффективнее. Но когда текст написан ПОЛНОСТЬЮ ЗАГЛАВНЫМИ, мозг видит слова как прямоугольники, и восприятие текста замедляется. Помимо этого, на эмоциональном уровне текст заглавными воспринимается как крик.

8. Будьте осторожны с текстом на цветном фоне

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

9. Ширина текстового блока

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

Для того чтобы текст читался легко, ширина текстового блока также должна быть увязана с размером шрифта: чем меньше шрифт — тем меньше блок. Сложно читать текст в 12 пикс, если длина строки — во весь экран. Если эта же строка будет набрана в 16 пикс, будет уже гораздо проще.

10. Межстрочное расстояние

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

11. Для больших объемов текста — читаемость

Читаемость (не путать с читабельностью, которую мы несколько раз упоминали ранее) — определяет, насколько легко читать длинные тексты. Читаемость зависит от совокупности параметров, которые мы уже перечисляли выше, и некоторых других: сам шрифт, его размер, межстрочное расстояние, длина строки, межбуквенное расстояние (кернинг). Понятие кернинга актуально в основном для полиграфии, на вебе с этим обычно не работают, хотя при необходимости им также можно управлять.

12. Разборчивость

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

13. small caps???

14. 

15.

16. Выделение и подсветка

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

17. 

18. Важность пунктуации

Здесь мы говорим о пунктуации в коротких текстах — заголовках, лозунгах, девизах и рекламных слоганах. В отличие от основного текста, знаки пунктуации в этих элементах несут дополнительный смысл и придают выразительность.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar pellentesque neque, at egestas nibh vestibulum at. Cras accumsan tellus vitae risus sollicitudin sodales. Phasellus in purus a nunc pharetra congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac purus justo. Cras hendrerit velit eu libero sagittis mollis. Donec sed accumsan ante. Nulla sit amet lectus non est hendrerit sagittis id venenatis eros. Nulla eget enim dui, a euismod ante. Ut ut neque felis, semper posuere libero. Cras suscipit diam in leo luctus aliquet. Integer accumsan egestas cursus. Suspendisse pharetra, eros non fermentum interdum, risus odio dictum justo, et fermentum mi ante sit amet diam. Donec id velit nulla. Vivamus quis placerat enim.

Cras metus ipsum, venenatis eget molestie et, auctor et tortor. Vivamus at mi magna. Proin pulvinar gravida tortor, id euismod leo volutpat placerat. Fusce rutrum eleifend neque, ut bibendum justo mollis a. Vestibulum tincidunt dictum justo et varius. Quisque id nisl orci, nec pretium mauris. Maecenas malesuada rhoncus tortor in ultrices. Phasellus non mi tortor. Nullam consectetur rutrum sapien, et dictum odio lacinia nec. Proin felis ligula, auctor ac feugiat sit amet, volutpat quis enim.

Tagged under:

визуальное оформление тексты

Thank for sharing!

Оформление текста для веб

«Вы всегда можете получить то, что хотите, но если постараетесь, то, возможно, это будет то, что вам нужно».
Мик Джаггер

В этом обзоре перечислены основные элементы юзабили (usability) – удобства пользования, – которые мне хотелось бы учесть при разработке своего нового сайта.

Материал разбился на две части: на рекомендации, относящиеся к веб-дизайну, и на раздел веб-типографики, то есть оформления текста для веб.

Сделанной в 2003 году первой версии настоящего сайта я благодарен – он помог мне найти новую работу. Но теперь устарел.

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

Обзор, возможно, будет интересен начинающим журналистам, которые решили создать собственный ресурс или модернизировать существующий.

Больше того, я убежден, что познакомиться с азами html и самому сверстать простенький сайт просто необходимо любому молодому человеку, планирующему связать жизнь с журналистикой. Журналистика движется в онлайн, и пощупать своими руками механику веб – полезно.

Блоггеры тоже входят в целевую аудиторию статьи, поскольку так или иначе форматируют свои текстовые посты.

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

Мы никогда не сможем изменить первое впечатление о себе

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

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

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

25 важнейших элементов юзабилити

Веб-дизайн

01. Стиль
02. Цвет
03. Композиция страницы (верстка)
04. Навигация
05. Единство стиля
06. Скорость загрузки
07. Названия страниц
08. Форматирование изображений
09. Подписи к изображениям
10. Пустота
11. Пиктограммы

Веб-типографика (форматирование текста для экрана)

12. Контрастность текста и фона
13. Длина строки
14. Структурирование текста
15. Оформление заголовков
16. Кегль (размер шрифта)
17. Гарнитура (тип шрифта)
18. Интерлиньяж (межстрочное расстояние)
19. Выключка (выравнивание)

20. Акцентирование фрагментов текста
21. Списки
22. Эмотиконы (смайлики)
23. Оформление ссылок
24. Валидность кода
25. Размер текста

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

01. Стиль

Сумма всех элементов дизайна (№№ 02-25). «Одежка», по которой встречают.

Веб-дазайнер Курт Клонингер (Curt Cloninger) в своей недавно вышедшей на русском языке книге «Свежие стили веб-дазайна» анализирует:

• Готический стиль
• Гранж
• Плакатный стиль
• Панк-роковый
• Суперминиатюрный городской
• Минималистский
• Стиль чертежей и моделей
• Стиль 50-х годов

Ясно, что выбор стилей практически безграничен. Сознательный отказ от стиля – тоже стиль. Михаил Мошков, создатель Библиотеки своего имени заявляет на главной странице «С 1994 года библиотека не меняла дизайн. И не планирует».

При самом общем подходе, выбиря стиль, создатель ресурса движется по оси «навороченный – пуританский». Считается, что в моде сейчас лаконичные сайты. Так, например, подчеркнуто аскетичный ресурс поддерживает гуру юзабилити Якоб Нильсен.

Счастливая возможность, даруемая нам интернетом, – соединение на одном сайте текста, изображения, анимации, звука, видео. Очень полезная возможность для теле- и радиожурналистов. Но здесь я бы призвал к целомудрию: видео на сайте, значит видео, подкасты (радиопередачи в Сети), значит подкасты. А не пихать на одну страницу все возможности мультимедиа.

Моему грядущему сайту больше подойдет простой дизайн, поскольку на нем будут преобладать тексты.

02. Цвет

Цвет и освещенность (темный дизайн, светлый дизайн):

• Помогают серферу мгновенно отличать один сайт от другого. Цвет, после названия – самая устойчивая ассоциация с содержанием сайта.
• Вводят посетителя в нужное эмоциональное состояние. Look and feel – «увидел и почувстовал»: официоз или фан, готичная смурь или свет.
• Разделяют интерфейс на смысловые поля. Так, например, зона меню, зона основных текстов, зона комментариев, зона инфографики и т. д. на сайте могут быть разнообразно раскрашены.
• Цвет дифференцирует разделы друг от друга как любят делать на гламурных сайтах
• Цветом маркируют ссылки в активном состоянии и ссылки, по которым уже состоялся переход

Словом, цвет – это индивидуальность, эмоция, узнаваемость, понятность сайта.

Вместе с тем, цвет – это своего рода дресс-код, хорошие манеры в Сети. Дизайнеры рекомендуют применять на сайте 3-4 цвета (не больше). При этом один может быть темным, два средних, четвертый самый открытый, яркий.

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

Часто встречается совет выбирать непременно из 216-ти так называемых безопасных цветов, которые поддерживаются всеми броузерами. Эта рекомендация во многом устарела. Современные мониторы качественно передают миллионы цветов. Так что мы можем смело назначать любые цвета.

Некоторые газетные сайты любят в Сети воспроизводить традиционный черно-белый стиль бумажного издания. К примеру, деловая газета «Взгляд». Парадокс, но смотрится свежо.

03. Композиция страницы

Первый вопрос, который приходится решать: фиксированная будет ширина страницы или «резиновая», то есть растянутая на ширину экрана?

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

О композиции. Начинающему журналисту, по совместительству дизайнеру-чайнику, достаточно соблюдать два правила:

• Принцип золотого сечения
• Принцип верстки «по модулю»

Золотое сечение применяется при назначении высоты header’а (шапки) сайта, ширины колонок и проч. Страницы, сверстанные с соблюдением принципа золотого сечения, выглядят гармонично и уравновешенно.

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

Типичные композиционные ошибки веб-верстки:

• Нет иерархии и акцентов. На странице все выглядит одинаково, монотонно. Главная задача композиции (верстки) – управление взглядом читателя. Попав на страницу, читатель должен сразу «положить глаз» на главное. Обычно функцию ай-стоппера выполняет фотография-ссылка или заголовок-ссылка, помещенный на самое видное место.
• Симметричная трехколонная верстка. Это когда посередине размещается широкая колонка основного контента, а слева и справа – одинаковые по ширине колонки меню, рекламных баннеров и проч. Смотрится скучно, тесно.

Композиционно бывают полезны такие элементы веб-дизайна как рамки и линейки. Линейки отделяют зоны веб-страницы одну от другой. Рамки притягивают глаз к важным местам вашей страницы, например текстовым рекламным ссылкам.

Поскольку, как читатели, мы воспитаны в эпоху Гутенберга, многие (не все!) правила верстки в оффлайне сохраняют силу и в интернете. Надеюсь, ряд полезных рекомендаций можно почерпнуть в статьях «Дизайн и верстка: базовые элементы» и «Дизайн и верстка: все начинается с макета».

На практике я, скорее всего, поступлю так: скачаю понравившийся готовый шаблон страницы и изменю его под свои задачи… до неузнаваемости. Благо, бесплатных шаблонов в Сети навалом.

04. Навигация

Основные правила веб-навигации:

• Правило трех кликов. Самый «далеко запрятанный» материал сайта должен лежать на расстоянии не глубже трех кликов от главной страницы.
• Я где? На любой странице ресурса пользователь должен знать, в каком разделе он находится, откуда пришел, куда может пойти. Эту задачу решают, в частности, сквозные меню, текстовые ссылки, баннеры.
• Быстрый возврат. Внизу каждой страницы рекомендуют ставить ссылку «В начало». На каждой странице ставят ссылку «На главную» или пиктограмму-ссылку «Домик». Логотип сайта на каждой странице по умолчанию является ссылкой на главную (начальную) страницу.

05. Единство стиля

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

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

Кроме того, дизайнеры-профи ценят возможность поиграть с оформлением разных разделов сайта.

06. Скорость загрузки

Сегодня проблема не так остра, как в 90-е годы – широкополосный доступ становится все доступнее. И все равно, страницы должны быть легкими.

Утяжеляют страницы не тексты. Утяжеляют картинки.

Как снизить «вес» изображения:

• Уменьшить его разрешение до сетевого стандарта в 72 dpi
• Уменьшить линейные размеры изображения до оптимально минимальных. При необходимости показать фотографию большой и четкой – выложить ее отдельно и дать на нее ссылку. Особо учтивые сообщают в теге alt, сколько килобайт весит большое фото.

К удобству тех, кто не владеет Photoshop’ом, в Сети в изобилии имеются онлайн-редакторы изображений.

07. Названия страниц

Название страницы постоянно маячит наверху окна броузера. Что важнее, оно выводится в результатах выдачи поисковиков, и, вместе с описанием страницы (тег description), зовет пользователя на нашу страницу (или, увы, не зовет).

В интересах ранжирования в названии страницы – содержании тега title – обязательно должны присутствовать 1-2 ключевых слова.

08. Форматирование изображений

Касательно композиции, ракурса, эмоциональности фото и прочих важных для СМИ вещей смотрите статью «Фото в прессе». Общие правила фотожурналистики продолжают работать в вебе.

Имеются и отличия. На правильной газетной полосе фотографии обязательно разных размеров и пропорций. В Сети наоборот – снимки стандартизованы. Это связано с жесткостью табличного каркаса веб-страниц.

Важно для картинок в вебе:

• Вес (см. 06. Скорость загрузки)
• Наличие подписи (см. 09. Подписи к изображениям)

09. Подписи к изображениям

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

• Содержание тега alt индексируется роботами и имеет некоторое значение для ранжирования страницы (при условии, что в подпись включено ключевое слово)
• Информацию о теме снимка получит и тот читатель, кто отключил в броузере показ графики
• «Фотография без подписи – деньги на ветер» (Главред «Известий» Владимир Мамонтов, GQ, октябрь 2006, стр. 246). Каждый опубликованный снимок должен быть подписан, таков стандарт журналистики.

10. Пустота

Не нужно бояться пустого пространства на веб-странице! Пустота – это воздух, легкость, стиль. Пустота – это нынче модно.

Если страница сверстана правильно, пустоту иногда «съедает» сам пользователь, увеличивая для удобства чтения размер шрифта.

Любой текст в окружении пустоты выглядит очень значительно!

11. Пиктограммы

Пиктограммы (иконки) – небольшие картинки-символы – помогают идентифицировать сайт или раздел сайта. Разнообразят маркированные списки. Помогают навигации. Оживляют дизайн.

Пиктограмма с расширением .ico отображается рядом с url сайта в адресной строке броузера, в «Избранном» и в «Закладках», улучшая запоминаемость ресурса, повышая трафик.

12. Контрастность текста и фона

Цвет и яркость текста и фона подчиняются одному требованию: чтобы первый легко читался на втором. Я точно не стану класть зеленые буквы на желтое поле. И наоборот.

Многие считают, что лучше черных букв на белом фоне ничего нет. Другие предпочитают чуть снижать контраст – назначают серенький фон или на белый фон кладут темно-серые буквы.

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

13. Длина строки

Большинство веб-дизайнеров сходится во мнении, что наиболее удобна для чтения строка длиной 9-10 слов или 50-70 знаков (считая пробелы).

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

14. Структурирование текста

Более или менее пространный текст, лежащий в Сети монолитным массивом, – трагическая ошибка. Никто без жгучей необходимости не станет читать опус, от которого рябит в глазах.

Я, как очень многие, тексты разбиваю:

• На главки и подтемы. Каждой предпосылаю собственный подзаголовок.
• На логические абзацы. Абзацы отделяю друг от друга пустой строкой (вместо этой статьи представьте себе неподъемный «кирпич», если бы я этого не делал!)

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

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

Разбиение текста на абзацы – простейшая операция, доступная блоггеру при оформлении блога.

15. Оформление заголовков

Заголовки следует выделять тегом h2 &mdash h6, а не тегами для форматирования основного текста. «Заголовочные» теги h* весьма значимы для эффективного индексирования страницы роботами поисковиков.

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

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

16. Кегль (размер шрифта)

Броузеры позволяют увеличить или уменьшить шрифт загруженной веб-страницы. (Проблема в том, что большинство пользователей-новичков об этом не знает.)

Относительно кегля специалисты советуют:

• Воообще не задавать размер шрифта – пусть юзер сам установит величину букв, какая его устроит.
• Задавать размеры шрифтов в относительных единицах (используя оператор em, проценты или слова bigger, smaller)

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

Правда, размер знаков зависит от разрешения экрана у пользователя. Буква при 800х600 выглядит в два раза больше, чем при 1600х1200 на том же самом мониторе. Единственное, что мы знаем – высокие разрешения применяются все чаще, так что ориентироваться лучше на них.

17. Гарнитура (тип шрифта)

В онлайне чаще всего применяются рубленые шрифты (sans serif):

• Arial
• Verdana
• Helvetica
• Tahoma

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

При этом заголовки иногда верстают шрифтами с засечками (serif):

• Times
• Times New Roman
• Georgia
• Сourier

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

Я не слежу пристально за эволюцией веб-шрифтов, но интуиция подсказывает мне, что современные компьютеры позволяют гораздо больше, чем разрешают советчики. Пожалуй, на своем будущем сайте я назначу приоритетным какой-нибудь Bauhaus, или Futura, или Impact, или Lucida. А то от ариалов-вердан уже тошнит.

18. Интерлиньяж (межстрочное расстояние)

Установка интерлиньяжа больше значения по умолчанию, – например 150%, заметно улучшает удобочитаемость. Межстрочное расстояние связано с длиной строки: чем длиннее строка, тем больше должен быть интерлиньяж.

19. Выключка (выравнивание)

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

20. Акцентирование фрагментов текста

В Сети принято выделять слово или фразу:

• Полужирным
• Курсивом
• Цветом текста или фона. Нередко цветным «маркером» выделяют лиды статей.

Опытные люди не советуют злоупотреблять при наборе верхним регистом: считается, что слова из заглавных букв в Сети воспринимаются как ОКРИК.

Акцентирование слов и предложений в массиве текста имеет значение. Пользователи редко читают веб-страницы слово за словом. 79% юзеров (по данным John’а Morkes’а) лишь просматривают страницу, выхватывая отдельные слова и фразы.

«Все исследования нового типа чтения показывают, что электронные тексты читают не целиком, а кусками. Читатель нового века сам выбирает, что именно ему читать» (Роже Шартье, профессор, «Книжное обозрение» № 41, 2006, стр. 3).

21. Списки

Не знаю, хорошо ли это – уметь «мыслить списками», но маркированные и нумерованные списки позволяют изложить материал коротко, в удобной для просмотра форме. Опять же, списки хорошо «цепляют» скользящий взор юзера.

22. Эмотиконы (смайлики)

Для начала – цитата из Владимира Набокова, относящаяся к 1969 году: «Я часто думаю, что необходим специальный знак пунктуации для улыбки &mdash некая вогнутая линия или лежащая на боку круглая скобка».

Мечта автора «Лолиты» сбылась в Сети. Эмотиконы или смайлики широко используются для выражения самых разнообразных эмоций, которые обуревают авторов текстов в момент создания оных.

23. Оформление ссылок

Дизайнеры разработали множество видов ссылок и сценариев их поведения при подводе курсора. Сегодня ссылки не обязательно подчеркнуты линией. Но желательно, чтобы ссылка менялась – активировалась – при наведении на нее курсора. Если это не так, пользователь может счесть ссылку мертвой и – не кликнет по ней!

Вдобавок, должна «измениться в лице» ссылка, по которой состоялся переход. Это удобно: не надо запоминать, где ты был, где еще нет.

24. Валидность кода

Неразрывный пробел &nbsр не позволяет броузеру отрывать слово от слова, знак от знака. Например, чтобы в «и т. д.» буква «д.» ни у кого и никогда не перелетала в следующую строку, в коде ставят неразрывный пробел: «и т.&nbsрд.»

Неразрывный пробел иногда используется, чтобы подвинуть слова и строки на странице (когда других средств не хватает).

Тире – черта более длинная, чем дефис. В коде тире выглядит так: &mdаsh

Существуют два вида кавычек:

• Кавычки-лапки » «. В html-коде: &quоt
• Кавычки-елочки « ». В html-коде пишутся: &laquо (левая) и &raquо (правая).

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

Троеточие в коде обозначается не тремя точками, а &hеllip

Знак copyright &copy: &coрy

Знак registered &reg: &rеg

Больше на тему валидного html-форматирования текста смотрите в статье «Как это пишется в интернете».

И в «Экранной типографике» Артемия Лебедева.

Правильный (валидный) код улучшает индексирование страниц.

25. Размер текста

Мне приходилось встречать рекомендации, что оптимальный текст &mdash на 3-4 экрана. Часто я вынужден игнорировать этот совет. Какого размера надо, такой текст и пишу.

Не случайно этот «элемент» я поставил на последнее место в своем субъективном рейтинге элементов веб-дизайна и веб-типографики для начинающих журналистов.

Вместе с тем желаю (не всегда успешно) себе придерживаться великого правила «Текст должен быть коротким, если он не уникальный».

стиль оформления текста | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

стиль оформления текста

— CR

• Глобальное использование

  0% + 95,79% знак равно 95,79%

Метод определения типа, стиля и цвета линий в свойстве text-decoration. Их можно определить как сокращение (например, text-decoration: line-through dashed blue ) или как отдельные свойства (например, text-decoration-color: blue )

Chrome

1. 4–25: не поддерживается
2. 26–56: отключено15 по умолчанию9
3. 15% — Partial support»> 57 — 108: Частичная поддержка
4. 109: Частичная поддержка
5. 110 — 112: Частичная поддержка

Edge

1. 12 — 18: не поддерживается
2. 79 — 108: частичная поддержка
3. 444415
4. 79 — 108: частичная поддержка
5. 4444: Partiate

: 108: 108: 100036: 108: 108: 100036: 1086: 108: 108: 108: 108: 108: 108: 108: 108: 108: 108: 108: 108: 108: 108:

Safari

1. 3.1 — 7: не поддерживается
2. 00% — Partial support, requires this prefix to work: -webkit-«> 7.1: Частичная поддержка
3. 8 — 12: Частичная поддержка
4. 12,1 — 16,2: частичная поддержка
5. 16,3: частичная поддержка
6. TP: Partiation Hapertive
7. 16.3: Частичная поддержка
8. TP: Partiation
9636 3913636 39136.
1. 2 — 5: не поддерживается
2. 6 — 35: Частичная поддержка
3. 36 — 108: Частичная поддержка
4. 109: Частичная поддержка
5. 00% — Partial support»> 110 — 111: частичная поддержка

Opera

9. 809080

Opera

808080809080908090809080

Opera

809080

Opera

.- 34: не поддерживается

35 — 43: отключено по умолчанию

44 — 91: Частичная поддержка

92: Частичная поддержка

IE

1. 5.5 — 10: не поддерживается
2. 11: не поддерживает

636

6.

Chrome для Android

1. 109: Частичная поддержка

Safari на iOS

1. 3.2–7.1: Не поддерживается
2. 8–16.2: Частичная поддержка
3. 190 1013 Интернет0014
   1. 4 — 6.4: Not supported
   2. 7.2 — 18.0: Partial support
   3. 19.0: Partial support

   Opera Mini

   1. all: Not supported

   Opera Mobile

   1. 10 — 12.1: Not supported
   2. 72: Частичная поддержка

   Браузер UC для Android

   1. 75% — Partial support»> 13.4: Частичная поддержка

   Браузер Android

   1. 2.1–4.4.4: Не поддерживается
   55

   Firefox for Android

   1. 107: Partial support

   QQ Browser

   1. 13.1: Partial support

   Baidu Browser

   1. 13.18: Partial support

   KaiOS Browser

   1. 2.5: Partial support

   Все браузеры поддерживают версию CSS2 text-decoration , которая соответствует только значениям text-decoration-line ( underline , и т. д.)

   Ресурсы:

   Ошибка реализации Firefox

   MDN Web Docs — text-decoration-color

   MDN Web Docs — text-decoration-line

   MDN Web Docs — text-decoration-skip

   MDN Web Docs — text-decoration -style

   Свойство CSS: text-decoration | HTML Dog

   Подчеркнутый, надчеркнутый и зачеркнутый текст.

   Сокращенное свойство, объединяющее text-decoration-line , text-decoration-style и цвет оформления текста .

   Возможные значения

   Список , разделенный пробелами , содержащий значения, представляющие text-decoration-line , text-decoration-style и text-decoration-color .

   Значение	Описание	Пример
   [строка] (эквивалент значения text-decoration-line — может быть несколько значений)	Линия задана явно. Стиль по умолчанию сплошной . Color по умолчанию соответствует свойству color текста.	подчеркивание
   [строка] [стиль] (эквивалент значения (значений) text-decoration-line и значения text-decoration-style )	Линия задана явно. Стиль задан явно. Color по умолчанию соответствует свойству color текста.	над чертой пунктирной
   [строка] [цвет] (эквивалент значения (значений) text-decoration-line и значения text-decoration-color )	Линия задана явно. Стиль по умолчанию равен твердый . Цвет задан явно.	проходной красный
   [строка] [стиль] [цвет] (эквивалент значения(й) text-decoration-line , значения text-decoration-style и значения text-decoration-color )	Линия задана явно. Стиль задан явно. Цвет задан явно. Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт