Когда вам нужно, чтобы какая-либо графика в вебе качественно и плавно масштабировалась, её нужно делать векторной, то есть в
SVG
https://jsfiddle.net/k12Lyofu/35/
Правда в ней нет автопереносов текста, поэтому я добавил элемент
svg, указал ему
width: 100% в
CSS, во
viewBox прописал исходные ширину и высоту блока, а внутрь завернул
foreignObject, который позволяет в
svg вставлять
html, указав ему размеры на весь
viewBox, и в него вставил ваш
div с текстом, благодаря чему появились переносы. Ну и ещё в
JS закомментил ваши строки для
font-size
И тут я увидел, что текст всё равно прыгает :D
И, честно говоря, мне стало страшно, потому что я, кажется, чего-то не понимаю... Ответ оставлю на всякий случай, но он выходит и не ответ вовсе :(
З.Ы. Стандартными элементами
text я тоже пробовал, без встраивания
html для переносов — один фиг (
https://jsfiddle.net/k12Lyofu/34/) 
