В большинстве проектов раньше использовал px. В последнее время перешёл на em и rem, где возможно. Для меня во многом удобнее чем px, правда не везде. Так же не стоит забывать о поддержке браузерами rem, если решите использовать
В 99% случаев выравниваю как Вы написали, padding и line-height. Самый удобный вариант. Со внешними шрифтами редко возникают проблемы. Не из-за того что у них отступы разные, а из-за того как выровнены символы относительно строки (в некоторых шрифтах символы могут быть смещены чуть выше или чуть ниже). Советую Вам использовать этот же метод. Просто на стадии дизайна, должен подбираться шрифт который "заточен" для веба.
Подключаю так же. Для конвертирования использую fontsquirrel. Можно поэкспериментировать с настройками, для получения оптимального отображения в браузерах
Родительскому контейнеру можно задать ширину 100% (чтобы растягивался по всей ширине окна) и overflow: hidden;
Safari поддерживает тень, но чуть темнее она там отображается, если не ошибаюсь. (-webkit-appearance: none; )
Скорее всего не сходятся цветовые профили. Почитайте тут
Так же использую разделение спрайтов по группам (в основном при использование различных типов, размеров иконок в них). В большинстве случаев это удобно (если используется много иконок)
С этим вопросом помочь не смогу, не изучал подробнее как большие фоновые изображения влияют на производительность и отображение
Вы хотите сделать плавное появление и скрытие? Если да, то зачем keyframes? Можно же для элемента сделать доп.класс который отвечает за его скрытие или показ. И удалять его или добавлять. jsfiddle.net/YxsTV
