프로젝트 SPAM #6 UI설정(3)

얼마 없는 줄 알았는데 UI 준비만 한건가. 포스팅이 끝나질 않는다.

 

---

5. 텍스트 스타일

중구난방 내 마음대로 쓰는 또 다른 대표 주자는 폰트일 것이다. 어? 조금 큰가. 사이즈 줄이고, 여긴 좀 더 크게 할까. 옆으로 삐져나오잖아 줄여야지. 등등.. 기껏 만들어 놓은 프로토타입은 엿 바꿔 먹었는지 싸그리 무시한채 근본 없는 여백한테 밀려 억울하게 자리 뺐긴 폰트한테 화풀이를 하고있다. 폰트 사이즈가 나중에 보면 8부터 20까지 하나씩 다 존재하는 끔찍한 상황이 도래할 수도 있다. 그런거 방지하려고 미리 정해놓은 건데, 그보다 더 확실한 잠금장치가 필요하다면 믹싱으로 텍스트 스타일을 지정해놓고 쓰자. 

이번 플랫폼에서는 메인 제목, 소제목으로 타이틀을 2개 만들고, 메인 폰트는 16 사이즈로 통일했다. 그리고 그 밑으로 14, 13, 12 사이즈의 폰트가 필요해서 총 6가지 스타일을 만들었다.

 

 

 

 

 

 

 

/* text-style.scss */

@mixin text-style-12() {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.005em;
}

@mixin text-style-13() {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

@mixin text-style-14() {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@mixin text-style-16() {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@mixin text-style-24() {
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

@mixin text-style-46() {
  font-size: 46px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.32px;
}

텍스트 스타일 활용은 아래와 같이 하고 있다.

/* 일부 예시 */

.subtitle {
    border-bottom: 1px solid $border;
    padding: 10px 20px;

    span {
      @include text-style-24;
    }
  }