Разное видение размера шрифта в фотошопе и браузерах

flagreit · March 22, 2011

Размер на макете 11pt - в вёрстке ставлю 15px(11pt) (хоть em, хоть pt). Но, браузер видит шрифт по-другому, примерно так: 11pt на макете=8pt в браузерах.

Почему так? Это не даёт мне покоя уже значительно долго, всё руки не доходил тему открыть.

Так выглядит на макете

Так в браузерах

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
    <style>
.text {
	width: 205px;
	border: 1px solid #ededed;
}
p {
	font: bold 15px Tahoma, Geneva, sans-serif;
	margin: 0 21px 0 14px;
}
	</style>
</head>
<body>
	<div class="text">
    	<p>Praesent vestibulum molestie</p>
    </div>
</body>
</html>

P.s. если нужно, дам ссылку на макет и саму страницу

P.s..s извиняюсь, что создал не в той теме

Edited March 22, 2011 by flagreit

swetlana · March 22, 2011

очень приблизительно 1pt в фотошопе соответствует 1px в браузере. Но зачастую имеет смысл это соответствие корректировать.

А вообще не совсем ясно, зачем для веба использовать печатные размеры.

flagreit · March 22, 2011

А никто и не использует

Светлана, значит получается 100% совместимости с макетом по шрифтам добиться очень и очень трудно? А так, очень рад ответу, спасибо, я уж думал у меня что-то не так

sigma77 · March 22, 2011

Размер на макете 11pt - в вёрстке ставлю 15px(11pt) (хоть em, хоть pt).

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

А никто и не использует
Светлана, значит получается 100% совместимости с макетом по шрифтам добиться очень и очень трудно? А так, очень рад ответу, спасибо, я уж думал у меня что-то не так

В 99% случаях это невозможно. Начиная от того, что на компьютере пользователя может быть другой набор шрифтов, заканчивая тем, что один и тот же шрифт в разных ОС может иметь определенные отличия. Ну и некоторые "оригинальные" дизайнеры любят применять к шрифтам эффекты, которые с вебом не совместимы. Но добиться максимальной идентичности, вполне возможно.

sigma77 · March 22, 2011

Upd.

Поставь еще pixel perfect (расширение для FF). Косяки верстки и несоответствие шрифтов - сразу увидишь

Great Rash · March 22, 2011

Все дело в том, что в фотошопе разрешение макета, скорее всего, равно 72ppi (points per inch - точек на дюйм). Разрешение экрана в ОС Windows равно 96ppi. Отсюда и разница в размерах шрифта.

Чтобы пересчитать pt в px используйте такую формулу:

12pt * 96ppi / 72ppi = 16px

В маках разрешение экрана равно 72ppi, поэтому там 12pt = 12px

flagreit · March 22, 2011

Уяснил, спасибо

pixel perfect стоит, по нему и сверял макет поначалу..да как-то трудно с ним очень работать по резиновой вёрстке, если стремишься к 1/1. Хотя может просто не умею

swetlana · March 22, 2011

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

а ведь и в самом деле! Спасибо

Все дело в том, что в фотошопе разрешение макета, скорее всего, равно 72ppi (points per inch - точек на дюйм). Разрешение экрана в ОС Windows равно 96ppi. Отсюда и разница в размерах шрифта.
Чтобы пересчитать pt в px используйте такую формулу:
12pt * 96ppi / 72ppi = 16px
В маках разрешение экрана равно 72ppi, поэтому там 12pt = 12px

это ж получается, я давно и успешно со своей колокольни ввожу в заблуждение виндопользователей?

Какой позор на мою временно не седую голову!

Спасибо за разъяснения.

zerok · December 23, 2013

Хотелось обратить ваше внимание на то что при значительном размере - например 16px шрифт в фотошопе остается тонким а в браузере становится толще. Хотя казалось бы размер шрифта один. Он даже в высоту одинаков (проверялось наложением)

Вот с этим как предлагаете бороться?

Zverushka · December 23, 2013

Может это заголовок и он унаследовал от браузерного стиля жирность bold? проставьте font-weight: normal;

antonKar · December 23, 2013

Вот с этим как предлагаете бороться?

Если разница в толщине контуров букв пара пикселей, то никак. Это не проблема.

Sign In

Разное видение размера шрифта в фотошопе и браузерах

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information