Я использую два простых правила:

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

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

Пример из практики. Два года назад ко мне прилетела задача для сайта Пулково, уже сформулированная как «Бабл подписки на соц сети Пулково». Администрация аэропорта взялась за развитие своих аккаунтов в соцсетях, и попап на сайте аэропорта (на некоторых страницах, не включавших главную) показался ей хорошим способом привлечь первых подписчиков. Даже был приложен референс:

После классической процедуры подъема «уровня задачи» от реализации уже задуманного решения проблемы к самой проблеме, составления «понимания задачи» с описанием мотивов аэропорта и мотивов посетителей, плюсов и минусов текущего варианта информирования о соцсетях (маленькие иконки в углу страницы) и предлагаемого (попапа поверх страницы с текстом типа «Теперь мы в соцсетях!») мы пришли к решению сообщать о соцсетях при помощи «врезок» вместо попапов.

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

для страницы новостей — «Оперативней всего новости публикуются в соцсетях» и «За новостями не обязательно заходить на сайт — на них можно подписаться в соцсетях»,

для страницы «Пассажирам» — «В соцсетях мы отвечаем на вопросы, рассказываем о новых направлениях и рекомендуем выгодные предложения»,

для страницы «Об аэропорте» — «Заглянуть за кулисы повседневной жизни аэропорта можно в соцсетях».

Когда зашел на сайт H&M, у меня возникло ложное соответствие:

Найти магазин — Женщины
Служба поддержки — Мужчины

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

Ну и любимая картинка из интернета про теорию близости, чтобы закрыть тему

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

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

И раз уж начал про неуместную информацию на сайтах, то вот фрагмент скриншота угадайте какой страницы сайта Декатлона трехлетней давности.

Благовидной затеей сделать шапку сайта залипающей, чтобы посетитель в любой момент имел быстрый доступ к меню, устлана дорога в ад. Все эти залипающие при скроле тяжелые шапки вызывают у меня приступы клаустрофобии. Кажется, я даже физически пригибаюсь слегка при посещении таких сайтов. Вот это, например, сайт журнала Time:

Если тестирования или интуиция подсказывают, что посетитель настолько нуждается в мгновенном доступе к меню, что согласен отдать вам немного драгоценной высоты вьюпорта, то закреплять стоит не полноценную версию шапки, а ее мизерную версию. Гугл, например, при залипании уменьшает шапку на 56%. По мне 5% от высоты вьюпорта — максимум, который можно отвести под залипающую шапку сайта.