火曜日, 11月 25, 2025
火曜日, 11月 25, 2025
- Advertisment -
ホームニューステックニュースKagi ブログのタイポグラフィ – CodePen

Kagi ブログのタイポグラフィ – CodePen


私は使ってきました どうぞ 過去数カ月間の検索用。非常にクリーンな検索結果が気に入っています。 Google の検索結果は、広告と信用を失った AI の汚泥ですべてがごちゃ混ぜにされているように感じられます。有益なエクスペリエンスを提供するインセンティブが、利益を搾り取ることと、できるだけ多くの AI を目に見えるようにするという企業の義務によって圧倒されているように感じます。

また、Google が AI のスロップを気にしているとも思えません。同様に、『プレデター: バッドランズ』の映画レビューが人間によって実際に映画を観て書かれたものであるかどうか、またはLLMは基本的に映画レビューがどのようなものかを知っているため、ジェミニがおならをしたレビューであるかどうかを彼らは気にします。私、確かに知りたいです。だから私はKagiに満足しています スロップストップ アイデア。

しかし、私はこのコラムを、本当は話すつもりさえなかった事柄から始めることができました。

当然のことながら、Kagi のブログのタイポグラフィーについて話したいと思います (SlopStop リンクをたどってください)。

最後のこの一言を見てください 両方 それらのヘッダーの。オフに見えます。それが「未亡人」なのか「孤児」なのか思い出せないが、調べてみると、どちらでもない、 「ラント」 (笑)。

明らかにそんなことはあり得ません。

1 つのオプションは、 text-wrap: balance; ヘッダーに。これは次のようになります。

えーっっっっっっっっっっっっっっっっ。また 理想的ではない。これらのヘッダーは次のようになります 半分 利用可能なスペースの幅。ヘッダーを中央揃えにすると、バランスがさらに良くなります。これは実際に、スタイル クエリが任意のスタイルでどのように機能するべきかを考えさせます…

h1, h2, h3, h4 {
  
  @media style(text-align: center) {
    text-wrap: balance;
  }
}Code language: CSS (css)

とにかく、ここではバランスを取らずに、試してみましょう text-wrap: pretty; (どれの Firefox はサポートされていません)。それでは行きます:

より良い。の pretty 価値観 たくさんのことをしますラントプロテクションもその中にあります。

正直なところ、それは line-height それが私を最も悩ませます。大きなヘッダーには多すぎる。マイナスで文字も少し引っ張って持ち込みましょう letter-spacing

今、私たちは階層と組織と少し戦わなければなりません。文字はすべて真っ黒です…大丈夫です。すべてが互いにほぼ同じ距離にある…それは少し奇妙です。したがって、テキストのサイズと太さ (および斜体の小さなインスタンス 1 つ) に頼っているだけです。

ここを助けるために、もう少しだけ貢献できると思います。 Kagi には素晴らしい小さな犬のロゴがあり、タイトルに彼女を取り入れて差別化しています。ナビゲーションはタイトルとインラインで設定できます。素敵な黄色のブランドカラーを使用して、タイトルと日付を適切に設定し、そのまま使用します。

おそらく、この問題を解決するには CodePen アカウントを取得するだけでよいのではないでしょうか?



Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -