17 заметок с тегом

типографика

Стиль кнопок и текста

Синхронизирую кнопки с текстовыми стилями. Обычно стилей 4-5, кнопок хватает трёх: размером с основной текст и с подзаголовоки 2-го и 3-го уровней. Или 2-го и 4-го — зависит от задачи. Для массового и броского — 1-го.

Такая синхронизация немного гасит шум и сильно упрощает сбор строк из текста и кнопок. А наличие принципа разгружает голову. При умелой вёрстке упрощает ЦСС и корректировки.

Синхронизирую кегль, интерлиньяж и разрядку, если кнопки не капительные. Начертание чаще сохраняю для жирных и полужирных и «поджирняю» для нормальных и прямых текстовых стилей.

28 мая   вёрстка   интерфейс   типографика

Пробелы

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

→ Неразрывность

ХТМЛ

Мнемоника

АйОС и Андройд

С нулевой шириной

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

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

Классика

Пробел минимальной ширины

Обычно в 1/5 кегля, реже — в 1/6

Зауженный, часто схож с «Thin Space». Не отображается в Сафари, поэтому выкручиваются

Обычный пробел, вводится клавишей «Space»

Шириной с обычный пробел

Кратные кеглю

1/6 кегля

1/4 кегля

1/3 кегля. Ближе других к обычному пробелу

1/2 кегля

Шириной с кегль шрифта

К цифрам

4/18 кегля. Применяют в математических формулах

Шириной с цифру. Используют в наборе таблиц

Экзотика

Шириной с точку

Шириной с иероглиф. Используется в восточных языках

15 мая   код   пробел   типографика

Символы нулевой ширины

Чтобы контролировать внешний вид и поведение текста, обычного пробела не хватает. Например, отделяю пробелом в шестую часть кегля единицы измерения от значений. Или склеиваю предлоги с последующими словами. С раскладкой Бирмана неразрывный пробел вводить легко, но с пробелами, меньше обычного, она не помогает. Поэтому копировал их со страницы «Все о пробелах». Там вконце — таблица. Но всего нужного там нет. Из символов нулевой ширины есть только третий:

Название Юникод ХТМЛ Мнемоника
1 Zero Width No-break Space U+FEFF 
2 Word Joiner U+2060 ⁠ ⁠
3 Zero Width ​Space U+200B ​ ​
4 Zero Width Joiner U+200D ‍ ‍
5 Zero Width Non-joiner U+200C ‌ ‌

Не все эти символы — пробелы. Работают они похожим образом, поэтому их можно перепутать.

В свежем стандарте Юникода (3.2) «Word Joiner» заменил «Zero Width No-break Space», и о последнем можно забыть, несмотря на стройность названия. «Word Joiner» — непробел, но как и пробел определяет границы слов. Это влияет на поиск, парсинг, сортировку и прочее. Символ подходит для склейки конструкций вроде «км/ч» (км⁠/⁠ч).

«Zero Width ​Space» похож на «Word Joiner», но не склеивает слова и растягиваться при выключке по ширине, как прочие пробелы.

Управление внутри слова поручают «Zero Width Non-joiner» и «Zero Width Joiner». Например, чтобы отменить или задать лигатуру (конечно, при наличии нужных символов в шрифте). Эти символы используют в арабской, индийской, тайской, корейской и прочих письменностях без пробелов.

19 апреля   код   типографика
2017   видео   типографика

Сглаживание шрифтов

Оказалось не все матёрые разработчики знают о ЦСС-свойстве «-webkit-font-smoothing», которое сглаживает шрифты. Есть ещё разные хаки, но тут просто свойство с тремя значениями:

none
«...вопреки общепринятому мнению не теоретизирование — это действие, тогда как теоретизирование может соответствовать отсутствию осознанной деятельности, быть „выбором по умолчанию“.

subpixel-antialiased
Непросто изучать (и запоминать) факты, воздерживаясь от суждений и отметая всяческие объяснения.

antialiased
Тяга к теоретизированию с трудом поддается контролю: она, подобно анатомическим характеристикам, входит в наше биологическое устройство, и борьба с ней — это борьба с самим собой.»

Значение «none» бесполезно, а «subpixel-antialiased» и «antialiased» одинаково хороши, но подходят для разных случаев. Для Гельветики лучше «antialiased», а для Гарамона, который на сайте лаборатории — «subpixel-antialiased».

Добавлено позже: на Андройде и Виндоус свойство не работает. В других случаях будет так:

2016   типографика   ЦСС
Ранее Ctrl + ↓