Выбранный для проекта шрифт (или шрифты) хорошо посмотреть в деле. Это особенно важно для бесплатных и любительских шрифтов, в которых могут вылезать огрехи.
Опубликовано
Если верстки еще нет — проще всего набрать панграмму для 9—21 размера и выборочно для заголовков и посмотреть что происходит:
IBM Plex Sans. Фаeрфокс, ретина
Проверять лучше каждый кегль подряд, а не выборочно. Смотреть на сглаживание и возможные искажения пропорций.
Сглаживание
В мелких кеглях все может превращаться в нечитаемую кашу, в крупных верхняя площадка буквы может быть более или менее резкой из-за полупикселя. То есть ±1px в размере меняет восприятие и читаемость.
PT Serif, в 41 кегле верхняя площадка строчных чуть плывет. На неретине это заметно сильнее.
Конечно в разных браузерах все будет выглядеть немного по-разному, при монохромном и субпиксельном сглаживании — тоже, об этом надо помнить. А еще есть мак и виндоус. Ах да, и ретина :—)
Искажение пропорций
Бывает что в определенных кеглях пропорции шрифта искажаются. Строго говоря в мелких они всегда будут искажены, потому что количество пикселей недостаточно для выявления всех особенностей, заложенных автором шрифта.
Но бывает что пропорции выглядят чуть уже или шире. Любимый пример Charmer с PT Serif:
Такая проверка не что-то фундаментальное, а быстрый тест на пригодность выбранного шрифта в дизайне, позволяющий за пятнадцать минут понять с чем имеешь дело.
В Big Sur пропали точки-индикаторы открытых программ в доке. Сначала я подумал что это какой-то баг новой системы, но оказалось что их можно включить или выключить в настройках, причем по умолчанию они выключены.
Вот этот флажок:
Индикаторы в доке (насколько помню) не убирали еще никогда, и по мне это очень сомнительное решение — убирать то, к чему люди привыкали годами. Как теперь понять какая программа открыта?
Я на удаленке со второй половины марта, то есть уже семь месяцев. По масштабу это первый опыт такой длительности, которому пора подвести промежуточные результаты.
Опубликовано
Это моя кукуха, готовая в любой момент поехать :—)
💩 Удаленка — это сложно При работе из дома к списку дел добавляются две глобальные задачи: сохранить физический и психологический уровень. Что помогает:
Поддерживать форму
Физическая форма — это база, на которой держится все остальное: думание и решение задач, психическое состояние. Без физнагрузок организм постоянно деградирует. Если раньше в тонусе держали только ежедневные поездки на метро и прогулки до дома то их отсутствие сильно скажется на всем остальном.
Бонусом к поддержанию формы идет влияние на психику — любая активность помогает разгрузить мозг. Побегать-попрыгать в середине дня — это здорово.
В первые дни, когда была эйфория от нового, понял что сам и многие коллеги работают на износ — по десять (и больше) часов. Судя по рассказам бывалых это типичный сценарий начинающих удаленщиков, подпитанный страхом того, что делаешь мало. Переработки рано или поздно приводят к отвращению от работы, которая к тому моменту будет занимать все твое время.
Что поможет: соблюдение режима и жесткое ограничение начала и конца рабочего времени. Более-менее стандартизовал — в шесть или половину седьмого выключаю компьютер и иду гулять. Мне помогает «найт шифт» — монитор ровно в 18:00 становится теплее, ненавязчиво напоминая мне что пора заканчивать работу.
Делать перерывы и отходить от компьютера
Перерывы — полезное средство для адекватности и оценки ситуации, потому что работая 8—10 часов подряд можно упороться и потерять связь с реальностью. Есть конечно «метод потока», но тут немного про другое.
Работаю помидорками. Экспериментировал с режимом в большую и меньшую сторону, но вернулся к 25/5. Долгое время забивал на звонок таймера и работал дальше, оставаясь без перерыва, но сейчас соблюдаю правило: прозвенел будильник — выхожу из-за стола.
Если возможно — лучше менять место в течении дня: писать саммари встреч сидя с ноутбуком на диване, рисовать за рабочим компом, делать наброски прототипов в блокноте на подоконнике. Если от компа не оторваться — помогает время от времени выходить на балкон и смотреть вдаль. Ну или на деревья, зелень, перспективу улицы.
Задача — сохранить адекватность и более-менее постоянный уровень энергии.
Убрать телефон подальше
Телефон нужен только для звонка (ваш кэп). Когда он лежит рядом с компьютером то все равно отвлекает. Даже экраном вниз. Даже выключенный.
Убирал телефон в дальний ящик, так что для созвона мне нужна минута-полторы на поиск. И кажется это верный путь: снизилась тревожность и раздражительность, стало меньше отвлеканий.
Гулять
Прогулки помогают вылечить «замкнутость мозга» — когда сидишь все время в квартире и новое видишь только через браузер. Добавляет бодрости и новых впечатлений, нагружая физически.
Делать дела по дому
Такие дела здорово подпитывают и помогают разбавить монотонность дня.
Заметил особенность: обычно такие задачи переоцениваешь во времени. Например кажется что на то чтобы помыть ванную необходимо минимум полчаса. На самом деле четыре-пять минут: залить средством и пройтись щеткой (2 минуты), смыть водой и почистить (еще две). Протереть локально где-то пыль — около тридцати секунд. Собрать белье с сушилки — пара минут.
Регулярно проветривать
Штука оказалась реально полезная. В проветренном помещении лучше думается и работается. Прохлада не беда когда под рукой любая одежда и горячий чайник на кухне.
Вести дневник и наблюдения
Начал писать когда понял что не помню что было позавчера. Или на той неделе. Недавно перечитал записи и понял что есть что улучшать — описывать больше фактов и оставлять зацепки, по которым мозг сможет восстановить картину прошедшего.
Рефлексировать
Дневник или записи это отличный материал для дизайна себя самого. Алгоритм простой: записываем → читаем и думаем. Отвожу для этого час-полтора в субботу. Хорошо если в это время появятся новые мысли и идеи.
В выходные — отдыхать
Пробовал уезжать в ближайшие пригороды, это прямо комбо: физнагрузка до усталости (за день проходишь 15—20 км), прогулка и куча новых впечатлений из-за того что многое видишь в первый раз.
Повышать осознанность
Удаленка поначалу — серьезное испытание для психики. Привычные паттерны ломаются, монотонность давит, начинает раздражать то на что раньше не обращал внимания. Каждый день превращается в жизнь раба на галерах — ты фигачишь в закрытой комнате, часто в полумраке, без видимой цели и смысла впереди. Не понимая что, зачем и почему ты делаешь очень сложно усиленно работать продолжительное время.
Инструменты осознанности: рефлексия, дневник и медитация. Ну или просто посидеть пятнадцать минут в тишине наедине с собой.
Поддерживать связь
Созваниваться просто так и общаться. Тут у меня был фэйл — понял что ничего не знаю о проектах и чем занимаются ребята, чувствовал себя как будто работаю на фрилансе хрен пойми на кого. Созвоны и ревью действительно важны для того чтобы не чувствовать оторванность от остального мира.
Искать интерес
Почти все приемы, описанные выше, направлены на то чтобы разгрузить мозг и сделать его более гибким. Вообще одна из главных задач — подкинуть себе новизны. И избегать монотонности и искусственных впечатлений (из браузера).
Важно чтобы было интересно жить, приемы и методы могут быть различными. Один мой знакомый переезжает с места на место — жил полгода в Индии, сейчас где-то в Средней Азии (Паша, если ты это читаешь — привет!).
Полезные ссылки™
Вот крутые ребята, которые на удаленке несколько лет, пишут о то что им помогло:
Начал пролистывать для восстановления знаний, в итоге перечитал заново. Интересно читать такие книги по мере того, как изучаешь код — сначала ничего не понятно, при следующем прочтении все очевидно. Страничка, которую Итан создает из главы в главу: https://responsivewebdesign.com/robot/
Книга небольшая, легко прочитать за несколько вечеров. Часть текста безнадежно устарела (что естественно) но основы будут актуальны всегда. Состоит из глав-принципов отзывчивого веб-дизайна:
Гибкая сетка
Собственно база — как сделать резиновый макет, формула расчета и принципы. Итан описывает полностью отзывчивый дизайн — с гибкими полями и горизонтальными отступами, важно понимать что есть другие пути построения сетки.
Гибкие изображения
Полезные советы как сделать картинки отзывчивыми. Хотя много примерав на флоатах, но тем не менее будет полезна для понимания того, что можно сделать с картинкой и медиа. Многие ссылки еще живые (спустя восемь лет!).
Медиазапросы
Глава о том, как использовать знания из двух предыдущих глав и медиавыражения для создания отзывчивого макета.
Как стать отзывчивым
Здесь уже конкретные советы по внедрению отзывчивости. Кратко рассказано о разных подходах, ориентации на пользовательские цели, принципе «сначала мобильные» (в контексте написания кода сначала для мобильных), итерационном дизайне, тестировании и концепции прогрессивного улучшения. То есть то, что сейчас вошло в практику.
Итого — хорошая книга, доходчиво описывающая принципы отзывчивости, не перегруженная техническими терминами и ненужными поначалу знаниями.
Хотел написать о правильном оптическом выравнивании знаков шрифта, но тема оказалась гораздо глубже. Эта и следующие записи — моя попытка детального разбора опентайп-фич.
Опубликовано
Что это такое, откуда появилось и зачем нужно
Как только шрифты шагнули чуть дальше постскрипт-набора, стало возможно «положить» в шрифтовой файл дополнительные знаки или разновидности знаков, к примеру альтернативные виды какой-нибудь буквы. Например, если в шрифте есть два вида буквы «а» — одночастная и двучастная то можно в заголовке включить один вид, а в основном наборе — другой:
Для того чтобы использовать их необходимо включить — в редакторах или коде. Включить определенную фичу можно только если она есть в шрифте, поэтому сначала необходимо определиться со знаковым составом. Поскольку наличие фич — необязательное условие, то в зависимости от словолитни их может быть от нуля до бесконечности. Обычно сколько фич, какие они и прочее указывают в спецификации на шрифт.
В редакторах есть специальные OpenType-панельки которые управляют включением/выключением определенных фич. В css есть два метода включения: низкоуровневый и высокоуровневый.
Низкоуровневый, через font-feature-settings
Оперирует малопонятными сочетаниями букв, зато имеют хорошую поддержку браузерами. Все необходимые свойства указываются в одной строке css. Вот например как выглядит включение старостильных цифр:
font-feature-settings: "onum" 1;
Включить и выключить фичу можно по-разному:
Цифрой после буквенного кода: выключить (0) и включить (1). Реально на включение работает любая цифра > 0.
Буквами: выключить (off) и включить (on)
Можно обойтись вообще без цифр, это будет эквивалентно включенной фиче.
Несколько записей будет выглядеть так (включаем табличные старостильные цифры):
font-feature-settings: "onum" 1, "pnum" 1;
Высокоуровневый, через font-variant-
Более человекочитабельный формат и отдельные правила для разных фич, но могут быть проблемы с поддержкой. Включаем те же старостильные цифры:
Браузерная поддержка определенных фич не вполне хороша. Если у вас специфические требования типа IE9 то прежде чем включать стоит заглянуть сюда https://caniuse.com/ Поддержка каких-то браузеров может потребовать префиксов. Вобщем проверяйте перед использованием.
Цифры
Что можно: задавать различный вид и пропорциональность. В случае пропорциональности и стиля цифр это всегда явный вариант «либо-либо», то есть у вас будет включен всегда один из видов (в отличии от фич, которые можно включить или нет). Какой — определяет дизайнер шрифта. Правила сосредоточены в блоке font-variant-numeric.
Везде далее в примерах первая строка — высокоуровневое включение, вторая — низкоуровневое.
Маюскульные и минускульные
Первый обычно включены сразу, но не везде — например в Джорджии есть только минускульные цифры.
Первые хорошо подходят для текста, вторые — для таблиц. Интересный эффект происходит если использовать табличные цифры в рейнджах — тогда при таскании ползунка числа будут увеличиваться без скачков по горизонтали.
Превращаются в дробь не с косой чертой, а с горизонтальной, но шрифтов с такими фичами очень мало (для примера мне пришлось вытаскивать из глифов, а не включать фичами):
Не включено фичами, а скопировано из панели глифов Palatino.
Определенное отображение порядковых числительных, принятое в разных странах. В кириллической традиции не встречается, поэтому мало полезно. Тоже входят в состав font-variant-numeric, поэтому отнесем его к цифрам.
IBM Plex Sans
Реально лучше детально проверять что включается, а что нет — у меня в нескольких шрифтах работали испанские 1a, но не работали английские 1st и 2nd.
При использовании с прописными буквами или маюскульными цифрами обычные знаки тире, дефиса, минуса стоят слишком низко. Скомпенсировать поможет фича «Case sensitive forms»:
Golos RF
font-feature-settings: "case" on; //высокоуровнего свойства пока нет ¯_(ツ)_/¯
Краткое саммари
Проверяйте, какие есть фичи в шрифте, читая спецификацию.
Включайте их в css через высокоуровневый или низкоуровневый метод.
