Utils: Improve metrics handling in StyleHelper::uiFont

Figma designs have font sizes defined in pixels. We want to
define font sizes in points.

This change introduces the original font pixel size values from Figma
and provides the conversion to sensible point sizes.

Change-Id: Ic8356942a9bc033d2b5cd62863d2bd0a4cc6973b
Reviewed-by: Cristian Adam <cristian.adam@qt.io>
This commit is contained in:
Alessandro Portale
2024-01-28 23:35:15 +01:00
parent 6cc66d2db7
commit 4d56f9b840
2 changed files with 41 additions and 27 deletions

View File

@@ -942,51 +942,61 @@ static QStringList brandFontFamilies()
return families; return families;
} }
struct UiFontMetrics {
// Original "text token" values are defined in pixels
const int pixelSize = -1;
const int lineHeight = -1;
const QFont::Weight weight = QFont::Normal;
};
static const UiFontMetrics& uiFontMetrics(StyleHelper::UiElement element)
{
static const std::map<StyleHelper::UiElement, UiFontMetrics> metrics {
{StyleHelper::UiElementH1, {36, 54, QFont::DemiBold}},
{StyleHelper::UiElementH2, {28, 44, QFont::DemiBold}},
{StyleHelper::UiElementH3, {16, 20, QFont::Bold}},
{StyleHelper::UiElementH4, {16, 20, QFont::Bold}},
{StyleHelper::UiElementH5, {14, 16, QFont::DemiBold}},
{StyleHelper::UiElementH6, {12, 14, QFont::DemiBold}},
{StyleHelper::UiElementH6Capital, {12, 14, QFont::DemiBold}},
{StyleHelper::UiElementCaptionStrong, {10, 12, QFont::DemiBold}},
{StyleHelper::UiElementCaption, {10, 12, QFont::Normal}},
};
QTC_ASSERT(metrics.count(element) > 0, return metrics.at(StyleHelper::UiElementCaptionStrong));
return metrics.at(element);
}
QFont StyleHelper::uiFont(UiElement element) QFont StyleHelper::uiFont(UiElement element)
{ {
QFont font; QFont font;
constexpr qreal panelTitleSize = HostOsInfo::isMacHost() ? 10 : 7.5;
switch (element) { switch (element) {
case UiElementH1: case UiElementH1:
font.setFamilies(brandFontFamilies()); font.setFamilies(brandFontFamilies());
font.setPixelSize(30);
font.setWeight(QFont::Light);
font.setWordSpacing(2); font.setWordSpacing(2);
break; break;
case UiElementH2: case UiElementH2:
font.setFamilies(brandFontFamilies()); font.setFamilies(brandFontFamilies());
font.setPixelSize(16);
break; break;
case UiElementH3: case UiElementH3:
font.setPointSizeF(font.pointSizeF() * 1.6);
font.setBold(true);
break;
case UiElementH4:
font.setPointSizeF(font.pointSizeF() * 1.2);
font.setBold(true);
break;
case UiElementH5:
font.setPointSizeF(font.pointSizeF() * 1.2);
font.setWeight(QFont::DemiBold);
break;
case UiElementH6:
font.setWeight(QFont::DemiBold);
break;
case UiElementH6Capital: case UiElementH6Capital:
font.setWeight(QFont::DemiBold);
font.setCapitalization(QFont::AllUppercase); font.setCapitalization(QFont::AllUppercase);
break; break;
case UiElementCaptionStrong: default:
font.setPointSizeF(panelTitleSize);
font.setWeight(QFont::DemiBold);
break;
case UiElementCaption:
font.setPointSizeF(panelTitleSize);
break; break;
} }
const UiFontMetrics &metrics = uiFontMetrics(element);
// On macOS, by default 72 dpi are assumed for conversion between point and pixel size.
// For non-macOS, it is 96 dpi.
constexpr qreal defaultDpi = HostOsInfo::isMacHost() ? 72.0 : 96.0;
constexpr qreal pixelsToPointSizeFactor = 72.0 / defaultDpi;
const qreal qrealPointSize = metrics.pixelSize * pixelsToPointSizeFactor;
font.setPointSizeF(qrealPointSize);
font.setWeight(metrics.weight);
return font; return font;
} }

View File

@@ -40,7 +40,11 @@ int main(int argc, char *argv[])
auto *sampleLabel = new QLabel(textSample); auto *sampleLabel = new QLabel(textSample);
sampleLabel->setFont(font); sampleLabel->setFont(font);
sampleLabel->setSizePolicy(uiElementLabel->sizePolicy()); sampleLabel->setSizePolicy(uiElementLabel->sizePolicy());
fontLabels.addItems({uiElementLabel, sampleLabel, st, font.toString(), br}); QFontInfo fontInfo(font);
const QString pixelMetrics = QString::fromLatin1("Pixel size: %1")
.arg(fontInfo.pixelSize());
auto *metricsLabel = new QLabel(pixelMetrics);
fontLabels.addItems({uiElementLabel, sampleLabel, st, font.toString(), metricsLabel, br});
} }
QString html("<html><body><table>"); QString html("<html><body><table>");