タイポ

無限スクロールで作ったタイポグラフィで駄目出しがあり、作り直すことに。文字の大きさに強弱をつけて見せたいそう。そうすると、ある程度体裁を整える必要があるので、イラレでデザインしなきゃなりません。その際、svgに書き出すのと、CSSのグリッドでレイアウトするのどっちがいいのか試してみたので、メモ。

イラレで66×38のマス目を作り、その中で大きさや間隔を見ながら、テキストを配置。まだ、本採用するかわからないので、粗々で置いていきます。カーニングも現状全体に一律でかけるだけ。そして、出来上がったラフを元に、グリッドで配置してみることに。かなり複雑なので、数えるのが大変でしたが、希望通りの場所に文字が置いてあります。ただ、そのままでは文字が枠内でフィットしないので、その文字をsvgに変換。調べると、inline svgというのがあり、textにそのまま文字を打ち込むことができます。拡大縮小にも対応しているので、下記を参考にいけるかと思いやってみましたが、いけませんでした。というのも、縦書きにした部分など個別で拡大縮小する分には問題ないのですが、連携して拡大縮小するには間隔が希望通りに行かず、パラパラになってしまうからです。

HTMLで文字サイズを親要素の横幅に比例させたい場合はインラインSVGが便利 | シスナビコラム

HTMLでコードを書く際に、表示領域がどんな横幅でも文字を改行させず、文字サイズを大きくしたり小さくしたりして対応させた…

そこから、グリッドを諦め、発想を転換。「あれっ？イラレの書き出しでいけるんだから、svgの中でtextを配置すればいいじゃね？」と思いつき、やってみると想定どおり、全体で拡大縮小され、間隔も希望通りです。文字を縦方向に回転させたりもできるので、ある程度柔軟にレイアウトを組めそう。ただ、全部のtextのxとyを数字で指定しなければならず、かなり面倒です。しかも、font-sizeで大きさを調整するとxとyの値もちょっとづつ変わるので、数字でバシッと決めるのもムズい印象。あとは、カーニングを個別でかけるのも難しそうなので、イラレで調整してsvgで書き出した方が早そう。結果、レスポンシブのPCとスマホで縦・横で別の画像を使うことになり、イラレ書き出しで終了したのでした。