[SYSTEM] Font Setting

[yangareum1818]

font-size: 62.5%

1px = 0.1rem 10px = 1rem 100px = 10rem

• h1 : 5.6rem
• h2 : 3.2rem
• h3 : 2.2rem
• h4 : 1.8rem

[callmebyneon]

tailwind.config.ts에 추가 완료했습니다.

const config: Config = {
  ...
  theme: {
    fontSize: {
      // 1rem = 16px 기준으로 계산됨
      "H1": [
        pxToRem(56),
        {
          lineHeight: "128.6%",
          letterSpacing: "-0.0319em",
          fontWeight: "bold",
        },
      ],
      "H2": [
        pxToRem(32),
        {
          lineHeight: "133.4%",
          letterSpacing: "-0.027em",
          fontWeight: "bold",
        },
      ],
      "H3": [
        pxToRem(22),
        {
          lineHeight: "136.4%",
          letterSpacing: "-0.0194em",
          fontWeight: "bold",
        },
      ],
      "H4": [
        pxToRem(18),
        {
          lineHeight: "144.5%",
          letterSpacing: "-0.0002em",
          fontWeight: "bold",
        },
      ],
      "subtitle": [
        pxToRem(14),
        {
          lineHeight: "136.4%",
          letterSpacing: "-0.0194em",
          fontWeight: "medium",
        },
      ],
      "caption": [
        pxToRem(12),
        {
          lineHeight: "133.4%",
          letterSpacing: "0",
          fontWeight: "regular",
        },
      ],
      "body-nomral": [
        pxToRem(16),
        {
          lineHeight: "150%",
          letterSpacing: "0",
          fontWeight: "regular",
        },
      ],
      "body-bold": [
        pxToRem(16),
        {
          lineHeight: "150%",
          letterSpacing: "0",
          fontWeight: "semibold",
        },
      ],
      "label-nomral": [
        pxToRem(14),
        {
          lineHeight: "142.9%",
          letterSpacing: "0",
          fontWeight: "medium",
        },
      ],
      "label-bold": [
        pxToRem(14),
        {
          lineHeight: "142.9%",
          letterSpacing: "0",
          fontWeight: "semibold",
        },
      ],
    },
...