Рома

В вашем вопросе уже заложен ответ:
Источники:
Мильчин А. Э., Чельцова Л. К. Справочник издателя и автора, 2014 г.
Вигдорчик В. А. Ручной набор. Справочник, 1985 г.
Розенталь Д. Э. Справочник по правописанию и литературной правке, 2001 г.
Чихольд Я. Облик книги, 2009 г.
ГОСТ 8.417-2002. Государственная система обеспечения единства измерений. Единицы величин, 2002 г.

Основная мысль в том, что пользователь в браузере может переопределить размер шрифта по умолчанию. Например он плохо видит и сделал себе буквы покрупнее, или обладает монитором 4К.
Если вы ставить базовый размер шрифта в пикселах, эта настройка у пользователя не работает и буквы будут слишком мелкими. С другой стороны не встречался с пользователями, которые меняют именно размер шрифта, а не используют масштабирование CTRL+колесо мыши.
Изучите информацию про единицах измерения CSS rem и em.

На такой размер нет необходимости задавать более 100 дпи, 1440 дпи - это разрешение вывода, "немного" не одно и то же что дпи картинки. Учитывая что это растровая печать в 4 цвета - это количество точек на 1 дюйм. Вариантов точек - 4(C, M, Y, K) но их взаимное расположение и количество точек разных цветов создают "смешанную" полноцветную точку, которая по размеру примерно в 4 раза больше одиночной одноцветной. плюс есть понятие растекания/растискивания, так что в итоге печать выглядит немного не так хорошо, как картинка, даже с разрешением "всего" 100 дпи.

UPD: такие картинки рассматриваются с расстояния не менее 30-50 см, на таком расстоянии только некоторые виды птиц(например орлы) могут различить отдельные точки такого размера, так что в итоге смотреться все равно будет неплохо )

Знаешь как работать с фотошопом и другими инструментами - трейни
+ умеешь выполнять маленькие задачи (1 день без присмотра) самостоятельно - джун
+ умеешь выполнять средние задачи (1 неделя - месяц) самостоятельно и имеешь опыт 1+ лет - мидл
+ умеешь выполнять любые задачи самостоятельно и имеешь опыт 3+ лет - синьйор

- Все выровнено по сетке, в том числе и по горизонтальной
- Все максимально стандартизировано: везде, где это возможно, используются одинаковые размеры шрифта (1-3 варианта), кнопки, блоки одинакового размера, одинаковые или кратные 5 отступы и т.д.
- Отрисованы все состояния всех элементов, все модальные окна, анимация.
- Все слои с изображениями, иконками, векторными фигурами (в Фотошопе) названы именами файлов (logo.png), соответственно все картинки (+ варианты для ретины) уже готовые лежат в отдельной папке
- Все слои разложены по папкам, в соответсвии с иерархией, наложения слоев в "Normal", пустые слои удалены
- Отрисованы макеты для мобильного, планшета и десктопа. Но не три разных макета, а один адаптированный. То есть, вам нужно понимать и дать понять верстальщику, как страница будет адаптироваться.

Описать словами что должно происходить с элементами. Можно лично, можно в документе или прямо в PSD файле разместить заметки (notes). Добавить примеры аналогичного поведения на других сайтах или показать конкретные плагины/скрипты (легко гуглится по нужным запросам типа "hover animation" или иные запросы согласно тому, что надо объяснить).

Вообще в макете можно показать сразу разные виды (я так и делаю). Например, разместить прямо в макете изображение курсора и показать вид при наведении. Для элементов сделать 3 папки: normal, hover и pressed, в которых будут лежать соответствующие виды элементов. Ещё один способ показать разные виды элементов на странице это использование композиций Layer comps — очень полезная штука. Если не пользуетесь, то очень советую почитать и изучить её.

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

Adobe Illustrator CC 2015.2 самая последняя и стабильная версия из всех