src/features/SetupFont/model/const/const.ts

@@ -21,3 +21,11 @@ export const DEFAULT_LINE_HEIGHT = 1.5;
 export const MIN_LINE_HEIGHT = 1;
 export const MAX_LINE_HEIGHT = 2;
 export const LINE_HEIGHT_STEP = 0.05;
+
+/**
+ * Letter spacing constants
+ */
+export const DEFAULT_LETTER_SPACING = 0;
+export const MIN_LETTER_SPACING = -0.1;
+export const MAX_LETTER_SPACING = 0.5;
+export const LETTER_SPACING_STEP = 0.01;

src/features/SetupFont/model/state/manager.svelte.ts

@@ -3,15 +3,19 @@ import { createTypographyControlManager } from '../../lib';
 import {
     DEFAULT_FONT_SIZE,
     DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
     FONT_SIZE_STEP,
     FONT_WEIGHT_STEP,
+    LETTER_SPACING_STEP,
     LINE_HEIGHT_STEP,
     MAX_FONT_SIZE,
     MAX_FONT_WEIGHT,
+    MAX_LETTER_SPACING,
     MAX_LINE_HEIGHT,
     MIN_FONT_SIZE,
     MIN_FONT_WEIGHT,
+    MIN_LETTER_SPACING,
     MIN_LINE_HEIGHT,
 } from '../const/const';
 
@@ -49,6 +53,17 @@ const controlData: ControlModel[] = [
         decreaseLabel: 'Decrease Line Height',
         controlLabel: 'Line Height',
     },
+    {
+        id: 'letter_spacing',
+        value: DEFAULT_LETTER_SPACING,
+        max: MAX_LETTER_SPACING,
+        min: MIN_LETTER_SPACING,
+        step: LETTER_SPACING_STEP,
+
+        increaseLabel: 'Increase Letter Spacing',
+        decreaseLabel: 'Decrease Letter Spacing',
+        controlLabel: 'Letter Spacing',
+    },
 ];
 
 export const controlManager = createTypographyControlManager(controlData);