Все читатели блога уже общаются на нашем форуме. Ты ведь с ними, не так ли? Войти на форум

Правильный текст в веб-дизайне — Часть 2


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

Заголовки

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

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

Абзацы

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

Ширина строки

Долгое время о ширине строки в веб дизайне никто не говорил, поскольку при нефиксированной, или «резиновой», HTML-верстке ширина строки зависит от того, какой ширины монитор у пользователя. Тем не менее, для удобства чтения есть разница, как сверстан текст: в узкую колонку, в колонку шириной около 50-80 знаков или же в очень широкую колонку (130-150 знаков, как пример).

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

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

Статью прислал: Евгений Мирошниченко, http://www.mirash.ru/

Постовые:

  • Компания Kingston Technology приглашает Вас принять участие в конкурсе Создай свой дизайн для USB-накопителей Kingston. Конкурс продлится до 16-го апреля 2010 года, победитель будет выбран путем открытого голосования онлайн.
  • Чтобы быть успешным блогером, недостаточно заказать профессиональный дизайн для блога и писать в него пусть даже очень хорошие статьи. Чтобы заинтересовать читателя, нужно быть интересной, яркой личностью. Кстати, а вот магазин модной одежды, который может, с учетом сказанного, Вам пригодится.

Комментарии (32) на запись “Правильный текст в веб-дизайне — Часть 2”

  1. Гость 2010.03.05

    Все гут, но точки в абзацах не ставят!

  2. Сергей 2010.03.05

    Не в абзацах а в заголовках вы хотели сказать. И правда, автор сам пишет неправильно заголовки! Кто же в них точки то ставит? Это очень грубая ошибка!

  3. Гость 2010.03.05

    да, вы меня правильно поняли)))от возмущения просто ошиблась))ну раздражает меня это..

  4. mirash 2010.03.05

    Честно что-ли? не ставятся? А кем это определено? не подскажите… «Это грубая ошибка» — неужели — а что, есть справочник по грубым и не очень ошибкам?

    в таком случае, ув. Сергей, у Вас грубая ошибка в проекте «Великие люди» — шрифт подобран не «великий» а больше для коммиксов… еще перечислить ошибки? или все-же каждый дизайнер должен всего лишь придерживаться основным требованиям и понятиям а делать так, как он считает нужным именно в конкретной ситуации?!

  5. Гость 2010.03.05

    mirash [#comment-2147] Дорогой mirash, это азы. В издательском бизнесе я давно. и это действительно грубая ошибка! вы читали книги или газеты, где стоят в заголовках точки? так же если заголовок на сайте или в презентации, то точка не ставится. это азы грамотности

  6. mirash 2010.03.05

    Уважаю мнение профессионалов! не более…

  7. Гость 2010.03.05

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

  8. Безумный Программист 2010.03.05

    Точки убрал — без них действительно лучше смотрится. Вот интересно — после Часть 2 в заголовке точка тоже не нужна?

  9. Гость 2010.03.05

    Дело не только в том, что это смотрится. Это уважением к тем, кто Вас читает.

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

    Делайте выводы

  10. Безумный Программист 2010.03.05

    Гость [#comment-2153], спасибо за Ваши ответы.

  11. Ellana 2010.03.05

    пожалуйста) выйду из тени ;)

  12. Сергей 2010.03.06

    mirash, про дизайн сайта «Великие люди» я знаю, но это не моя проблема, вместо моего какбы-лого владелец вставит свой логотип. Если он будет, вообще дизайн был не принципиален заказчику, один фиг он из него сателлит слепит!

    >> Честно что-ли? не ставятся? А кем это определено? не подскажите…
    Подскажу. Даже в ГОСТах к оформлению курсовых, дипломных и прочих документов это написано. Я конечно понимаю что госты к вебу не пришьешь, но все же. Да и вообще это логично.

    Во всяком случае вы разобрались с заголовками, что очень хорошо! Все учатся на ошибках.

  13. mirash 2010.03.06

    как я Вас понимаю, Сергей, когда мы, как дизайнеры, делаем действительно хороший дизайн а заказчики потом его переделывают как им заблагорассудится! Но, в этом и наша вина есть — ведь мы еще должны не только дизайн навоять а еще и объяснить и доказать заказчику — что именно это, и никак не другое…

    а про точки, да бог с ними — мне вообще не понятно, — кто нибудь смысл статьи понял?

  14. Безумный Программист 2010.03.06

    mirash [#comment-2168], ну я прочитал и думаю что понял :)

  15. mirash 2010.03.06

    Александр, ну конечно я знал — что Вы поняли, я про других… а они всё о точках :)

  16. Сергей 2010.03.06

    mirash [#comment-2168], ну я бы не сказал что я делаю просто суперские дизайны. Все же вполне имеет место на существование. Если сравнить мой первый дизайн с последним, то будет огромная разница, как в композиции так и в оформлении текста. Раньше никакой сетки не знал и не делал, сейчас уже что-то понимаю.
    А вообще так везде, будь то программирование, дизайн… безразницы, все сначала допускают ошибки, и чтобы научить других их не допускать я (да и наверное вы) пишут статьи в своем блоге, сайте и т. д.

  17. Валентин 2010.03.07

    Все правильно сказано!
    Отформатированый текст читается гораздо лучше!

  18. www.megakino.ws 2010.03.10

    Все это было в недавнем прошлом

  19. Безумный Программист 2010.03.10

    http://www.megakino.ws [#comment-2193], и что, по Вашему, из написанного сегодня является устаревшим?

  20. Max 2010.03.11

    Думаю еще катит)

  21. Безумный Программист 2010.03.11

    Max [http://web20.su/2010/03/web-design-text/#comment-2197], кстати, в первой части статьи написано про align=justify, что это «предпочтительный» способ выравнивания (когда текст выровнен и по левому и по правому краю). По-моему, это очень спорный момент — я считаю, что такое выравнивание не очень то и красиво, зато всегда усложняет восприятие текста. Потому на этом сайте оно нигде не используется.

  22. Андрей 2010.03.11

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

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

  23. Безумный Программист 2010.03.11

    Андрей [#comment-2204], мне кажется, упоминание ГОСТ-ов в контексте веб-дизайна не уместно по двум причинам. Во-первых, сетью пользуются граждане разных стран, потому следовать стоит принятым нормам, а не стандартам одной страны. Во-вторых, даже если использовать ГОСТ в качестве основы для дальнейших действий — их замучаешься читать. Или во всяком случае, это намного труднее, чем осилить статью на 2 Кб текста.

  24. Андрей 2010.03.11

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

    ЗЫ: принятые нормы возникают из принятых методов, которые основаны на ГОСТах, но пользуясь «испорченным» телефоном получаешь не принятые нормы, а нормы, которые кажутся принятыми конкретному дизайнеру, со всеми вытекающими.

  25. mirash 2010.03.12

    Соглашусь с вышесказанным, но только частично! Вот Вы Андрей попробуйте используя ГОСТы создать (касаемо текста) сайт в стиле web 2.0!
    выдержка:
    «Размер шрифта. Первое, на что стоит обратить внимание, так это шрифт. Если Вы хотите, чтобы пользователь прочитал Вашу статью, то упростите ему чтение! Сделайте шрифт побольше! Наиболее удобный это 17–18 px.»

    а в ГОСТах сказано что шрифт для основного наполнения — 14_й!
    сами посмотрите эти сайты — и Вы мало что найдете там от ГОСТов, но, — они работают и успешно!
    так что, думаю что к ГОСТам можно и нужно «прислушиваться», но делать все так, как принято именно в дизайне!

  26. Андрей 2010.03.12

    Я и не писал что ими нужно руководствоваться досканально. С другой стороны, ГОСТы допускают соразмерное увеличение шрифта, и если увеличивается шрифт текста, то нужно ответить на вопрос: как увеличить шрифт заголовка. И таких вопросов много.

    ЗЫ: Вы считаете что все абсолютно книги, в том числе в Советское время со строжайшей цензурой и абсолютно соответствующих ГОСТам напечатаны одним шрифтом?
    Я понимаю, что многие знакомы с ГОСТами на уровне «курсовой», но это не причина не следовать ему не в ущерб дизайну.

    «Принято», а вот интересно кем? а у соседа по другому, это тоже принято? А когда? :)

  27. Vitaliy 2010.03.13

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

  28. Андрей 2010.03.14

    Спасибо. Почерпнул новенького.
    Подправлю немного свой текст теперь..

  29. TRSteep 2010.05.05

    А почему нельзя смешивать английские абзацы и красные строки???
    ИМХО так красивее всего…

  30. Безумный Программист 2010.05.05

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

  31. Tigrenok 2010.06.10

    Безумный Программист, да видимо он просто пост оставил, дабы индекс цитирования мегакино.вс повысить)))

  32. mirash 2010.06.10

    не пойму Вас Tigrenok при чем тут тИЦ!?