dom1n1k

Из всех эффектов появления самый логичный и полезный - это то, как сделано у Медиума.
https://jmperezperez.com/medium-image-progressive-...
Они просто подставляют маленькую копию картинки (20x20, если правильно помню), которая весит какие-то копейки (и поэтому может быть вставлена в base64), но в размытом состоянии дает общие очертания картинки-оригинала.

Близкие аналоги:
https://css-tricks.com/the-blur-up-technique-for-l...
https://words.mxbry.com/a-workflow-for-lazy-loadin...

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

Есть еще третий вариант:

[class^="icon-"],
[class*="icon-"] {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

Но на мой вкус 1-ый вариант всё же лучший и самый однозначный.

position: absolute + z-index

Имеется в виду ставить ли закрывающий слэш вот так <br />?
По спецификации - не нужно. Закрывающие слэши предполагаются в XHTML, а в HTML (любой версии) они не нужны.
По здравому смыслу - тоже не нужно.
Практически - пофиг, работает одинаково, браузеры тут очень толерантны к кодеру.

Если задача не чисто спортивная, а из реальной жизни, то НЕ нужно делать это на CSS.
Нужна кар-тин-ка.

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

function add() {
    $('.field')
        .text('hello')
        .css('display', 'block');
}

А вообще, конечно, кэширование найденных узлов полезно.

Обычно расклад такой:
1. Дизайнер (или студия) покупает себе лицензию в любом случае (стоимость покупки, конечно, можете включить в цену заказа, но лицензия должна быть на ваше имя).
2. Если логотип отдается клиенту только в виде растра или кривых - покупать отдельную лицензию клиенту не нужно. Но если фирменный стиль подразумевает в дальнейшем набор каких-то текстов этим шрифтом - отдельную лицензию должен докупить и клиент.
3. В дальнейшем клиент сам должен разруливать такие ситуации как например использование этого шрифта на сайте или в мобильном приложении. Все это отдельные лицензии и их нужно докупать отдельно. Но вас это уже не волнует.

Причем нужно обратить внимание на моменты:
а) Цена лицензии для дизайнера и клиента может быть разной. Если например дизайнер фрилансер, а клиент - компания. Например, у студии Лебедева корпоративная лицензия в несколько раз дороже персональной. Но это не всегда.
б) Некоторые конторы оговаривают логотипы как особый случай лицензии, за который нужно доплачивать. В частности, у Паратайпа это плюс цена*3 (то есть всего четырехкратная).

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