О типографике для web

[d0ublezer0]

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

Я не имею ввиду расстановку лапок, длинных тире, неразрывных пробелов и прочих штуковин, облегчающих чтение.

Я имею ввиду, рецепты по определению оптимального размера шрифта, интерлиньяжа и расстояния между словами/символами.

Анализируя CSS код некоторых именитых студий, обнаруживаю, что зачастую размеры выставлены до сотых долей. И - смотрится!

Понимаю, что люди "вылизывали" внешний вид. Но, как?

Никто не хочет поделиться рецептами?

Edited July 4, 2010 by d0ublezer0

[Verder]

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

Я не имею ввиду расстановку лапок, длинных тире, неразрывных пробелов и прочих штуковин, облегчающих чтение.

Я имею ввиду, рецепты по определению оптимального размера шрифта, интерлиньяжа и расстояния между словами/символами.

Анализируя CSS код некоторых именитых студий, обнаруживаю, что зачастую размеры выставлены до сотых долей. И - смотрится!

Понимаю, что люди "вылизывали" внешний вид. Но, как?

Никто не хочет поделиться рецептами?

Сейчас великий советчик Sorrow придет, который не сделал ни одного сайта и даст совет Он все знает.

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

Но что делать, приходится мириться.

Советы... а что тут посоветуешь. Просто то, как выглядит шрифт на странице зависит не только от правильно подобранного размера, интерлиньяжа и.т.д, но и от общего оформления сайта.

Я например обычно в CSS (в body) указываю размер 62.5% - body {font-size:62.5%;}, что соответствует размеру 10px. И для каждого блока подбираю размер в em. Кто-то любит указывать размер в процентах. Рецепта нет.

Что касается правил написания дефисов, кавычек и.т.д. в русском языке, то для начала, для простоты понимания можно воспользоваться отличной штукой под названием "Типограф" - http://www.artlebedev.ru/tools/typograf/

Просто вставь туда текст и нажми "Оттипографить". Выдаст результат оформленный по всем правилам. Потом просто вставляй его в хтмл.

Edited July 4, 2010 by Verder

[d0ublezer0]

Ну, типографом я уже давно пользуюсь.

Я говорю именно о приемах подбора размеров шрифтов и отступов

[Verder]

Ну, типографом я уже давно пользуюсь.

Я говорю именно о приемах подбора размеров шрифтов и отступов

Хм. Все на глаз.

[s0rr0w]

Сейчас великий советчик Sorrow придет, который не сделал ни одного сайта и даст совет Он все знает.

Ты наглый врун. Я сделал около сотни сайтов.

[Verder]

Ты наглый врун. Я сделал около сотни сайтов.

Не пойти бы тебе в лес погулять... около сотни Дай хоть один кроме убогой акварели Да, кстати, если ТЫ сделал около сотни сайтов, то дай хоть один, на котором будет твой копирайт. Эх, жаль нельзя передать звук пердежа губами

Я и сам делаю, и на студии работаю иллюстратором и дизайнером - и в любой из них подтвердят, что эту работу сделал человек с моим именем и фамилией.

А у тебя? *пердеж губами*.

d0ublezer0, этот советчик щас наговорит советов опять с три короба. Он же умный. Только вот не делает нихрена. А так - ну прям профессионал, куда деваться

[d0ublezer0]

Господа, я понимаю вашу безграничную любовь друг к другу, но не могли бы вы высказаться по теме и помочь скромному труженику в борьбе с типографикой?

На глаз - да, может быть. Только вот глаз должен быть наметаный.

[s0rr0w]

Не пойти бы тебе в лес погулять... около сотни Дай хоть один кроме убогой акварели Да, кстати, если ТЫ сделал около сотни сайтов, то дай хоть один, на котором будет твой копирайт. Эх, жаль нельзя передать звук пердежа губами

Я и сам делаю, и на студии работаю иллюстратором и дизайнером - и в любой из них подтвердят, что эту работу сделал человек с моим именем и фамилией.

А у тебя? *пердеж губами*.

Ты все еще наглый врун. merlin.net.ua

Ставить свои копирайты на сайте - моветон еще тот.

На глаз - да, может быть. Только вот глаз должен быть наметаный.

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

Для верданы, тахомы, ариала лучше ставить line-height: 1.4; Размер шрифта должен быть более 8 пунктов. Расстоянием между словами лучше не баловаться. Размеры до сотых долей выставляют те, кто вообще не рубит в CSS. Типографикой занимаются те, кто любит дурную работу.

[Игорь Ермаков]

Соров, Вердер, патентуйте уже образ, про вас обоих можно написать роман в жанре психологической беллетристики. Подумайте над этим.

[s0rr0w]

Соров, Вердер, патентуйте уже образ, про вас обоих можно написать роман в жанре психологической беллетристики. Подумайте над этим.

Патенты на образы не выдают. Учите матчасть, уважаемый.

[Игорь Ермаков]

Ну тогда напишите книгу или сценарий к фильму в свободное время, денег поднимите. Шерлок Холмс, Питер Блад, все с реальных людей срисованы.

Edited July 4, 2010 by Игорь Ермаков

[s0rr0w]

Кстати, дизайну сайта Мерлина более 6 лет. Его чуток подубили, но, стоит отдать должное, все еще держат в адекватном состоянии.

[d0ublezer0]

Да, и еще что-то вспомнилось..

Относительно использования нестандартных шрифтов.

@font-face сейчас вроде все современные браузеры понимают?

[s0rr0w]

Да, и еще что-то вспомнилось..

Относительно использования нестандартных шрифтов.

@font-face сейчас вроде все современные браузеры понимают?

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

[Verder]

d0ublezer0, а есть ли какой-то конкретный случай/сайт/макет, в котором ты хотел бы, чтобы со шрифтами все было красиво и нарядно?

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

На глаз то на глаз, но все же некоторые правила я для себя выработал.

Edited July 5, 2010 by Verder

[d0ublezer0]

Verder, макет как раз разрабатывается. Нужный мне шрифт, Hortensia, будет использоваться в заголовках текста и главном меню.

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

А так можно было бы конечно и через PHP картинки генерить.

[Verder]

Verder, макет как раз разрабатывается. Нужный мне шрифт, Hortensia, будет использоваться в заголовках текста и главном меню.

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

А так можно было бы конечно и через PHP картинки генерить.

Ты имеешь в виду Hortensia вот отсюда, с паратайпа? http://fonts.ru/pstore/

Я бы не стал использовать его для заголовков. Это очень сложный и претенциозный шрифт в том смысле, что его потом будет непросто состыковать с основным шрифтом, которым будет набран контент.

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

Но дело, конечно, твое.

Edited July 5, 2010 by Verder

[Verder]

Вот примерчик с гортензией.

http://freeway-design.ru/font/

Небольшая подсказка. Когда в фотошопе рисуешь заголовок, то чтобы шрифты лучше выглядели, используй:

1. Если темный шрифт на светлом фоне, то в Blending options попробуй заюзать Drop shadow c параметрами Opacity от 16 до 22% (подберешь) Distance 0px и Size 5px.

В параметрах шрифта поставь Sharp

2. 1. Если светлый шрифт на темном (черном и близким к черному ) фоне, то в Blending options попробуй заюзать Drop shadow c параметрами Opacity 100% (подберешь) Distance 0px и Size 5px.

В параметрах шрифта поставь Smooth

[d0ublezer0]

Спасибо за советы. Однако, в смоем случае, сайт будет построен на Joomla, И все заголовки будут генерироваться динамически, основываясь на заголовках статей/пунктах меню. Отсюда - рукописные заголовки не получится сделать.

Я, конечно, не дизайнер. Но, по моему, получилось вполне сносно. Сейчас будет ссылка

Было бы, наверное, уместнее разместить в обсуждение работ, но всё же, как бы в продолжение темы:

Просьба не кричать "говно", а, если возможно, выдать объективную критику.

Да, он будет резиновым.

Edited July 5, 2010 by d0ublezer0

[Verder]

Спасибо за советы. Однако, в смоем случае, сайт будет построен на Joomla, И все заголовки будут генерироваться динамически, основываясь на заголовках статей/пунктах меню. Отсюда - рукописные заголовки не получится сделать.

Я, конечно, не дизайнер. Но, по моему, получилось вполне сносно. Сейчас будет ссылка

Было бы, наверное, уместнее разместить в обсуждение работ, но всё же, как бы в продолжение темы:

Просьба не кричать "говно", а, если возможно, выдать объективную критику.

Да, он будет резиновым.

А че, мне нравится, молодец.

Единственное (но это к дизайну как к таковому не относится) что можно было бы как-то по другому представить, так это ссылку "Прочитайте подробнее о компании...".

Я бы прижал влево и как-нибудь сформулировал по другому. Типа - "Хотите узнать о нас больше?".

Да, и попробуй к цветному мороженому (эскимо слева) применить немного Sharp-эффекта.

[d0ublezer0]

Спасибо.

Это в общем, почти законченный набросок.

Тексты еще редактировать, ссылки там и прочее.

[mishka]

@font-face сейчас вроде все современные браузеры понимают?

Они то поддерживают, даже не такие и современные (ие6-7). Но по хорошим делам нужно чтобы шрифт был либо бесплатным, либо что бы ты его купил, и в случае чего смог доказать это.

[d0ublezer0]

Ну купить - не проблема, он стоит-то 800 рублей всего.

[Verder]

Ну купить - не проблема, он стоит-то 800 рублей всего.

Я сейчас, помимо углубленного изучения Action Script озадачился разработкой собственного шрифта. Пока что одного. Интересная штука однако, очень затягивает.

[d0ublezer0]

Мишка, что-то ие6 мою гортензию не воспринял..