🔨 (grapher) use a shared set of font sizes

packages/@ourworldindata/grapher/src/axis/Axis.ts

@@ -25,6 +25,7 @@ import {
     ValueRange,
 } from "@ourworldindata/core-table"
 import { Tickmark } from "./AxisConfigInterface"
+import { GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants.js"
 
 interface TickLabelPlacement {
     value: number
@@ -387,7 +388,7 @@ abstract class AbstractAxis {
     }
 
     @computed get tickFontSize(): number {
-        return 0.75 * this.fontSize
+        return GRAPHER_FONT_SCALE_12 * this.fontSize
     }
 
     @computed protected get baseTicks(): Tickmark[] {
@@ -434,7 +435,7 @@ abstract class AbstractAxis {
     }
 
     @computed get labelFontSize(): number {
-        return 0.75 * this.fontSize
+        return GRAPHER_FONT_SCALE_12 * this.fontSize
     }
 
     @computed get labelTextWrap(): TextWrap | undefined {

packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx

@@ -29,6 +29,7 @@ import {
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AREA_OPACITY_DEFAULT,
+    GRAPHER_FONT_SCALE_12,
 } from "../core/GrapherConstants"
 import {
     HorizontalAxisComponent,
@@ -173,7 +174,10 @@ export class DiscreteBarChart
     @computed private get labelFontSize(): number {
         const availableHeight =
             this.boundsWithoutColorLegend.height / this.barCount
-        return Math.min(0.75 * this.fontSize, 1.1 * availableHeight)
+        return Math.min(
+            GRAPHER_FONT_SCALE_12 * this.fontSize,
+            1.1 * availableHeight
+        )
     }
 
     @computed private get legendLabelStyle(): {

packages/@ourworldindata/grapher/src/core/GrapherConstants.ts

@@ -44,6 +44,18 @@ export const GRAPHER_AXIS_LINE_WIDTH_THICK = 2
 
 export const GRAPHER_AREA_OPACITY_DEFAULT = 0.8
 
+export const BASE_FONT_SIZE = 16
+
+export const GRAPHER_FONT_SCALE_9_6 = 9.6 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_10 = 10 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_10_5 = 10.5 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_11 = 11 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_11_2 = 11.2 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_12 = 12 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_12_8 = 12.8 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_13 = 13 / BASE_FONT_SIZE
+export const GRAPHER_FONT_SCALE_14 = 14 / BASE_FONT_SIZE
+
 export enum CookieKey {
     isAdmin = "isAdmin",
 }
@@ -61,8 +73,6 @@ export enum StackMode {
     relative = "relative",
 }
 
-export const BASE_FONT_SIZE = 16
-
 export enum FacetStrategy {
     none = "none", // No facets
     entity = "entity", // One chart for each country/entity

packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx

@@ -22,7 +22,12 @@ import {
     NumericBin,
     CategoricalBin,
 } from "../color/ColorScaleBin"
-import { BASE_FONT_SIZE } from "../core/GrapherConstants"
+import {
+    BASE_FONT_SIZE,
+    GRAPHER_FONT_SCALE_12,
+    GRAPHER_FONT_SCALE_12_8,
+    GRAPHER_FONT_SCALE_14,
+} from "../core/GrapherConstants"
 import { darkenColorForLine } from "../color/ColorUtils"
 
 export interface PositionedBin {
@@ -179,7 +184,7 @@ export class HorizontalNumericColorLegend extends HorizontalColorLegend {
     }
 
     @computed private get tickFontSize(): number {
-        return 0.75 * this.fontSize
+        return GRAPHER_FONT_SCALE_12 * this.fontSize
     }
 
     @computed private get itemMargin(): number {
@@ -357,7 +362,7 @@ export class HorizontalNumericColorLegend extends HorizontalColorLegend {
     }
 
     @computed private get legendTitleFontSize(): number {
-        return this.fontSize * 0.875
+        return this.fontSize * GRAPHER_FONT_SCALE_14
     }
 
     @computed private get legendTitle(): TextWrap | undefined {
@@ -686,7 +691,7 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
     }
 
     @computed private get markLines(): MarkLine[] {
-        const fontSize = this.fontSize * 0.8
+        const fontSize = this.fontSize * GRAPHER_FONT_SCALE_12_8
         const rectSize = this.fontSize * 0.75
         const rectPadding = 5
         const markPadding = 5

packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx

@@ -15,7 +15,7 @@ import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { VerticalAxis } from "../axis/Axis"
 import { EntityName } from "@ourworldindata/core-table"
-import { BASE_FONT_SIZE } from "../core/GrapherConstants"
+import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants"
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 
@@ -167,7 +167,7 @@ export class LineLegend extends React.Component<{
     leftPadding = 35
 
     @computed private get fontSize(): number {
-        return 0.75 * (this.manager.fontSize ?? BASE_FONT_SIZE)
+        return GRAPHER_FONT_SCALE_12 * (this.manager.fontSize ?? BASE_FONT_SIZE)
     }
 
     @computed private get fontWeight(): number {

packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChartConstants.ts

@@ -15,7 +15,10 @@ import {
     ScatterPointLabelStrategy,
     EntitySelectionMode,
     SeriesName,
-    BASE_FONT_SIZE,
+    GRAPHER_FONT_SCALE_10,
+    GRAPHER_FONT_SCALE_10_5,
+    GRAPHER_FONT_SCALE_12,
+    GRAPHER_FONT_SCALE_13,
 } from "../core/GrapherConstants"
 
 import { Bounds, PointVector } from "@ourworldindata/utils"
@@ -77,12 +80,12 @@ export const SCATTER_POINT_DEFAULT_RADIUS: number = 3
 export const SCATTER_LINE_MIN_WIDTH: number = 0.5 // only enforced in rendered lines, not in scale
 export const SCATTER_LINE_MAX_WIDTH: number = 2
 export const SCATTER_LINE_DEFAULT_WIDTH: number = 1
-export const SCATTER_LABEL_MIN_FONT_SIZE_FACTOR: number = 10 / BASE_FONT_SIZE
-export const SCATTER_LABEL_MAX_FONT_SIZE_FACTOR: number = 13 / BASE_FONT_SIZE
+export const SCATTER_LABEL_MIN_FONT_SIZE_FACTOR: number = GRAPHER_FONT_SCALE_10
+export const SCATTER_LABEL_MAX_FONT_SIZE_FACTOR: number = GRAPHER_FONT_SCALE_13
 export const SCATTER_LABEL_DEFAULT_FONT_SIZE_FACTOR: number =
-    10.5 / BASE_FONT_SIZE
+    GRAPHER_FONT_SCALE_10_5
 export const SCATTER_LABEL_FONT_SIZE_FACTOR_WHEN_HIDDEN_LINES: number =
-    12 / BASE_FONT_SIZE
+    GRAPHER_FONT_SCALE_12
 
 export interface ScatterRenderSeries extends ChartSeries {
     displayKey: string

packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx

@@ -6,6 +6,8 @@ import { first, last } from "@ourworldindata/utils"
 import {
     BASE_FONT_SIZE,
     GRAPHER_DARK_TEXT,
+    GRAPHER_FONT_SCALE_10,
+    GRAPHER_FONT_SCALE_11,
     GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
@@ -96,7 +98,10 @@ export class ScatterSizeLegend {
     }
 
     @computed private get label(): TextWrap {
-        const fontSize = Math.max(MIN_FONT_SIZE, 0.625 * this.baseFontSize)
+        const fontSize = Math.max(
+            MIN_FONT_SIZE,
+            GRAPHER_FONT_SCALE_10 * this.baseFontSize
+        )
         return new TextWrap({
             text: "Circles sized by",
             // Allow text to _slightly_ go outside boundaries.
@@ -109,7 +114,10 @@ export class ScatterSizeLegend {
     }
 
     @computed private get title(): TextWrap {
-        const fontSize = Math.max(MIN_FONT_SIZE, 0.6875 * this.baseFontSize)
+        const fontSize = Math.max(
+            MIN_FONT_SIZE,
+            GRAPHER_FONT_SCALE_11 * this.baseFontSize
+        )
         return new TextWrap({
             text: this.manager.sizeColumn.displayName,
             // Allow text to _slightly_ go outside boundaries.

packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx

@@ -31,6 +31,10 @@ import {
     EntitySelectionMode,
     SeriesName,
     GRAPHER_DARK_TEXT,
+    GRAPHER_FONT_SCALE_9_6,
+    GRAPHER_FONT_SCALE_10_5,
+    GRAPHER_FONT_SCALE_12,
+    GRAPHER_FONT_SCALE_14,
 } from "../core/GrapherConstants"
 import { ChartInterface } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
@@ -807,7 +811,10 @@ class LabelledSlopes
             const [v1, v2] = series.values
             const [x1, x2] = [xScale(v1.x), xScale(v2.x)]
             const [y1, y2] = [yScale(v1.y), yScale(v2.y)]
-            const fontSize = (isPortrait ? 0.6 : 0.65) * this.fontSize
+            const fontSize =
+                (isPortrait
+                    ? GRAPHER_FONT_SCALE_9_6
+                    : GRAPHER_FONT_SCALE_10_5) * this.fontSize
             const leftValueStr = yColumn.formatValueShort(v1.y)
             const rightValueStr = yColumn.formatValueShort(v2.y)
             const leftValueWidth = Bounds.forText(leftValueStr, {
@@ -1071,7 +1078,7 @@ class LabelledSlopes
         const { x1, x2 } = slopeData[0]
         const [y1, y2] = yScale.range()
 
-        const tickFontSize = 0.75 * fontSize
+        const tickFontSize = GRAPHER_FONT_SCALE_12 * fontSize
 
         return (
             <g
@@ -1135,7 +1142,7 @@ class LabelledSlopes
                     y={y1 + 10}
                     textAnchor="middle"
                     fill={GRAPHER_DARK_TEXT}
-                    fontSize={0.875 * fontSize}
+                    fontSize={GRAPHER_FONT_SCALE_14 * fontSize}
                 >
                     {xDomain[0].toString()}
                 </Text>
@@ -1144,7 +1151,7 @@ class LabelledSlopes
                     y={y1 + 10}
                     textAnchor="middle"
                     fill={GRAPHER_DARK_TEXT}
-                    fontSize={0.875 * fontSize}
+                    fontSize={GRAPHER_FONT_SCALE_14 * fontSize}
                 >
                     {xDomain[1].toString()}
                 </Text>

packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx

@@ -27,6 +27,7 @@ import {
     EntitySelectionMode,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
+    GRAPHER_FONT_SCALE_12,
     Patterns,
 } from "../core/GrapherConstants"
 import { DualAxisComponent } from "../axis/AxisViews"
@@ -1065,7 +1066,7 @@ export class MarimekkoChart
                     fontWeight={700}
                     fill="#666"
                     opacity={1}
-                    fontSize={0.75 * fontSize}
+                    fontSize={GRAPHER_FONT_SCALE_12 * fontSize}
                     textAnchor="middle"
                     dominantBaseline="middle"
                     style={{ pointerEvents: "none" }}
@@ -1589,7 +1590,7 @@ export class MarimekkoChart
     }
 
     @computed private get entityLabelFontSize(): number {
-        return 0.75 * this.fontSize
+        return GRAPHER_FONT_SCALE_12 * this.fontSize
     }
 
     @computed private get labels(): LabelCandidateWithElement[] {

packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx

@@ -28,6 +28,7 @@ import {
     GRAPHER_DARK_TEXT,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
+    GRAPHER_FONT_SCALE_12,
 } from "../core/GrapherConstants"
 import { ColorScaleManager } from "../color/ColorScale"
 import {
@@ -140,7 +141,7 @@ export class StackedBarChart
     }
 
     @computed get tickFontSize(): number {
-        return 0.75 * this.baseFontSize
+        return GRAPHER_FONT_SCALE_12 * this.baseFontSize
     }
 
     @computed get barWidth(): number {
@@ -156,10 +157,6 @@ export class StackedBarChart
         )
     }
 
-    @computed get barFontSize(): number {
-        return 0.75 * this.baseFontSize
-    }
-
     @computed protected get paddingForLegend(): number {
         return this.sidebarWidth + 20
     }

packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx

@@ -27,6 +27,7 @@ import {
     GRAPHER_AREA_OPACITY_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
+    GRAPHER_FONT_SCALE_12,
     SeriesName,
 } from "../core/GrapherConstants"
 import {
@@ -182,7 +183,7 @@ export class StackedDiscreteBarChart
         // can't use the computed property `barHeight` here as that would create a circular dependency
         const barHeight =
             (0.8 * this.boundsWithoutLegend.height) / this.items.length
-        return Math.min(0.75 * this.fontSize, 1.1 * barHeight)
+        return Math.min(GRAPHER_FONT_SCALE_12 * this.fontSize, 1.1 * barHeight)
     }
 
     @computed private get labelStyle(): {
@@ -651,7 +652,7 @@ export class StackedDiscreteBarChart
             yAxis.place(bar.point.value) - yAxis.place(chartContext.x0)
 
         const barLabel = formatValueForLabel(bar.point.value)
-        const labelFontSize = 0.75 * chartContext.baseFontSize
+        const labelFontSize = GRAPHER_FONT_SCALE_12 * chartContext.baseFontSize
         const labelBounds = Bounds.forText(barLabel, {
             fontSize: labelFontSize,
         })

packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx

@@ -3,7 +3,10 @@ import { sum, max } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
-import { BASE_FONT_SIZE } from "../core/GrapherConstants"
+import {
+    BASE_FONT_SIZE,
+    GRAPHER_FONT_SCALE_11_2,
+} from "../core/GrapherConstants"
 import { Color } from "@ourworldindata/core-table"
 
 export interface VerticalColorLegendManager {
@@ -47,7 +50,9 @@ export class VerticalColorLegend extends React.Component<{
     }
 
     @computed private get fontSize(): number {
-        return 0.7 * (this.manager.fontSize ?? BASE_FONT_SIZE)
+        return (
+            GRAPHER_FONT_SCALE_11_2 * (this.manager.fontSize ?? BASE_FONT_SIZE)
+        )
     }
     @computed private get rectSize(): number {
         return Math.round(this.fontSize / 1.4)