Читаем Как спроектировать современный сайт полностью

Шестнадцать юнитов делают сетку не только более сложной, но и более структурированной, что нам пригодится позднее. Более того, общее количество блоков кратно четырем, что соответствует правилу, приведенному в главе 3: «Чем проще сетка, тем она эффективнее». Это правило гласит, что сетки должны быть как можно более простыми с математической точки зрения, то есть юниты должны объединяться в колонки на основе простых расчетов, которые можно произвести в уме. Шестнадцать блоков шириной 60 пикселов каждый дают в сумме 960 пикселов, создавая тем самым удобную математическую основу. Мы знаем, что 2 юнита имеют ширину 120 пикселов, 3 юнита – 180 пикселов и т. д. Математическая выгода такой основы становится еще более очевидной, когда мы начинаем учитывать промежутки. Между юнитами нужны промежутки, поэтому при объединении блоков в колонки справа от полученной колонки образуется промежуток, размер которого можно рассчитать. Если ширина промежутка должна составлять 10 пикселов, то, вычитая это значение из ширины юнита, мы получим 16 юнитов шириной 50 пикселов, что еще больше упрощает расчеты.

Создание базовой сетки

После того как мы создали колоночную сетку, можно перейти к созданию базовой сетки. Напомню, что базовая линия – это невидимая линия, на которой расположены буквы. Сетка образуется множеством базовых линий. Расстояние между линиями определяется кеглем текста.

Эффективная сетка, образованная базовыми линиями, хорошо дополняет более крупные элементы, например, заголовки и подзаголовки, но базовые линии в первую очередь предназначены для размещения основного текста на странице. Как правило, для основного текста на сайтах выбирается кегль от 11 до 14 пунктов, но могут использоваться и другие значения. Можно выбирать практически любой размер шрифта, но наш глаз лучше всего воспринимает строки длиной от 60 до 80 символов. Строки, содержащие 80 или более символов, трудно читать, поэтому старайтесь их не использовать.

Возвращаясь к колоночной сетке, можно увидеть, что самая широкая зона, предназначенная для размещения текста, находится в левой области, где 10 блоков и 9 промежутков образуют область шириной 590 пикселов. Этого места достаточно для размещения основной колонки текста в шаблоне страницы статьи – самом большом из всех шаблонов. Но даже в такой широкой колонке перед абзацами обязательно должны использоваться промежутки, упрощающие визуальное восприятие, поэтому 2 юнита и 2 промежутка мы будем использовать как свободное пространство. В результате мы получаем 8 юнитов и 7 промежутков общей шириной 470 пикселов. Даже в этом случае рекомендуется добавить дополнительные отступы внутри колонки (мы еще поговорим об этом), поэтому фактическая ширина составит около 450 пикселов.

Использование образцов помогает определить правильную длину строки и размер шрифта

Какой размер шрифта подойдет для выбранной ширины?

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

При использовании шрифта Georgia Regular 12 пт в строку помещаются около 80 символов, шрифта Georgia Regular 14 пт – чуть больше 60 символов. Другие дизайнеры и пользователи могут выбрать другие размеры, но мы используем Georgia Regular 13 пт. Результат составит примерно 70 символов на строку.

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

Вставляя образец текста в колонки разной ширины, можно оценить правильность выбора размера шрифта

Перейти на страницу:

Похожие книги

Основы программирования в Linux
Основы программирования в Linux

В четвертом издании популярного руководства даны основы программирования в операционной системе Linux. Рассмотрены: использование библиотек C/C++ и стан­дартных средств разработки, организация системных вызовов, файловый ввод/вывод, взаимодействие процессов, программирование средствами командной оболочки, создание графических пользовательских интерфейсов с помощью инструментальных средств GTK+ или Qt, применение сокетов и др. Описана компиляция программ, их компоновка c библиотеками и работа с терминальным вводом/выводом. Даны приемы написания приложений в средах GNOME® и KDE®, хранения данных с использованием СУБД MySQL® и отладки программ. Книга хорошо структурирована, что делает обучение легким и быстрым. Для начинающих Linux-программистов

Нейл Мэтью , Ричард Стоунс , Татьяна Коротяева

ОС и Сети / Программирование / Книги по IT
97 этюдов для архитекторов программных систем
97 этюдов для архитекторов программных систем

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

Билл де Ора , Майкл Хайгард , Нил Форд

Программирование, программы, базы данных / Базы данных / Программирование / Книги по IT
Программист-прагматик. Путь от подмастерья к мастеру
Программист-прагматик. Путь от подмастерья к мастеру

Находясь на переднем крае программирования, книга "Программист-прагматик. Путь от подмастерья к мастеру" абстрагируется от всевозрастающей специализации и технических тонкостей разработки программ на современном уровне, чтобы исследовать суть процесса – требования к работоспособной и поддерживаемой программе, приводящей пользователей в восторг. Книга охватывает различные темы – от личной ответственности и карьерного роста до архитектурных методик, придающих программам гибкость и простоту в адаптации и повторном использовании.Прочитав эту книгу, вы научитесь:Бороться с недостатками программного обеспечения;Избегать ловушек, связанных с дублированием знания;Создавать гибкие, динамичные и адаптируемые программы;Избегать программирования в расчете на совпадение;Защищать вашу программу при помощи контрактов, утверждений и исключений;Собирать реальные требования;Осуществлять безжалостное и эффективное тестирование;Приводить в восторг ваших пользователей;Формировать команды из программистов-прагматиков и с помощью автоматизации делать ваши разработки более точными.

А. Алексашин , Дэвид Томас , Эндрю Хант

Программирование / Книги по IT