Font Padding Guide

타이틀과 설명의 사이가 20px 인 디자인 가이드가 왔다.

타이틀 텍스트는 font-size:15px , line-height:25px 고,

설명 텍스트는 font-size:13px , line-height:20px 이었다.

타이틀과 설명의 사이를 margin 이나 padding 으로 20px 을 주면

디자인 가이드와 동일할까?

아마 20px 보다 훨씬 넓게 나타날것이다.

font-size, line-height 에 따라 기본적으로 가지는 font padding 이 있기 때문이다.

PC에서라면 브라우져를 캡쳐해서 포토샵이나 다른 툴로 바로 확인이 가능하지만

모바일은 확인이 어렵다. 그래서 만들었다.

마크업 산출물에 body 의 맨하단에

<script src="https://joontop.github.io/FontPadding/build/font-padding1.0.0.js"></script>

이렇게 추가해주면 바로 확인해볼수 있다.

버튼 두개가 보일텐데 하단 버튼이 스위치다.

스위치를 키고 텍스트를 그냥 클릭해라.

끝.