alizar May 19 2008 at 18:27

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

2 min

11K

Typography *

Translation

+50

Comments 36

s1y May 19 2008 at 19:41

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

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

Спасибо!

Heath May 19 2008 at 19:46

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

UFO just landed and posted this here

lydinka May 19 2008 at 20:58

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

Alan May 19 2008 at 21:01

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

trueClearThinker May 19 2008 at 21:17

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

dracula_x May 19 2008 at 21:28

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

efix May 19 2008 at 22:25

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

grossu May 19 2008 at 23:03

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

trueClearThinker May 19 2008 at 23:31

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

grossu May 19 2008 at 23:35

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

unclegluk May 19 2008 at 21:18

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

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

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

dmitry_h May 19 2008 at 21:22

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

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

Heath May 19 2008 at 22:27

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

unclegluk May 19 2008 at 22:29

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

Heath May 19 2008 at 22:53

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

dmitry_h May 20 2008 at 12:18

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

Heath May 20 2008 at 12:26

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

ulitin May 20 2008 at 00:24

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

DmitryBaranovskiy May 20 2008 at 04:52

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

ulitin May 20 2008 at 11:05

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

Heath May 20 2008 at 12:13

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

dmitry_h May 20 2008 at 14:30

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

dmitry39 May 20 2008 at 17:22

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

efix May 19 2008 at 22:19

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

unclegluk May 19 2008 at 22:34

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

alex_blank May 19 2008 at 22:53

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

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

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

Minasyan May 19 2008 at 23:14

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

Heath May 19 2008 at 23:17

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

Minasyan May 19 2008 at 23:24

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

Guinplaine May 20 2008 at 09:30

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

despoth May 20 2008 at 10:24

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

despoth May 20 2008 at 10:31

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

dmitry39 May 20 2008 at 17:25

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

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

ctapnom May 21 2008 at 09:41

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

dmitry39 May 21 2008 at 11:49

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