Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。

ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。

Martian Mono -GitHub

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。

たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。

CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。

clamp() Calculator

年に一度の翔泳社祭2023が開催です！
当ブログでも最近紹介したばかりの新刊もたくさんセール対象になっており、デザイン書・Web制作の解説書・イラスト本がたくさん揃っています。

セール期間は、2/10の金曜日まで。
期間が短いので、お見逃しないように！

去年暮れに発売されたばかりのKindle本もたくさんあり、驚きのセールです。

翔泳社祭2023: Kindleストア

iPadでイラストを描くときの候補の一つが、Procreateです。
Procreateはプロのイラストレーターや漫画家も使用している本格派ながら、割と安価（2023年現在、2000円）で、しかも買い切りなので、これから始める人にも敷居が低いアプリです。

Procreateの初心者向けに、基本的な操作方法からさまざまなイラストやグラフィックのテクニックまで学べる解説書を紹介します。入門書なので、バリバリ使用している人には物足りないかもしれません。

ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。

ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。

Justify Space Between Individual Items in Flexbox
by Jim Nielsen

マンガや同人誌にぴったりなアンチゴチのフリーフォントをたくさんリリースされている、おたもん氏の新作フリーフォントがリリースされました。今回は柔らかい雰囲気で読みやすくて、かわいいPOP風ゴシック体で、マンガや同人誌のセリフ、動画のテロップなどにぴったりなフリーフォントです。

源暎ぽっぷる

CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。

:is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。

たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。

Using :is() in complex selectors selects more than you might initially think
by Bramus

商用でも無料の英語フリーフォントをいざ探すとなると面倒だと思うので、まとめました。ブラシやペンで書かれたようなおしゃれな筆記体・手書き・スクリプト系の英語フリーフォントを紹介します。

画像にぽんと添えるだけで、おしゃれなデザインになる素敵なフォント達です。