dom1n1k

Проблема в иконке - это ж не картинка, это иконочный шрифт.
а) не задана line-height (задай 1)
б) позиционирование магическими числами
В целом верстка элемента переусложнена по непонятным причинам (зачем там флекс, если позиционируется иконка абсолютно?)

Единым потоком - нет. Если столбцы будут выгоняться из бекенда независимо и помещаться в разные контейнеры - тогда да. Либо привлекать JS.

На самом деле пофиг, разница копеечная.

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

HTML/CSS-верстка тут практически непригодна.
Нужно использовать какую-то графическую библиотеку, работающую с графикой как с логическими примитивами (то есть не только рисует, но потом умеет двигать, обрабатывать действия пользователя и пр.). Это может быть и SVG, и canvas - кому что привычнее и удобнее. В качестве примеров можно привести Snap.svg и Paper.js соответственно, но не обязательно их, есть и другие альтернативы.

в фотошопе если измерить от нижнего края Блока А до верхнего края Блока Б

Измерять нужно не от края букв, а между базовыми линиями. От б/л последней строки предыдущего блока до б/л первой строки следующего. Потом вычитаешь высоту одной строки (font-size * line-height) и получается величина отступа между абзацами.

Правильный ответ:

<ul>
    <li><a href="#">Что-то</a></li>
</ul>

li > a {
    display: block;
}

Конечно, в реальном коде стили лучше вешать не на теги, а на классы. Тут просто принцип.

Я бы пообщался с дизайнером или заказчиком и попробовал договориться об устранении этих хреней.

Уголок тут не играет никакой ни смысловой, ни эстетической роли, которые оправдывали бы его присутствие. Это просто потуга дизайнера в духе "чтобы тут ещё всунуть, чтоб они не подумали, что я мало поработал? ну хз, вот пусть ещё уголок будет!"

Движок для изменения по факту тоже никому не нужен, он только глаза мозолит посреди карточки. Никто не будет там это двигать, если фото и текст изначально между собой нормально сбалансированы. Как максимум, я бы сделал 2 дискретных положения - фото узкое/широкое. А кнопочку для этого сделал бы маленькую снизу.

Масштаб увеличенный у клиента настроен.
Это кстати вполне нормальное явление и не должно ломать верстку.

Все зависит от того, насколько эта штука должна быть адаптивной.
Если нет - то всё очень просто, граф рисуется картинкой (можно даже фоновой), иконки расставляются по этажам блоками равной ширины.
Если же оно должно тянуться... тогда вариантов намного больше и нельзя так вот заранее сказать, какой предпочтительный. Можно например вообще всё сделать в SVG. Или можно палки картинкой, а красные кружи флекс-блоками. А можно сделать несколько картинок и просто их менять медиа-запросами.
Зависит от ТЗ.

Чтобы заставить элемент наползти на соседа или вылезти за границы родителя.
Что именно непонятно?

В чем проблема-то понятно - в хинтинге. А вот как исправить - это сложнее.
Шрифты, подозреваю сделаны конвертером FontSquirrel, а он грешит подобными делами. И как поправить непонятно - я экспериментировал с его опциями, перебрал кучу вариантов, и в части случаев не удавалось исправить ни при каком сочетании опций.
Попробуйте по возможности альтернативные шрифты с Google Fonts и с Fontstorage.com

Sublime, Notepad++. Первый погламурнее, второй покондовее.

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

Верстать резиново/адаптивно.
Ведь может же на сайт прийти человек, у которого монитор реально 1600? Может. И 1440 может. И ещё куча вариантов.
Верстальщик вообще не должен привязываться к какой-то фиксированной ширине.

Узнать эти числа можно либо от авторов, либо проведя ручной эксперимент в браузере.
Дело в том, что все эти наименования (thin, light, bold и пр) никак не стандартизованы и не подчиняются никаким строгим правилам. Есть приблизительные правила, которые сложились исторически и которых все стараются более-менее придерживаться - но исключений встречается довольно много.
Конкретно в случае с Lato догадаться несложно (очевидно, что 9 начертаний как раз помещаются от 100 до 900 через сотню), но с другим шрифтом всё может быть иначе.
Кроме того, верстальщик имеет возможность назначать свои значения в font-face.

Картинку использовать религия не позволяет?