redesign: render thumbnails at a larger font size

functions/_common/grapherRenderer.ts

@@ -46,7 +46,7 @@ const TWITTER_OPTIONS: ImageOptions = {
     svgWidth: 800,
     svgHeight: 418,
     details: false,
-    fontSize: 24,
+    fontSize: 21,
 }
 
 const OPEN_GRAPH_OPTIONS: ImageOptions = {
@@ -56,7 +56,7 @@ const OPEN_GRAPH_OPTIONS: ImageOptions = {
     svgWidth: 800,
     svgHeight: 418,
     details: false,
-    fontSize: 24,
+    fontSize: 21,
 }
 
 let initialized = false
@@ -160,6 +160,7 @@ async function fetchAndRenderGrapherToSvg({
         queryStr: "?" + searchParams.toString(),
         bounds,
     })
+    grapher.isGeneratingThumbnail = true
     grapher.shouldIncludeDetailsInStaticExport = options.details
     grapher.baseFontSize = options.fontSize
 

packages/@ourworldindata/grapher/src/core/Grapher.tsx

@@ -760,6 +760,8 @@ export class Grapher
     }
 
     @observable.ref isExportingtoSvgOrPng = false
+    @observable.ref isGeneratingThumbnail = false
+
     tooltips?: TooltipManager["tooltips"] = observable.map({}, { deep: false })
     @observable isPlaying = false
     @observable.ref isSelectingData = false

packages/@ourworldindata/grapher/src/footer/Footer.tsx

@@ -649,6 +649,10 @@ export class StaticFooter extends Footer<StaticFooterProps> {
     }
 
     @computed protected get fontSize(): number {
+        // respect base font size for thumbnails
+        if (this.manager.isGeneratingThumbnail) {
+            return (13 / 16) * (this.manager.fontSize ?? 16)
+        }
         return 13
     }
 

packages/@ourworldindata/grapher/src/footer/FooterManager.ts

@@ -14,4 +14,6 @@ export interface FooterManager extends TooltipManager, ActionButtonsManager {
     isSmall?: boolean
     isMedium?: boolean
     framePaddingHorizontal?: number
+    isGeneratingThumbnail?: boolean
+    fontSize?: number
 }

packages/@ourworldindata/grapher/src/header/Header.tsx

@@ -99,7 +99,9 @@ export class Header<
     }
 
     @computed get subtitle(): MarkdownTextWrap {
-        const fontSize = this.manager.isSmall
+        const fontSize = this.manager.isGeneratingThumbnail
+            ? (14 / 16) * (this.manager.fontSize ?? 16) // respect base font size for thumbnails
+            : this.manager.isSmall
             ? 12
             : this.manager.isMedium
             ? 13
@@ -205,7 +207,7 @@ interface StaticHeaderProps extends HeaderProps {
 @observer
 export class StaticHeader extends Header<StaticHeaderProps> {
     @computed get title(): TextWrap {
-        const { logoWidth, titleText } = this
+        const { logoWidth, titleText, manager } = this
 
         const makeTitle = (fontSize: number): TextWrap =>
             new TextWrap({
@@ -217,13 +219,19 @@ export class StaticHeader extends Header<StaticHeaderProps> {
             })
 
         // try to fit the title into a single line if possible-- but not if it would make the text too small
-        const initialFontSize = 24
+        const initialFontSize = manager.isGeneratingThumbnail
+            ? (24 / 16) * (manager.fontSize ?? 16) // respect base font size for thumbnails
+            : 24
         let title = makeTitle(initialFontSize)
+
+        // if the title is already a single line, no need to decrease font size
+        if (title.lines.length <= 1) return title
+
         const originalLineCount = title.lines.length
-        // decrease the initial font size by no more than 2px using 0.5px steps
+        // decrease the initial font size by no more than 20% using 0.5px steps
         const potentialFontSizes = range(
             initialFontSize,
-            initialFontSize - 2.5,
+            initialFontSize * 0.8,
             -0.5
         )
         for (const fontSize of potentialFontSizes) {
@@ -232,12 +240,8 @@ export class StaticHeader extends Header<StaticHeaderProps> {
             if (currentLineCount <= 1 || currentLineCount < originalLineCount)
                 break
         }
-
-        // if decreasing the font size didn't make a difference, use the initial font size
-        if (title.lines.length === originalLineCount) {
-            return makeTitle(initialFontSize)
-        }
-
+        // return the title at the new font size: either it now fits into a single line, or
+        // its size has been reduced so the multi-line title doesn't take up quite that much space
         return title
     }
 

packages/@ourworldindata/grapher/src/header/HeaderManager.ts

@@ -18,4 +18,6 @@ export interface HeaderManager {
     framePaddingVertical?: number
     isOnCanonicalUrl?: boolean
     isInIFrame?: boolean
+    isGeneratingThumbnail?: boolean
+    fontSize?: number
 }