Ноябрь 21, 2007
Табличная типографика в вебе (baseline grid)
Вчера прочитал книгу под названием
CSS. Рецепты программирования

Интересная книга, некторые пробелы закрыл. В частности, интересно было узнать о правильном задавании размера шрифта. Прочитал про так называемую 62.5 технику, сильно распространенную среди верстальщиков.
Сегодня увидел интересную статью на лист апарте “Как задавать размер текста в цсс“. Автор в нескольких итерациях показал одинаково хороший метод задания размеров шрифта для всех браузеров.
<style type="text/css">
body{ font-size:100%; line-height:1.125em; }
bodytext p { font-size:0.875em; }
.sidenote { font-size:0.75em; }
</style>
<!--[if !IE]>-->
<style type="text/css">
body { font-size:16px; }
</style>
<!--<[endif]-->
В той же статье паралельно множество ссылок промелькнуло. Меня затянуло в навигацию по ним.
Можно выделить в заголовок то что я нашел далее.
Табличная типографика
Сейчас довольно таки популярная техника в сети. Setting Type on the Web to a Baseline Grid автор показал как можно сверстать страницу в табличном виде. Вот что получилось.
В помощь может прийти фоновый рисунок, чтоб проверять соответствие таблице. Тут целый пост на эту тему и много аналогичных фонов.
А еще нашел целую подборку статей на эту тему, из пяти частей: Раз, два, три, четыре, пять.
Самым вкусным оказалось, как ни странно, то что сделали ребята из Яху. Давно уже видел эту поделку, но как то внимания не обращал. Они разработали генератор табличного лайаута. Самое приятное, что он позволяет генерировать резиновый шаблон. Недостаток в том что кривые имена цсс класов, которые он генерирует, тяжеловато читать.
Кто не слышал, у гугла есть цсс фреймворк под названием Блупринт. Мне лично очень нравится. Для него тоже есть тулза - генератор лайаута. К сожалению, не генерирует резиновый лайаут.
