Как сверстать подобный заголовок?
 На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before. 
А чем вам h1 не угодил? Внутри можно span-ами разделить с display: block, и все будет семантично.
Вариант со второй картинки делается с помощью max-width, без паддингов. ::before нужно спозиционировать только один раз, а родителю добавить position: relative.p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"
Нужно чтобы везде было идеально, но проходишься в итоге все равно по точкам, желательно вообще не иметь @media не соответствующих заранее определенным брейкпоинтам (хотя есть исключения).
Не надо верстать, надо двумя растровыми картинками, переключаемыми по медиа-выражению.