ブログに適したフォント

結論

• apple端末ならヒラギノ角ゴ、ソレ以外はNoto Sans JPを使う
• 約物半角フォント¹とtext-autospace²を入れよう

プロンプト

1. 現状のブログシステムに`YakuHanJPフォント`を適応して
2. 参照デバイスがApple系の場合は`ヒラギノ角ゴ`を使うように設定して
3. 参照デバイスがApple以外の場合はNoto Sans JPを使うように設定して
4. `text-autospace: normal;`を適用して

任意のAgentに投げたら、よしなに実装してくれるよ。きっと。

比較

好みの違いすぎる

具体例

AIに書かせるなら読む必要無いので、このセクションも実はいらないのかな、と思ったり思わなかったり

@import "@fontsource/noto-sans-jp/400.css";
@import "@fontsource/noto-sans-jp/500.css";
@import "@fontsource/noto-sans-jp/600.css";
@import "@fontsource/noto-sans-jp/700.css";
@import "yakuhanjp";

@theme {
  --font-sans:
    "YakuHanJP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", ui-sans-serif, system-ui,
    "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

と、

text-autospace: normal;

小ネタ

今回のOGPと記事内画像はKeynoteで作ってみた

それっぽい

「ブログに適したフォント」というより「ブログに適したフォントの設定」が適してるかも知れない