Как слова поставить так как на картинке?
В приведённом примере самый сложный момент – обрезание внутренним краем цифры «0» красной плашки для рублей, которая правее перекрывает ту же цифру. Этот же эффект с другой цифрой, например, «5», не сработает. Поэтому это дизайн, картинка, а не вёрстка.
Можно сделать через две перекрывающиеся плашки: короткую, под первой цифрой «0», которая заканчивается точно под цифрой, не вылезая левее (в этом месте наиболее вероятно ошибиться и накосячить). длинную, которая начинается где-то с середины первого нуля поверх первой плашки, точно той же высоты, и идет поверх нулей далеко направо.
Ну и поверх неё текст «рублей».
Надёжнее и качественнее всего делать это как картинку. Растровую, или лучше векторную в SVG. Причём цифры не текстом, а кривыми.Вёрсткой с абсолютным позиционированием, указанием line-height и, в идеале, подгрузкой шрифта – тоже решается, но есть риск, что где-то что-то съедет.
гугли "абсолютное позиционирование"