모바일 OS별 font-weight 적용

필요성

웹상에서 적절한 font를 보여주는 것은 매우 중요하며 웹폰트를 사용하지 않고 내장폰트를 이용한다면 내장폰트에 맞게 적절한 폰트수치를 사용하는게 중요하다.

현재 운영중인 iOS, Android에서 제공되는 웹뷰에서 각기 다른 폰트가 적용되고 있다. (별도의 웹폰트를 사용하고 있지 않다.)

iOS, Android 모두 디바이스에 내장된 폰트를 사용하고 있습니다.

iOS의 경우 .AppleSystemUIFont, Android의 경우 Noto Sans CJK KR가 적용된다.

iOS디자인 가이드상으로는 font-weigh을 600으로 사용하여야 하고 Android는 유사한 두께로 보여주기위해 700을 사용하여야 했다.

두 폰트의에 동일한 font-weight을 적용할 경우 한 쪽 폰트가 너무 두껍게 보이는 이슈가 존재하여 OS별 적절한 font-weight을 지정할 필요가 있음

 

해결방법

개발중인 서비스에서 font-weight은 scss 변수를 통해 관리중입니다. 

볼드의 경우 아래처럼 700으로 고정해서 지정해서 사용 중이였습니다. 

(bold가 700)

$font-weight_b: 700;

하지만 디자인 가이드 기준으로 iOS에서 600, Android는 700을 적용해야하는 이슈가 있습니다.

그래서 아래처럼 @supports와 css variables를 이용해 iOS, Android에 별도의 font-weight을 지정하는 방식으로 변경하였습니다.

@supports를 통해 -webkit-touch-callout: none 속성이 지원된다면 --bold, --extra_bold 를 지정하도록 처리 하였습니다.

-webkit-touch-callout 속성은 safari on iOS 에서만 지원되기 때문에 해당속성이 지원되면 iOS라고 판단했습니다.

@supports를 통해 선언된 변수가 없을경우 var에 디폴트값을 지정하여 font-weight이 지정되도록 처리하였습니다.

ex) var(--bold, 700) --bold가 없다면 700이 적용

//ios safari에서만 사용할 수치 정의
@supports (-webkit-touch-callout: none) {
    :root {
        --bold: 600;
        --extra_bold: 800;
    }
}

/* font weight */
$font-weight_brand: 400;
$font-weight_b: var(--bold, 700);
$font-weight_xb: var(--extra_bold, 900);

 

참조

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

https://developer.mozilla.org/ko/docs/Web/CSS/@supports

https://developer.mozilla.org/ko/docs/Web/CSS/var()