井戸端のダークテーマのフォントについて
from 井戸端にダークテーマを導入したい
暗所においてテキストの読みやすさが低下する問題への対応
止め・撥ね・はらいやセリフなど、字形の細部の視認性が低下する
線の細いフォントも不可
線の密度が一定のものが望ましい
Noto Sans JP は微妙
UIフォントはまあ別に既定の Open Sans のままでええでしょ‥
本文フォント
BIZ UDゴシックあたりがよいのではないかと
UDPの方は字間が詰まりすぎかな…
まあ、勝手に導入することで人に強制的に試用させて反応を見てから検討すればいいか…(常套手段)
who.icon自身はUserCSSとして常用している
よくやるtakker.icon
個人的にはBIZ UDゴシックよりNoto Sans JPの方が普段使いとしては好みMijikko.icon
UDゴも見やすいからこのままでもいい
ブラウザのデフォルトフォントを使用すべきではbsahd.icon
できれば、そうすべきだという根拠を聞きたいwho.icon
本文フォントは app.css においてこのように指定されている
code:app.css
.editor, .grid li, .stream {
font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
ブラウザのデフォルトフォントを使用しないのが現在のデフォルトです
欧文フォントは明示的に指定されている
Windows, macOS, ChromeOS, Android, iOS のすべてにおいておそらくどれかが引っかかる(その他Linux環境は構成が一様ではないので不明)
日本語フォントにヒラギノが指定されている
macOSやiOSではヒラギノが表示されるんじゃないかな
あと-apple-system, BlinkMacSystemFontの指定もない(これはsystem-uiに相当する)
code:app.css
body{ font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif; }
input,button,select,textarea{ font-family:inherit; }
もしブラウザのデフォルトフォントで表示されているとすれば、それはApple製品ではないだけなのでは
とはいえ、それ以外の環境では日本語フォントがブラウザのフォントを参照する指定だといえるのか
過去にデフォルトでないフォントの指定が原因で、Cosenseの挙動が非常に重くなったことがある suto3.icon
フォントの変更は、動作速度低下の原因になるので、なるべく変えないほうが良いと思う
自分のこの点は懸念しているtakker.icon
ただあれはゲームのドット風フォントという非常に特殊なフォントを面白半分に入れたという事情もある
どのOSにも標準搭載されていないフォントだったので、アクセスするたびにダウンロードが走った
Streamのフォントをレトロゲームみたくするのこと
まあしばらくこのままにしてみて、読み込み速度低下が顕著であれば戻せばいいだろう。
Wikiみたいにみんなが文字を書く場所でフォントを環境依存にするのがそもそも良くないMijikko.icon
書く側はおま環なんて気にしてないから
書いたけどある人にとっては見た目が変わるとか
最悪のパターンが、文字対応してなくて読めなくなる(もしくは読みづらくなる)が起こる
個人的にはテーマによってフォント変えるのも否定的
統一した方がUX損なわなくて良い
自分の好みのフォント(Noto Sans JP)をブラウザで指定しているのでそれを使いたいseibe.icon
どうしたらいいだろう? 優先順位がUserCSS > ProjectCSSなら以下をUserCSSに書けばよいのかな?
井戸端にダークテーマを導入したい#6998ecc90000000000976bf6
井戸端にダークテーマを導入したい#6998ecc90000000000976c00
うーん変わっていなさそう……
あー、そちらはオーバーライド前のapp.cssのやつでして…who.icon
解消法1. font-family:の値の末尾に!importantを指定する
自分の個人用CSSならこれでいいと思うMijikko.icon
解消法2. style.cssの方のセレクターを上書きする
井戸端にダークテーマを導入したい#69914a580000000000e6ae1e ← こちらですね
ページがごちゃついてしまったので本体のコード記法がどれなのか分かりづらい
解消法3. 変数--page-font-familyを導入する。
あー、これがいいかな…
詳細度から解放される(疎結合になる)のでいいと思うMijikko.icon
dark theme 側に --page-font-familyを導入しておきました
二段構えです。今後セレクターが変更されても適用されます
UserCSSには次のように記述します
code:example.css
body {
--page-font-family: "Noto Sans JP", "Noto Sans CJK JP";
}
:where(main) .editor#editor, .grid li.page-list-item, .app .stream {
font-family: var(--page-font-family), var(--icons, "AppIcons"), sans-serif;
font-size-adjust: inherit;
}
from 2026/02/20
who.icon
セレクターの詳細度を上げてダークテーマを「BIZ UDゴシック」が適用されるようにした
競合してしまっていた「Font Awesomeを常時使えるようにするUserCSS」を変更して--icons変数を導入した
かなり読みやすくなった!ありがとうwogikaze.iconmtane0412.icon
なるほどはるひ.icon
反対意見もほしいwho.icon
hoshihara.icon
iPhoneから見た井戸端のフォントが少し変わっている
上にその話書いてた
vlzs.icon
BIZ UDゴシックへの変更直後は見づらくてむむむだったのに急に読みやすくなった
何だこの感覚の変化
最初に見たときの「嫌だ!」を言わずに遅延して慣れるまで待った。良かった。
この嫌だの気持ちは信頼できない
今までと別のものに変化したことによるものか
フォント自体の性能に問題があって見づらいとかなのか判別できない
読みやすく設計されたフォントだろうからこれではないだろと思った
ので慣れるまで待ちたい
デフォルトフォントと変更先の字体の見た目の違いがすごく気になっていたのにあまりなくなった
井戸端のページの字と、自分のプロジェクトの字の違い
しばらく使ったから慣れたけど、読み慣れていない人間には私が出会った感覚がまだ起きるのだよな
自分や自分の周りのチームを中心としてScrapboxを使っていて、フォントを変えていない人が初めて井戸端を訪れたとき、見慣れないフォントでむむむになるはず
ブラウザを変えたときにも起きる
Chromeのデフォルトフォントから変わって読みづらい感じがする体験はCosenseを他のブラウザ(Firefox)を使って見たときにも起きる
Firefoxに乗り換えようかなと思って試しているときにフォントが違ってむむむだった
Firefoxのデフォルトフォントは設定から変更できる
逆にBIZ UDゴシックのほうに慣れている人もいる気がする
プレゼンにBIZ UDPゴシックを使ってるので慣れてるSummer498.icon
というかそれならブラウザのデフォルトフォントが一番良いのでは
誰もが見慣れている自分自身のブラウザのデフォルトフォントを使用するのがいいのでは
BIZ UDゴシックにしてみた理由を読んでこよう
まだ読んでないがたぶん人間に優しい一番良いフォントということだったんでは
なんか新鮮だからとか、やってみたいから、も理由になると思う
(ここに読んで確認したことを書く)だった。
基素.icon
フォントが変わったので慣れるまでウ〜になる
フォントだ(ほんとだ)caki.icon