Размер шрифта на iOS7 отличается от Photoshop даже при том же разрешении

Чтобы точки в Photoshop соответствовали точкам для собственной разработки iOS и OS X, вам потребуется, чтобы DPI документа был:

• Для документа 1× (не Retina) используйте 72DPI.
• Для документа 2× (Retina) используйте 144DPI.
• Для документа 3× (Retina HD) используйте 216DPI.

DPI документа обычно не имеет значения (имеют значение размеры в пикселях), за исключением случаев, когда речь идет о точках. Точки можно использовать во многих местах, включая размер текста и размер штриха.

Photoshop использует 72DPI для преобразования пикселей в точки 1:1. Для документа с разрешением 144DPI коэффициент преобразования становится равным 2:1 для пикселей в точки. Если вы проектируете с плотностью Retina, то это именно то, что вам нужно.

Если вы разрабатываете дизайн для iPhone 6, ваш документ должен быть настроен следующим образом:

Это предполагает, что вы хотите работать с полным разрешением iPhone 6 Retina. ( Обычно я много работаю в разрешении 1x, а не в Retina.)

Чтобы рендеринг вашего текста был как можно ближе к рендерингу текста в iOS, вы также захотите использовать Macнастройку рендеринга текста.

И это должно быть так! Ваши макеты должны быть почти идентичны по размеру и рендерингу для iOS, и вы можете использовать точки в Photoshop, зная, что они такие же, как точки в iOS.

Спецификации iPhone 5: 1136 x 640, и вам нужно убедиться, что ваш PPI установлен на 326. О размере точек (pt): шрифты основаны на векторе, а размер зависит от PPI ​​вашего монитора (72), а не от документа, который вы создаете. дюймов. Если вы сделаете макет своего iPhone с разрешением 72ppi, ваши шрифты должны выглядеть пропорционально тому, как они будут выглядеть на реальном устройстве.

Прежде всего, ваши файлы Photoshop никогда не будут соответствовать вашему реальному веб-сайту/приложению. Photoshop просто будет отображать текст немного иначе, чем браузер. Там нет обойти эту проблему.

Во-вторых, вы разрабатываете свои PSD-файлы со стандартными размерами в пикселях или размером сетчатки? Если Retina, обратите внимание, что Photoshop не будет знать , что вы удваиваете пиксели. Так что, если вы хотите 12pt на реальном телефоне, вам придется установить его на 24pt в Photoshop, чтобы эмулировать двойную плотность (iPhone 6 pro на самом деле имеет тройную плотность).

Кроме того, если вы проектируете на сетчатке, имейте в виду, что вам, вероятно, нужно просматривать его в Photoshop с увеличением 50%, чтобы получить «ощущение» фактического размера на телефоне. И даже в этом случае ваш настольный монитор, вероятно, имеет гораздо более низкое значение PPI, чем ваш iPhone, поэтому он все равно может оказаться больше, чем на физическом iPhone.

Наконец, используете ли вы тот же шрифт в Photoshop, что и устройство в приложении/веб-версии? Обратите внимание, что размер символов в разных шрифтах может сильно различаться, даже если установлен одинаковый размер точек.

Это все догадки, конечно. Было бы очень полезно, если бы вы могли показать нам фактическое изображение PSD в сравнении с тем, как оно выглядит на устройстве.

Это вопрос, который на самом деле должен быть больше на стороне CSS SE, но я все равно опубликую ответ.

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

Механизмы рендеринга используют разные метрики для расчета размера шрифта. Это делается для того, чтобы телефоны могли брать устаревший контент (веб-страницу пятилетней давности) и пытаться сделать его получитаемым для пользователя на iPad/iPhone.

Итак... чтобы получить шрифты одинакового размера, вам нужно использовать этот CSS:

body {
    -webkit-text-size-adjust: 100%;
}

Источник: https://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment

В качестве дополнительного примечания, вы должны попытаться отправить своим разработчикам размеры в EM, если это возможно. Определите один размер шрифта в качестве базового (16pt = 1EM), а затем определите все остальные стили на базе.

Вот очень подробное объяснение: http://www.hongkiat.com/blog/css-units/

По сути, в конце концов, ваши шрифты должны быть адаптивными. Указание их как «32px» независимо от контекста — плохая практика проектирования.

Оно работает . У меня была большая проблема с другим процессом рендеринга для xCode, но когда я использовал 72/144/216 PPI для 1x 2x и 3x, это решило проблему.