All files / types/constants typography.ts

100% Statements 12/12
100% Branches 4/4
100% Functions 1/1
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126          248x                     248x                           248x                     248x                                             248x                                                                               457x   457x 430x 27x 10x   17x         248x                  
/**
 * Typography constants for Black Trigram
 */
 
// Font Families
export const FONT_FAMILY = {
  PRIMARY: '"Noto Sans KR", "Malgun Gothic", Arial, sans-serif',
  SECONDARY: '"Nanum Gothic", Arial, sans-serif',
  MONO: '"Nanum Gothic Coding", monospace',
  KOREAN_BATTLE: '"Noto Sans KR", Impact, sans-serif',
  CYBER: '"Orbitron", "Noto Sans KR", monospace',
  SYMBOL: '"Arial Unicode MS", Arial, sans-serif',
  KOREAN: '"Noto Sans KR", "Malgun Gothic", Arial, sans-serif',
} as const;
 
// Font sizes
export const FONT_SIZES = {
  xsmall: 8,
  tiny: 10,
  small: 12,
  medium: 16,
  large: 20,
  xlarge: 24,
  xxlarge: 28,
  huge: 32,
  title: 36,
  subtitle: 28,
} as const;
 
// Font weights
export const FONT_WEIGHTS = {
  light: 300,
  normal: 400,
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  heavy: 900,
} as const;
 
// Korean text sizes
export const KOREAN_TEXT_SIZES: Record<string, number> = {
  tiny: 10,
  small: 12,
  medium: 16,
  large: 20,
  xlarge: 24,
  huge: 32,
  title: 36,
};
 
/**
 * Korean font sizes optimized for mobile devices
 * Korean characters need ~10-15% larger size than Latin for equal readability
 * 
 * UPDATED: Minimum mobile size increased from 14px to 16px for better readability
 * 
 * Extra-small: <380px width (iPhone SE, old Android, budget phones)
 * Small: 380-450px width (standard mobile phones)
 * Regular: 450+ width (large phones, tablets, desktop)
 * 
 * @category Typography
 * @korean 한글모바일글꼴크기
 */
export const KOREAN_MOBILE_FONT_SIZES = {
  SMALL: {
    extraSmall: 15, // 320-380px width (was 13)
    small: 16,      // 380-450px width (was 14)
    regular: 17,    // 450+ width (was 16)
  },
  MEDIUM: {
    extraSmall: 17, // 320-380px width (was 15)
    small: 18,      // 380-450px width (was 17)
    regular: 20,    // 450+ width (was 19)
  },
  LARGE: {
    extraSmall: 20, // 320-380px width (was 18)
    small: 22,      // 380-450px width (was 20)
    regular: 24,    // 450+ width (was 22)
  },
} as const;
 
/**
 * Get Korean font size based on screen width
 * Automatically scales Korean text for readability on small screens
 * 
 * @param baseSize - Base font size category ('SMALL', 'MEDIUM', 'LARGE')
 * @param screenWidth - Screen width in pixels
 * @returns Optimized font size in pixels
 * 
 * @example
 * ```typescript
 * getKoreanFontSize('MEDIUM', 375); // 15 (extra-small)
 * getKoreanFontSize('MEDIUM', 410); // 17 (small)
 * getKoreanFontSize('MEDIUM', 768); // 19 (regular)
 * ```
 * 
 * @public
 * @korean 한글글꼴크기얻기
 */
export function getKoreanFontSize(
  baseSize: keyof typeof KOREAN_MOBILE_FONT_SIZES,
  screenWidth: number
): number {
  const sizeMap = KOREAN_MOBILE_FONT_SIZES[baseSize];
  
  if (screenWidth < 380) {
    return sizeMap.extraSmall;
  } else if (screenWidth < 450) {
    return sizeMap.small;
  } else {
    return sizeMap.regular;
  }
}
 
// Korean font weights
export const KOREAN_FONT_WEIGHTS: Record<string, number> = {
  light: 300,
  normal: 400,
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  heavy: 900,
} as const;