가변폰트와 고정폰트, 굴림과 굴림체의 차이

실제로 알고보면 간단한 팁이지만, 모르면 완전 삽질하는 팁이다.

흔히 css 등을 적어줄때

font-family 로 굴림 등을 지정해서 사용하는데, 이것 말고 굴림체, 명조체 등 ~~체 라고 붙어있는 폰드가 별도로 있다.

차이점부터 이야기하자면 굴림/명조 등은 자간 등을 css 로 지정할 수 있는 가변폰트이고 굴림체/명조체 등은 글자크기만 조정할 수 있고 그 외 자간같은걸 css 로 조정할 수가 없다.

이게 어디서 유용하냐면

SMS 보내는 UI 를 웹상에서 구현할때 일반적인 SMS 화면은 가로 16 x 세로 5 해서 80 byte 를 보내게 되는데, 가변폰트를 사용하게 되면 아무리 LCD 모양에 글자수를 요래저래 맞추어봐도 한글/영어대문자/숫자는 거의 비슷비슷한데 소문자 L 과 같은 것들은 한줄에 16글자가 들어가도록 맞출 수가 없다.

이럴때 font-family 로 ~~체 류를 설정하고 margin-left 와 margin-right 로 좌우 여백을 조정해주면 딱 16글자(한글은 8글자)가 딱 들어가도록 할 수 있다.

아래 두 이미지를 보면 소문자 L 을 입력했을때 표시되는 방식이 뚜렷하게 차이가 남을 알 수 있다.