Евгений Петров

Этим призвано заниматься свойство text-size-adjust. Помню аж в 2011 статью на хабре Свойство «text-size-adjust» становится более кросс....

Как я понимаю, указание минимального кегля шрифта в настройках браузера также способно повлиять на размер текста при уменьшении масштаба.

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

Вставка SVG непосредственно в код
Позволит отслеживать события в Javascript (всевозможные click и пр.) и состояния в CSS (по типу :hover) для любой фигуры из набора. Оформление всех SVG-элементов (кроме ряда невизуальных) осуществляется в CSS. Это означает, что их можно анимировать средствами CSS.
Например, создал ради тренировки и примера codepen.io/cleric/pen/ktGfa.

SVG в качестве фона
С помощью data:uri используем код SVG, как будто указываем код картинки:

url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="координаты видимой области">код фигур</svg>')

Технически viewBox использовать необязательно — можно экспериментировать с background-size. Минус такого решения — анимация фигур не получится, только целиком контейнер, в котором стоит эта картинка. Ну и про отдельные события, возникающие в рамках контура фигур, также забываем.

Трансформация элементов
Есть вариант трансформации и обрезки обычных элементов с помощью transform и overflow. Например, как тут tympanus.net/Tutorials/CircularNavigation (несмотря на то, что код там избыточен и некорректная работа обеспечена исключительно усилиями автора этого сайта). Но тут вариантов куда как меньше и усилий потребуется выше крыши.

Update:
В другой теме Почему при использовании тега object к нему добавляется дочерний объект #document? есть пример с использованием SVG.

В этой теме CSS: Почему происходит смещение изображения при line-height идентичной высоте блока? я уже показывал в картинке, как происходит центрирование.
Очень важным при центрировании мог бы стать font-size-adjust. Увы — его поддержка оставляет желать лучшего.

Поэтому остаются манипуляции с padding, маленьким line-height и рихтовка с помощью vertical-align в em.

Есть варианты с display вроде

display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;

или

display:table-cell;
vertical-align:middle;
line-height:1;

Так и положено. Средствами CSS вы не сможете задать отступ для каждой перенесённой строки.
Как вариант — только скриптом, как в этой теме Как сделать такой бэкграунд для текста?
И вам не нужно скашивать элементы в начале и конце строк — то есть в решении упростятся стили.

Update: @DeLaVega продемонстрировал, что можно обойтись только средствами CSS.