diff --git a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts b/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts
index 5b28718..d65516d 100644
--- a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts
+++ b/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts
@@ -1,4 +1,3 @@
-import type { ControlId } from '$features/SetupFont/model/state/manager.svelte';
 import {
     type ControlDataModel,
     type ControlModel,
@@ -9,6 +8,7 @@ import {
 } from '$shared/lib';
 import { SvelteMap } from 'svelte/reactivity';
 import {
+    type ControlId,
     DEFAULT_FONT_SIZE,
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
@@ -16,6 +16,7 @@ import {
 } from '../../model';
 
 type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, keyof ControlDataModel>;
+
 export interface Control extends ControlOnlyFields<ControlId> {
     instance: TypographyControl;
 }
@@ -29,11 +30,11 @@ export class TypographyControlManager {
     constructor(configs: ControlModel<ControlId>[], storage: PersistentStore<TypographySettings>) {
         this.#storage = storage;
 
-        // 1. Initial Load
+        // Initial Load
         const saved = storage.value;
         this.#baseSize = saved.fontSize;
 
-        // 2. Setup Controls
+        // Setup Controls
         configs.forEach(config => {
             const initialValue = this.#getInitialValue(config.id, saved);
 
@@ -46,7 +47,7 @@ export class TypographyControlManager {
             });
         });
 
-        // 3. The Sync Effect (UI -> Storage)
+        // The Sync Effect (UI -> Storage)
         // We access .value explicitly to ensure Svelte 5 tracks the dependency
         $effect.root(() => {
             $effect(() => {
@@ -65,7 +66,7 @@ export class TypographyControlManager {
                 };
             });
 
-            // 4. The Font Size Proxy Effect
+            // The Font Size Proxy Effect
             // This handles the "Multiplier" logic specifically for the Font Size Control
             $effect(() => {
                 const ctrl = this.#controls.get('font_size')?.instance;
@@ -123,10 +124,32 @@ export class TypographyControlManager {
         if (ctrl) ctrl.value = val * this.#multiplier;
     }
 
+    /**
+     * Getters for controls
+     */
     get controls() {
         return Array.from(this.#controls.values());
     }
 
+    get weightControl() {
+        return this.#controls.get('font_weight')?.instance;
+    }
+
+    get sizeControl() {
+        return this.#controls.get('font_size')?.instance;
+    }
+
+    get heightControl() {
+        return this.#controls.get('line_height')?.instance;
+    }
+
+    get spacingControl() {
+        return this.#controls.get('letter_spacing')?.instance;
+    }
+
+    /**
+     * Getters for values (besides font-size)
+     */
     get weight() {
         return this.#controls.get('font_weight')?.instance.value ?? DEFAULT_FONT_WEIGHT;
     }
@@ -175,10 +198,14 @@ export interface TypographySettings {
  * Creates a typography control manager that handles a collection of typography controls.
  *
  * @param configs - Array of control configurations.
+ * @param storageId - Persistent storage identifier.
  * @returns - Typography control manager instance.
  */
-export function createTypographyControlManager(configs: ControlModel<ControlId>[]) {
-    const storage = createPersistentStore<TypographySettings>('glyphdiff:typography', {
+export function createTypographyControlManager(
+    configs: ControlModel<ControlId>[],
+    storageId: string = 'glyphdiff:typography',
+) {
+    const storage = createPersistentStore<TypographySettings>(storageId, {
         fontSize: DEFAULT_FONT_SIZE,
         fontWeight: DEFAULT_FONT_WEIGHT,
         lineHeight: DEFAULT_LINE_HEIGHT,