20 “НЕ” веб-типографики


20 “НЕ” веб-типографикиУ каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.


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

2
НЕ используйте подмену стандартных элементов форм изображениями-скриншотами аналогичных элементов из вашей операционной системы. Поверьте, насильно внедрённая вами кнопка в духе Windows 98 вряд ли понравится пользователям MacOS.

3
НЕ мельчите текст. Кегли меньше 9 pt использовать крайне не рекомендуется. Кегли 9 и 10 pt используйте только для незначительных блоков, сносок и подписей. Основной текст публикуйте кеглем не менее 11 pt.

4
НЕ полагайтесь на стандартные значения интерлиньяжа (+120% к кеглю). Нередко следует добавить 1–4 пункта к установленным по умолчанию величинам, это может существенно улучшить восприятие текста. Чаще всего удачным может быть значение 140–160% от кегля. Подберите оптимальное на ваш взгляд. Я использую значения кегль/интерлиньяж следующие: 11/14, 12/16, 13/18.

5
НЕ полагайтесь вообще на какие бы то ни было значения по умолчанию. Помните, что подавляющее большинство из них было придумано на заре зарождения стандартов, и плохо вписываются в современные понятия эстетичности и эргономики. Тщательно проверьте все отступы и положения буллетов в списках, величины сдвига над- и подстрочных символов, размеры элементов форм, шрифты и цвета для определённых тэгов (например, code или cite). И затем опишите новые свойства всех без исключения элементов в каскадных таблицах стилей.

6
НЕ используйте абсолютных единиц при указании кегля шрифта. Размер в пикселях (px) — наиболее жёсткий и опасный метод. Лучше, но не намного — указание в пунктах (pt), т.к. это зависит от разрешения монитора. Совсем хорошо — использовать относительные величины, например, Em. Но, придётся привыкнуть и правильно рассчитывать такие величины.

7
НЕ используйте ничем не мотивированные величины отступов, подобранные «на глазок». Например, 21 или 17 пикселей. Замените их на округлённые значения или кратные 5 (или даже 10), если нет строгой необходимости использовать именно такие «некруглые» величины. Это облегчит задачу вам и кодерам, когда потребуется высчитывать координаты и комбинировать блоки при вёрстке.

8
НЕ делайте колонки с текстом слишком широкими и слишком узкими. Если у вас фиксированные колонки с текстом мелкого кегля, то минимальная ширина — 140–160 пикселей. Если у вас «резиновая вёрстка», следите за тем, чтобы наиболее широкая колонка не занимала больше половины всей ширины сайта. Оптимальный размер колонки при кегле 11–12 пунктов: 50–80 символов на строку.

9
НЕ позволяйте тексту близко прилегать к другим текстовым блокам, рамкам или границам плашки, на фоне которой размещён текстовый блок. Убедите себя в том, что минимальный отступ всего, связанного с текстом — 10 пикселей, а оптимальный — 15–20 пикселей. Не жалейте давать вашим текстам больше пространства для жизни, не бойтесь пожертвовать вашей драгоценной графикой ради улучшенной читаемости и гармоничности текстовых блоков.

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

11
НЕ делайте «полной выключки» (align=«justify»). Это хорошо работает в книгах и газетах (благодаря переносам), но на сайтах вызывает лишь недоумение. Кроме того, нередко следует воздержаться от применения «красных строк», поскольку этот способ выделения абзаца лучше всего работает как раз в комбинации с «полной выключкой», а при стандартном значении align=«left» «красная строка» выглядит несколько нелепо.

12
НЕ забывайте о «висячих» строках, «сиротах» и «вдовах», о предлогах в конце строк, о неразрывных пробелах (в названиях или именах собственных) и корректных типографских знаках (например, тире и кавычках). Выверенная типографика даже на предварительном наброске макета — признак профессионализма. Можно воспользоваться, например, «Типографом».

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

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

15
НЕ используйте в качестве «рыбы» одно и тоже предложение, размноженное несколько раз («Здесь будут новости. Здесь будут новости. Здесь будут новости»). Для вас не составит труда найти любой подходящий текст для демонстрации того, как будет смотреться текстовый блок.

16
НЕ копируйте несколько раз схожие блоки рядом друг с другом (например, анонсы новостей). Не поленитесь всякий раз поменять текст, чтобы блоки выглядели как на настоящем сайте, а не как на спешно собранном черновике, даже если это и есть черновик. То же самое относится к изображениям. Если вы скопировали блоки событий несколько раз и поменяли текст, поменяйте и картинки рядом с текстом. Ведь в интернете полным-полно изображений на любой вкус. А поскольку чаще всего все тексты в вашем макете — «рыба», то и картинки подойдут любые.

17
НЕ показывайте вашему заказчику незаконченные блоки или места, где вы оставили надпись вроде «А здесь будут новости». Выделите несколько минут времени и хотя бы в общих чертах набросайте этот блок. Ведь это не сложно. Проще всего — скопировать текст или изображения с сайтов конкурентов или партнёров вашего клиента, для пущей безопасности убрав все упоминания об этих конкурентах. Но помните, что это лишь временная мера и предназначена только для демонстрации клиенту. См. правило №20.

18
НЕ оставляйте на местах предполагаемых рекламных баннеров пустые места или закрашенные прямоугольники. Не поленитесь и найдите в Сети реальные баннеры нужного размера. Можно даже потрудиться и найти баннеры подходящей цветовой гаммы. В случае чего, их легко потом можно будет отключить. Зато у заказчика не возникнет сомнений относительно того, что «макет выглядит как-то пусто», если в нём зияют унылые дыры, заполненные одним и тем же цветом и едва заметной надписью «Здесь баннер».

19
НЕ используйте изображений с несглаженным текстом, если это не часть вашей гениальной задумки и не укладывается в стилистику pixel art. Тогда пользователи, включившие сглаживание, не заметят режущих глаз элементов. А те, у кого антиалиасинг выключен, воспримут сглаженный текст на картинке как должное. Просто подберите удачный шрифт и метод сглаживания. Несглаженный текст — анахронизм, и если при отображении HTML-текста использование антиалиасинга может быть спорным, то несглаженный текст в изображениях выглядит просто уродливо. Помните и посетителях ваших сайтов! О сглаживании шрифта можно почитать в моих предыдущих статьях.

20
НЕ забудьте по завершении работы над сайтом заменить все «рыбные» тексты и изображения на реальные. Помните, что использованные вами в качестве «рыбы» материалы — чья-то интеллектуальная собственность.

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

UPD 1. Спасибо equeny за правило №21: НЕ следуйте слепо всем этим правилам, думайте своей головой. Я присоединяюсь к этому правилу: всегда основательно думайте и не спешите в своих действиях, и тогда ваши труды будут оценены по заслугам.

UPD 2. По совету хабраюзеров некоторые правила поменялись местами. Спасибо!

(C) Habrahabr.ru


Комментарии на Хабре по данной статье:


seraph
15 февраля 2009, 22:28


3.
Если задавать размер шрифта пунктами, то бишь абсолютными величинами, то на мониторах с разными размерами и разными разрешениями можно порой получить абсолютно нечитабельные тексты. ИМХО, наилучший способ использовать em или (в перспективе) ex, но самый первый, базовый размер лучше задать в пикселях и отталкиваться в дальнейшем от него. Вообще же многие величины почти наверняка придётся задавать в пикселях (бордеры, размеры картинок), поэтому использование пикселей для нетекстовых блоков и em для строчных элементов видится мне наиболее гибким решением. Хотя и там бывают сложные случаи.


6.
Что опасного в задании размеров в px? Раньше были проблемы в 5-м осле с невозможностью увеличить размер шрифта, заданного в пикселях. Сейчас это в прошлом. Какие конкретно проблемы вы имеете в виду?

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

8.
Ширина колонки текста вытекает из количества умещающихся в ней слов. А это число из используемого кегля и языка, на котором написан текст. 140-160 px — цифра, взятая абсолютно с потолка, сугубо из практики, абсолютом и правилом для теории она быть не может. На вскидку: а для мобильных телефонов (именно для телефонов, не смартфонов), вы это правило порекомендуете?

Для интерльяжа, опять же ИМХО, проще использовать множителями: не нужно будет лишний раз править абсолютные значения при изменении размера шрифта.

11.
В тех текстах, которые вбиты на сайт намертво лично я использую выключку по ширине и вставку ручками мягких переносов между слогами. Процесс нудный, но для исключительных случаев вполне можно и его применить. Во всех нормальных браузерах и IE 7+ работает без проблем. А вот нормальных скриптов для расстановки переносов, увы, так и не встретил: очень часто лажают.


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

Совет N+1:
не забывайте про «версию для печати». И оформляйте её так же ответственно, как самостоятельный документ, второе Я вашего сайта.


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


17 июня 2011  0 9 352   Версия для печати


Похожие публикации

О попытке оценки поисковых запросов

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

SEO в разработке eCommerce проектов (20 правил для разработчика)

В последний год мы написали много статей по UX / UI проектированию eCommerce проектов и не только. Концепция проекта и интерфейсы – это, безусловно, очень важно, однако есть еще несколько крайне... читать далее

8 способов свести дизайнера с ума

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

Клиентская оптимизация / Динамические стили: быстро и просто

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

Чего делать не следует при заказе сайта

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

7 правил эффективного SMO продвижения

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

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте Картофельные чипсы с сыром www.globusgurme.ru.