use Fira Sans for UI elements (#232)

Rich-Harris · web-flow · commit 397e5e71601d · 2024-10-03T17:17:22.000-04:00
* use Fira Sans

* simplify font stacks

* fixes

* fixes
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -317,6 +317,7 @@ export default app;`
 		margin: 0 0.2em 0 0.4rem;
 		padding-top: 0.2em;
 		border-bottom: 1px solid transparent;
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	input:hover {
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -94,7 +94,7 @@
 		background: var(--sk-theme-1);
 		padding: 0.35em 0.8em;
 		font-family: var(--sk-font-ui);
-		letter-spacing: 0.05em;
+		font-size: var(--sk-font-size-ui-medium);
 		font-weight: 600;
 		white-space: nowrap;
 		border-radius: var(--sk-border-radius);
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -5,7 +5,8 @@ import { read } from '$app/server';
 import satori from 'satori';
 import { html as toReactNode } from 'satori-html';
 import Card from './Card.svelte';
-import YantramanavRegular from './Yantramanav-Regular.ttf?url';
+import DMSerifDisplay from './DMSerifDisplay-Regular.ttf?url';
+import FiraSans from './FiraSans-Regular.ttf?url';
 import { blog_posts } from '$lib/server/content';
 
 export const prerender = true;
@@ -18,7 +19,8 @@ export function entries() {
 
 const height = 630;
 const width = 1200;
-const data = await read(YantramanavRegular).arrayBuffer();
+const dm_serif_display = await read(DMSerifDisplay).arrayBuffer();
+const fira_sans = await read(FiraSans).arrayBuffer();
 
 export async function GET({ params }) {
 	const post = blog_posts.find((post) => post.slug === `blog/${params.slug}`);
@@ -31,8 +33,14 @@ export async function GET({ params }) {
 	const svg = await satori(element, {
 		fonts: [
 			{
-				name: 'Overpass',
-				data,
+				name: 'DMSerif Display',
+				data: dm_serif_display,
+				style: 'normal',
+				weight: 400
+			},
+			{
+				name: 'Fira Sans',
+				data: fira_sans,
 				style: 'normal',
 				weight: 400
 			}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
@@ -18,7 +18,6 @@
 		display: flex;
 		width: 100%;
 		height: 100%;
-		font-family: 'Yantramanav';
 		background: white;
 	}
 
@@ -49,12 +48,14 @@
 		font-weight: 400;
 		line-height: 80px;
 		margin: 0 0 0.5em 0;
+		font-family: 'DM Serif Display';
 	}
 
 	.date {
 		font-size: 32px;
 		margin: 0;
 		color: #555;
 		text-transform: uppercase;
+		font-family: 'Fira Sans';
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/DMSerifDisplay-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/DMSerifDisplay-Regular.ttf
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/FiraSans-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/FiraSans-Regular.ttf
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Overpass-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Overpass-Regular.ttf
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -86,4 +86,8 @@
 			max-width: 50rem;
 		}
 	}
+
+	a {
+		font-size: var(--sk-font-size-body-small);
+	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -115,6 +115,10 @@
 		color: var(--sk-text-3);
 	}
 
+	.controls a {
+		font-size: var(--sk-font-size-body-small);
+	}
+
 	.controls span.faded {
 		opacity: 0.4;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -395,6 +395,7 @@
 		border-right: 1px solid var(--sk-back-4);
 		color: white;
 		opacity: 1;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	.navigator .solve:disabled {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -162,10 +162,12 @@
 	h2 {
 		font-family: var(--sk-font-ui);
 		font-size: var(--sk-font-size-ui-large);
+		margin: 0 0 0.5em 0;
 	}
 
 	p {
 		margin: 0 0 1em 0;
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	button {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -193,11 +193,9 @@
 	header strong,
 	h1 {
 		font-family: inherit;
-		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.menu {
-		font-size: var(--sk-font-size-ui-medium);
 		border: none;
 	}
 
@@ -252,7 +250,7 @@
 		text-overflow: ellipsis;
 		text-align: center;
 		color: var(--sk-text-2);
-		font-weight: 400;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	h1 .desktop {
@@ -452,10 +450,5 @@
 			font-size: var(--sk-font-size-ui-small);
 			color: var(--sk-text-3);
 		}
-
-		h1 strong {
-			font-size: var(--sk-font-size-ui-medium) !important;
-			line-height: 1;
-		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: var(--sk-font-size-ui-medium);
+		--font-size: var(--sk-font-size-ui-small);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
@@ -25,6 +25,7 @@
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
+		"@fontsource/fira-sans": "^5.1.0",
 		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
@@ -43,6 +43,7 @@
 <style>
 	footer {
 		max-width: 120rem;
+		font-size: var(--sk-font-size-body-small);
 		padding: 0 var(--sk-page-padding-side);
 		margin: 0 auto;
 		display: grid;
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -67,11 +67,11 @@
 
 	.copy {
 		text-align: left;
+		font-size: var(--sk-font-size-body);
 	}
 
 	h2 {
 		display: inline-block;
-		width: 25rem;
 		margin: 0 0 1rem;
 	}
 
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -54,6 +54,7 @@
 	}
 
 	.terminal pre {
+		font-size: var(--sk-font-size-code);
 		padding: 1em;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -396,6 +396,7 @@
 		margin: 0.3rem 0;
 		height: 4rem;
 		color: var(--sk-text-2);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.universal .contents,
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -159,13 +159,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 	}
 
+	a {
+		font-size: var(--sk-font-size-ui-medium);
+	}
+
 	.current-section {
 		display: flex;
 		align-items: center;
-		font-size: 0.8em;
 		color: var(--sk-text-3);
 		margin-left: 0.4em;
 		padding: 0.1rem 0 0 0;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	@media (max-width: 800px) {
@@ -183,6 +187,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.menu :global(a) {
 		color: var(--sk-text-2);
 		line-height: 1;
+		font-size: var(--sk-font-size-ui-medium);
 		padding: 0.1rem 0.5rem 0 0.5rem;
 		white-space: nowrap;
 		height: 100%;
@@ -281,6 +286,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		.appearance .caption {
 			display: block;
+			font-size: var(--sk-font-size-ui-medium);
 		}
 
 		nav :global(.large) {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
@@ -18,7 +18,6 @@ body {
 }
 
 body {
-	font-size: var(--sk-font-size-body-small);
 	font-family: var(--sk-font-body);
 	line-height: 1.5;
 	color: var(--sk-text-2);
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
@@ -4,6 +4,7 @@
 @import '@fontsource/dm-serif-display';
 @import '@fontsource/yantramanav/400.css';
 @import '@fontsource/fira-mono';
+@import '@fontsource/fira-sans';
 
 @import './tokens.css';
 @import './base.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,10 +22,9 @@
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
-	--sk-font-ui: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-	--sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
-	--sk-font-heading: 'DM Serif Display';
+	--sk-font-ui: 'Fira Sans', -apple-system, sans-serif;
+	--sk-font-body: 'EB Garamond', Georgia, serif;
+	--sk-font-heading: 'DM Serif Display', Georgia, serif;
 	--sk-font-mono: 'Fira Mono', monospace;
 
 	--sk-font-size-h1: 3.6rem;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
@@ -317,6 +317,7 @@ export default app;`
`317`	`317`	`margin: 0 0.2em 0 0.4rem;`
`318`	`318`	`padding-top: 0.2em;`
`319`	`319`	`border-bottom: 1px solid transparent;`
	`320`	`+ font-size: var(--sk-font-size-ui-medium);`
`320`	`321`	`}`
`321`	`322`
`322`	`323`	`input:hover {`
Original file line number	Diff line number	Diff line change
`@@ -86,4 +86,8 @@`
`86`	`86`	`max-width: 50rem;`
`87`	`87`	`}`
`88`	`88`	`}`
	`89`	`+`
	`90`	`+ a {`
	`91`	`+ font-size: var(--sk-font-size-body-small);`
	`92`	`+ }`
`89`	`93`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,10 @@`
`115`	`115`	`color: var(--sk-text-3);`
`116`	`116`	`}`
`117`	`117`
	`118`	`+ .controls a {`
	`119`	`+ font-size: var(--sk-font-size-body-small);`
	`120`	`+ }`
	`121`	`+`
`118`	`122`	`.controls span.faded {`
`119`	`123`	`opacity: 0.4;`
`120`	`124`	`}`