15 примеров отличной типографики

[s1y]

Где я вам могу плюсик поставить за такую отличную наводку?)

Отличные примеры не только по типографике, но и по композиции, по цвету.

Спасибо!

[Heath]

Нууу, ILT всем строго рекомендовано добавить в RSS-ридеры. :)

[lydinka]

Спасибо за перевод, типографика это то, что стоит продвигать в массы.

[Alan]

Спасибо, действительно есть чему поучиться.

[trueClearThinker]

Подборка отличная. Жаль только, ни одного русского проекта...

[dracula_x]

Ну как сказать, здесь http://designr.it/ автором значится некий Петр Федорчук. Хотя фамилия по большей части украинская.

[efix]

... а написана как-то по польски.

[grossu]

Поищите-ка сайты с хорошей кириллической типографикой. Кроме студии letterhead и не вспоминается никто.

[trueClearThinker]

Ну, в том-то и дело... Обидно, знаете ли..

[grossu]

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

[unclegluk]

http://decknetwork.net/ очень понравился — распечатать главную страницу и в рамочку на стенку как произведение искусства.

http://designr.it/ — Знакомый шрифт на логотипе, завтра на работе посмторю. Я с чем-то подобным игрался и это было очень круто.

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

[dmitry_h]

Большинство примеров действительно грамотные и очень интересны для изучения. Единственное что мне непонравилось так это "злоупотребление" курсивом.
А автору вот этого сайта http://jontangerine.com/ нужно вообще памятник поставить за верстку на емах. Очень интересная методика, которая позволяет масштабировать колесом мышки сайт во всех браузерах (включая firefox и IE). Отличный пример реализации такого подхода - ikea.com.

Недавно на глаза попалась советская агитация в виде блогнота выпущенного к какой-то годовщине д.р. Ленина. Так вот, типографика там такого уровня, которое не позволяет себе даже современные богатые компании. Грамотные отступы, размеры шрифтов, расположение агитационных материалов. И это все при том, что качество печатного оборудования оставляло желать лучшего - низкий ДПИ и кол-во цветов.
И все в полном соответствии с бренд-буком СССР!!!

[Heath]

Насчёт http://jontangerine.com согласен полностью. На мой взгляд — образчик типографически корректной вёрстки.

[unclegluk]

Обожаю советскую верстку, на многих книгах можно учиться. Собираю коллекцию книг времен совка и анализирую качество верстки, пока лидируют 30-е и 50-е года.

[Heath]

Кстати, зря. :) Советская типографика очень отринула зрелищность ради экономии. И Гильо клеймил Гессена из-за буржуазного пристрастия к «украшательствам», а не к эффективности. Поэтому мы имеем кургузые поля по ГОСТам и мизерное количество шрифтов. Конечно, всех художников не передушили, остались отличные издания, но их бесконечно мало…

[dmitry_h]

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

[Heath]

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

[ulitin]

А кто-нибудь можеть обьяснить как высчитан размер картинки в емах?
width:48.125em;
height:12.375em;
У него картинка лежит в диве на котором эти размеры и на ней такие же, на боди размер шрифта 100... Как он это посчитал???

[DmitryBaranovskiy]

12.375 × 16 = 198, 48.125 × 16 = 770
Размер шрифта по-умолчанию 16 px. То есть 1 em = 16 px. А дальше простая арифметика. :)

[ulitin]

Понятно, что перемножать, но почему дефолтное значение 16? В цссе на куче элементов в том числе и на боди font-size: 100%; Или 16 это внутрибраузерно?

[Heath]

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

[dmitry_h]

DmitryBaranovskiy псе правильно написал. Но есть способ сделать работу с емами более комфортной, необходимо задать %-ый размер шрифта для body: body{ font: 62.5%/1.4 Arial, sans-serif }
И теперь все размеры выставляются в пропорции 1/10.
Более подробную информацию можно прочитать здесь:
http://cssing.org.ua/2006/10/16/font-siz…

[dmitry39]

респект, отличная статья! :) очень помогло

[efix]

может я чего-то недопонимаю, но почему в этих работах при всей типографике так мало подчеркнутых ссылок?

[unclegluk]

Буквальное следование правилам дизайна убивает мозг. Иногда лучше забить на правила и сделать красиво.

[alex_blank]

потому что когда ссылок много — это создает отвратительный визуальный шум и затрудняет чтение текста

во многих случаях достаточно выделения цветом

подчёркивание нужно лишь тогда, когда надо привлечь внимание к ссылке, выделить её из общей массы текста (к примеру, кнопка ответить здесь, на хабрахабре)

[Minasyan]

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

[Heath]

Всё-таки, будем справедливы, это статья Джона Бредли из ILT.

[Minasyan]

Под "...из вашей статьи..." я подразумевал "...из статьи которую вы, alizar, предоставили нам в переведённом виде..." Прошу прощения за мой русский;)

[Guinplaine]

Странно, чёрный, серый и оранжевый основные цвета на большинстве представленных сайтов

[despoth]

Не увидел здесь ничего особо интересного. Типовые примеры в духе Яна Чихольда. Просто очевидные архетипы традиционного дизайна. Простые акциденты, строгие колонки, скучные цветовые решения, никакой изюминки. Автор явно противник тенденций, идущих от Дэвида Карсона :) Экстремальная типографика уже не в ходу? А ведь если все начнут создавать такие «шедевры» аккуратными серифами в духе газетного дизайна для УоллСтрит?...

[despoth]

Предыдущий дайджест оттуда же оказался намного интереснее. Как в композиционном и цветовом, так и собственно в шрифтовом исполнении: http://ilovetypography.com/2008/01/02/go…

[dmitry39]

оцените пожайлуста мой пример на емах, по-моему неплохо получилось

http://www.spravkavsem.ru/ (крутить колесо обязательно :)

[ctapnom]

Ничего так, меняется… Отдельно понравилось "телефонное" расположение цифр в блоке кодов. Из недостатков: Поля ввода и кнопки при масштабировании ведут себя не совсем адекватно, что, в целом, понятно (Firefox/2.0.0.14). Да, и присмотритесь к ммм… алфавиту. Города на "Ь" и "Ъ" — сильно, а вот где "Я"? :-)

[dmitry39]

на счет кнопок в курсе спасибо :) а с буквами - действительно, сразу не заметили вообще ;D