PTSans in .psd does not match its web version, you have to correct the text by transform: scale .

The problem is that capital letters are lower than in Photoshop - .psd layout. I want to fix this by transform: scale for the first capital letters.

 p:first-letter { color: #abc; transform: scaleY(3); } 
 <p>Слово АБВ</p>

    1 answer 1

    Maybe just increase the font size of the first letter?

     (function () { var node = $(".first-p").contents().filter(function () { return this.nodeType == 3 }).first(), text = node.text().trim(), first = text.slice(0, 1); if (!node.length) return; node[0].nodeValue = text.slice(first.length); node.before('<span class="f-latter">' + first + '</span>'); })(); 
     .f-latter { color: red; display: inline-block; line-height: 40px; transform: scaleY(4); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="first-p">Слово АБВ</p> <p>Слово АБВ</p>

    • Then it will become wider, and you need only higher. - CodeGust
    • transform: scale is not applicable to the pseudo-class first-latter. This is probably not the easiest option, but working. - RQEST
    • Thank! but I have to use only css. Apparently, there is no way to correct the mismatch of the font in Photoshop and browsers ... - CodeGust