投稿このブログではこれまで「文字サイズの比率と調和」や「音楽、数学、タイポグラフィ」といった記事で、調和数列をもとにしたスケールから文字サイズを決定する手法を紹介してきました。私たちのチームではこのスケールを「ハーモニック・モジュラー・スケール」と呼び、実際に多くのプロジェクトで採用しています。Sketch」を公開しました。これらのツールはスケールにもとづく文字サイズを算出すると同時に、行の高さを一定のユニットの整数倍に揃える機能も持っています。ScaleはSassライブラリです。ハーモニック・モジュラー・スケールにもとづくfont-sizeと、一定のユニットの整数倍からなるline-heightを出力します。ライブラリはSassの新しいモジュールシステムを使って書かれています。ライブラリでは以下のオプション変数を設定できます。$scale-factor:スケールのもとになる調和数列の、各項の分母にあたる整数。デフォルトは8$base-font-size:スケールの基準になるfont-sizeの値。デフォルトは1rem$line-height-unit:line-heightの最小単位。デフォルトは0.25rem$use-calc:出力結果のfont-sizeとline-heightプロパティの値にcalc()関数を使うかどうか。デフォルトはtrueもしこれらのオプションを変更する場合は、@useで読み込むときにwith節で上書きします。false);ライブラリのもっとも基本的な使い方は、以下のようにsizes()ミックスインを用いてfont-sizeとline-heightを出力するものです。1);}これは以下のようなアウトプットが得られます。*/}sizes()ミックスインは2つの引数を取ります。1つめの$font-size-degreeは必須の引数で、文字サイズのスケール上の位置を指定します。オプションの$base-font-sizeを0として、それより大きければ正、小さければ負の整数を指定します。$base-font-sizeが1rem(16px)、$scale-factorが8のときのfont-sizeの出力結果は以下のようになります。10.667px第2引数の$line-height-degreeは行の高さを決定するためのものです。sizes()で得られるline-heightの値はつねにオプション$line-height-unit(デフォルトは0.25rem[4px])の整数倍になります。$line-height-degreeは、font-sizeが最低限収まるline-heightを0として、そこからどれだけ増減させるかを整数で指定します。上記の例では、bodyのfont-sizeが16pxなので、これが最低限収まる4px単位のline-heightは同じく16pxです。$line-height-degreeが3なので、16pxに12pxを足した28pxがline-heightとして得られます。h1はfont-sizeが25.6pxで$line-height-degreeの0に当たるのが28pxなので、1を指定すると結果は32pxになります。以下の表はfont-sizeが0.8rem(12.8px)の場合のline-heightプロパティの出力です。12pxまたget-line-height()という、line-heightをもとにした長さを返す関数も用意されています。これは例えば「本文2行分のマージンを中見出しの上に持たせたい」というようなときに便利です。引数として$font-size-degreeと$line-height-degreeに加えて、line-heightを何倍するかを指定する$linesも渡せます。hms.get-line-height($theme-sizes-body);}これは次のように出力されます。SketchはSketchでテキストをスタイリングするためのプラグインです。GUIを通じて、ハーモニック・モジュラー・スケールにもとづく文字サイズと、ユニットの整数倍からなる行の高さを指定できます。デザイナーと開発者が共通のロジックでタイポグラフィに触れることで、両者の連携が円滑になることを目指して開発しました。degreeのスライダーを調整してください。チームでSketchファイルを共有するときは、メンバーがそれぞれプラグインをインストールしておくと便利です。レイヤーを選択するだけでパラメーターの値を共有できます。問い合わせシフトブレインではウェブサイトのデザインやフロントエンド開発などを承っております。お気軽にご相談ください。問い合わせフォーム→ホーム私たちについてケーススタディブログ問い合わせRSSフィードTwitter。