Skip to content

Commit 1252e05

Browse files
committed
minor #1119 [Site] Use system-ui font family (smnandre)
This PR was merged into the 2.x branch. Discussion ---------- [Site] Use `system-ui` font family ### TL;DR; I suggest we use "system-ui" (native/OS font) instead of "Inter" on the website. --- ### What ? * System font are the default font used in every OS * They can be used instead of webfont .. and are excellent fonts. * This article is a great overview on system fonts: https://woorkup.com/system-font/ * Already used by Github, bootstrap, web.dev, apple, Stripe, and many more ### Why ? * better web performance (good for seo, greater for accessibility & UX) * less bandwidth used (good for 💰, greater for 🌍) * the system fonts will allow us more things than Inter * Allow the user to get the standard font used in the OS ### How does it look ? The difference is subtile... at least. And i'm pretty sure only a very, very low part of the visitors will notice the difference. ### Test it I made some captures for you to see the "before/after" on our main pages.. They are available on a page if you want to test yourself the slider and see the differences -> https://smnand.re/w/ab4e91/ | All demos | Invoice demo | | - | - | | ![all-demos](https://github.com/symfony/ux/assets/1359581/4151f2ac-e094-4b7c-9729-6c2437cf9a1b) | ![demo-invoice](https://github.com/symfony/ux/assets/1359581/bf6e84f8-289d-4008-856b-51d7f954da53) | | [Test it yourself (external link)](https://smnand.re/w/ab4e91/) | | - | | ![comparaison-tool](https://github.com/symfony/ux/assets/1359581/3370b32d-fe8b-4758-a895-364bdfe24d08) | Commits ------- c7fc1d8 Use `system-ui` font family
2 parents 1ab717c + c7fc1d8 commit 1252e05

File tree

5 files changed

+5
-15
lines changed

5 files changed

+5
-15
lines changed

ux.symfony.com/assets/styles/app/_html.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
font-family: Inter;
2+
font-family: var(--font-family-text);
33
font-size: 16px;
44
font-weight: 400;
55
line-height: 26px;

ux.symfony.com/assets/styles/app/_root.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
--space-larger: 2rem;
1515

1616
// Fonts
17-
// --font-family-title: "Inter";
18-
--font-family-text: "Inter";
19-
// --font-family-code: "Inter";
17+
--font-family-text: system-ui, sans-serif;
2018

2119
// Colors
2220
--color-primary: var(--bs-body-color);

ux.symfony.com/assets/styles/app/_typography.scss

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@ h1 {
55
letter-spacing: -0.035em;
66
}
77

8-
h1.inter {
9-
font-family: Inter;
10-
font-size: 16px;
11-
font-weight: 700;
12-
line-height: 26px;
13-
letter-spacing: 0px;
14-
}
15-
168
h1.ubuntu {
179
line-height: 60px;
1810
}
@@ -89,7 +81,7 @@ h4.ubuntu {
8981

9082
.eyebrows {
9183
text-transform: uppercase;
92-
font-family: Inter;
84+
font-family: var(--font-family-text);
9385
font-size: 0.7rem;
9486
font-weight: 600;
9587
line-height: 1.6;

ux.symfony.com/assets/styles/utilities/_info-tooltips.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.info-tooltips {
2-
font-family: Inter;
2+
font-family: var(--font-family-text);
33
font-size: 12px;
44
font-weight: 400;
55
line-height: 19px;

ux.symfony.com/templates/base.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<meta name="color-scheme" content="light dark">
1313
<link rel="preconnect" href="https://fonts.googleapis.com" />
1414
{% block stylesheets %}
15-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:200,400,600|Playfair+Display:400,700i|Space+Mono|Ubuntu:400,700&display=swap">
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i|Space+Mono|Ubuntu:400,700&display=swap">
1616
{{ ux_controller_link_tags() }}
1717
<link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
1818
{% endblock %}

0 commit comments

Comments
 (0)