Типографика в вебе

[@risotto]

помогают создать пространство между буквами, а также отделить один знак от другого

Да ладно! Наоборот. Засечки связывают текст в линию, скрадывая пробелы между символами. Это аксиома академической школы шрифтового дизайна.

[@TutMee]

Спасибо, за замечание. Исправил. Видимо, в процессе правок, корректировок и переноса статьи на сайт послетали тексты.

[@Loki3000]

Размер текста в вебе не должен быть меньше 12 пикселей

А что такое размер текста? Это кегль, интерлиньяж или, может, высота букв без выносных элементов? А то внезапно это понятие появилось в тексте — как хочешь, так его и понимай.

[@Free_ze]

Вероятно, имелось в виду значение font-size

[@Loki3000]

Это очевидно. А какой из размеров задается этим параметром? Что такое «высота текста 12px»? Это в каком именно месте его надо измерять?

[@Loki3000]

Ну вот, прояснили так, что ничего не прояснили. Пришлось брать и самому мерить. Получилось что источник по ссылке прав: высота шрифта составляет кегль + некий отступ сверху. Для 12 и 16 шрифта этот отступ составил 1px, для 24 и 36 — 2px. Резонно предположить что этот отступ как-то вычисляется от высоты шрифта.
Так что метод исключения не сработал.
И сглаживание, кстати, на высоту шрифта не влияет — только на ширину.

[@Loki3000]

И как это так метод исключения не сработал, если однозначно привел к ЦСС-свойству font-size из двух возможных: font-size и line-height? Очень даже сработал.

От font-size к font-size и привел? Это было ожидаемо:)

Методом исключения получается «кегль».

А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.

[@JeStoneDev]

А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.

Высота букв как и высота области размещения букв зависит от параметров шрифта.
Тут можно подробнее почитать

[@TutMee]

конечно же имеется ввиду кегль. Именно = размер текста))

[@dmitry_ch]

Бросайте уже эти «пиксели». Пиксель — это элемент картинки (picture element), который на все большем проценте экранов даже уже и не виден.

А число 12 — вообще, откуда вы его взяли. Знаю людей, которые и с меньшими шрифтами рады работать (им удобно), знаю, наоборот, тем, кому и более крупный кегль совершенно не нравится. И это не только вкусовщина, просто у кого-то зрение и чувство эстетики одни, у кого-то — другие.

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

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

[@TutMee]

Дизайнеры рисуют в пикселях, верстальщики верстают тоже в пикселях, так зачем же их бросать? Мне кажется еще рано это делать.))

Шрифт, размером меньше 12-ти — это шрифт, которым написано число и год над вашим комментарием. (10px) Если весь текст был бы такого размера — читать было бы сложновато.

Браузеры пока не умеют переносить часть слова на следующую строку (без подключения специального плагина), поэтому выравнивание на всю ширину пока лучше не делать.

[@helshi]

Правильно! Зачем нам эти пиксели! Давайте работать "на глаз". Тут — так, там — сяк. Главное — со вкусом, который у всех разный)))

[@dmitry_ch]

Браузеры пока не умеют переносить часть слова на следующую строку

Уже умеют, хотя пока зависит от браузера. Для нормальной совместимости неплохо расставить в отдаваемом клиенту тексте невидимые (soft) переносы (­), чтобы браузер даже без словаря переносов осилил этот процесс.

А с пикселями: мне самому нравится указывать размер в точках, но с переходом на экран высокого разрешения (4K или Retina) мы сталкиваемся с попытками браузера на большем числе точек отрисовать меньшее разрешение, т.е. все равно теряем прямой контроль на процессом в старом смысле «точка-в-точку». В то же время дизайн, построенный на относительных размерах, в иных случаях тоже неплох.

В общем, я лично жду единообразного отображения размеров между браузерами. Пока без css-ресета тяжеловато, да.

[@ewal]

Отличная статья! Думаю про трекинг тоже стоило сделать выноску) Автор молодец!

[@ewal]

ппц, за что -1 поставили?) Видимо ставит гамнодизайнер, который не знает что такое трекинг в шрифте?))) Простите

[@TutMee]

Спасибо за отзыв! ;)

[@fredjansen25]

За использование для основного текста шрифтов отличных от дефолтных (font-style статья) и с отличным от дефолтного размера (font-size: 100%) в браузере дизайнерам нужно отрывать ноги!
А то поналепят серифов с размером кегля 8 пикселей, так на экране с высоким разрешением читать невозможно :(

Оставьте пользователю право решать, каким шрифтом какого размера он хочет читать текст!

Спасает только Reader-плагин в браузере.

[@ewal]

да вы батько, далеки от понятия дизайна) Думаю вам стоит больше набираться опыта

[@Areso]

Если у нас не моноширинный шрифт, то чем плохо выравнивание по ширине? Не дизайнер, просто спрашиваю.

[@hardtop]

Нет ничего страшного в выравнивании по ширине. В печатных изданиях этим давно пользуются и всё ок — какой-нить PageMaker еще 20 лет назад умел менять кернинг и размер пробела так, что текст нормально читался, и правый край колонки смотрелся хорошо.

А вот браузеры и Word — вот они так не умеют менять кернинг, поэтому просто меняют размер пробела. Расстояние между словами скачет, что сильно ухудшает читаемость. И так верстают только...

[@hardtop]

Если дизайнер вставляет в макет Lorem Ipsum — это грусть-тоска. Броский заголовок, написанный хорошим шрифтом всегда лучше продаёт (заказчику, клиенту, потребителю), чем нерелевантный сгенерированный текст. Попробуйте на сайте Икеи или Эппл поменять контент на Лорем Ипсум… Дрянь же получится.

[@zahmTOD]

Заголовки да. Можно поднапрячься, и выдумать что-то правдоподобное. А вот с массивами текста уже не выйдет, особенно если у проекта текста чуть больше чем в лэндинге.
Я, например, использую fishtext.ru, вместо lipsum.com в русско-язычных проектах.

[@OlegZH]

Интересно, а кто-нибудь пытался делать Web-вариант TeX'а?

[@maria-tyan]

Так Википедия вполне себе для отображения сложных математических формул использует старый добрый TeX.

[@OlegZH]

Речь идёт о том, чтобы писать весь исходный код в TeX'е, а на выходе получать то, что можно просмотреть в браузере.

[@vintage]

Да, есть конвертеры текса в хтмл. Не всё конвертирует правда.

[@helshi]

Интересно оформлены иллюстрации)) Но не хватает примеров или рисунков к тексту во второй части статьи — «Что мы делаем не так?».

[@TutMee]

Спасибо!) Больше примеров и рисунков будет в следующей статье по этой теме;)

[@curt]

Длина строки не должна превышать 600 px.

С этим нельзя согласиться. Может быть лучше чтобы длина строки не превышала 35em? :) Магические числа.

Вообще это больше зависит от количества символов в строке, от размера шрифта, от расстояния просмотра. Что мешает сделать строку на 1200px размером-шрифта в 34 px и наблюдать это на 27" мониторе с вьюпортом в 2500px откинувшись на спинку кресла?

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

Опять же, чем длиннее строка тем больше интерлиньяж, чем короче строка, тем он может быть меньше.