text crop [ codepen: css ]
HTMLで記述した文字要素で勝手に入る上下余白があります。 margin でも padding でもなく、フォント自体が持っている余白。これを調整するための SCSS, LESS, Stylus コードを生成できるサービスで Text Crop というのがあります。
↑こちらの Text Crop の微調整機能、フォントの種類やサイズ、行間などによって微妙に調整値が変わってきます。それをフォントサイズ別にまとめて確認するための Codepen 作りました。
微調整機能で使用しているのが :before と :after という JavaScript から操作できない擬似要素 なので CSS（SCSS） で調整。行間、太さ、文字種に関しては CSS クラスを大量に用意しておいて、 JavaScript で一括変更できるように調整。こうしておくことで dat.gui で使うときも設定しやすい。
dat.gui
プログラムの中身を直感的なGUIで操作できるJavaScriptライブラリ。
この記事が気に入ったらサポートをしてみませんか？