クリスのコーナー：タイプ – Codepen

私はタイポグラフィに焦点を合わせたエディションの気分です。私は読むつもりだったいくつかのリンクを保存しました。私は今読み始めます、そして、私が以下に置く良いものになるリンクを読み始めます。

マイク・マイがまとめた タイポグラフィマニュアル （ウェブ上のタイプ用）。それは11ビットのアドバイスのかなりランダムな飛び散りです。元は ペン！私はそれらのそれぞれを読んで、私を育てざるを得ません まあ、実際 指、しかし、私はますますこの業界でニュアンスを排除するのが好きなので、私は指を抑えます。 これをするだけです アドバイスはかなり貴重です。どこから始めればよいかわからない場合は、アドバイスに従ってください。レベルアップしたら、独自のルールブレイクを行うことができます。

＃1のように 「1つのフォントを使用」 しかし、ヘンリーは非常に経験豊富なデザイナーとして、できます 彼が望んでいることをしてください。

これは一年半ばでしたが、まだステファニー・エックルズだと思います 最高のガイドがあります 現時点で モダンな 流体タイプ。 「流体タイプ」がビューポートユニットを使用することを意味するこの期間がありました（例： vw）、理想的にはa calc()、タイプサイズを設定する（そして時々 line-height）。それから私たちが得たとき、物事は少し良くなりました clamp() コードがもっと簡単になったので（ところで、 これは有益なマインドトリックです）。私たちが持っているので、今はもう一度物事がもう一度変化しています コンテナユニットSと彼らは再びアプローチを変更します。

まるで 1vw 平等です 1% ビューポートの幅の場合もあります 1cqi 等しい 1% コンテナのインラインサイズの。使用します cqi サイズをライティングモードの水平軸に関連付けることを望んでいるため、流体タイポグラフィを定義する目的で。

比較的新しいユニットといえば、CSSの現在のラインの高さ（および「ルート」ラインの高さ）を表すユニットがあります。 lh そして rlh。 PawełGrzybekはそれらの使用方法について書いています 「垂直リズム」のアイデアを達成する：

垂直リズムは、通常、ラインの高さをベースとして使用する要素間の一貫した間隔をたどることにより、調和のとれたレイアウトを作成するのに役立つデザインコンセプトです。印刷されたメディアがまだ何かであったデザインの時代にそれを学びました。

それは、理論的にページをより快適にするのがより快適になる目に見えないアイデアのようなものです。

過去には、これがやってくるのがかなり困難でした。これらのユニットは、古いアイデアをはるかに簡単にする新しいCSSテクノロジーのもう1つの例です。

なぜ タイポグラフィの興味深い。美学があります。タイプを見栄えを良くすることは芸術ですが、それは日常の結果を持つ芸術です。タイポグラフィが悪いと、人々に製品が見掛け倒し、レストランが気にしない、サービスが信頼できないと感じさせることができます。素晴らしいタイプは、人々が単に美学を通して単に別のものよりもあるものを選択させるためのチートコードになることができます。しかし、タイポグラフィの別の側面は読みやすいことです。あなたが人々にテキストを読んでもらいたいなら、そしてあなたがしているなら（そしておそらくそれを読んでいる間、彼らに特定の方法を感じることさえします）、あなたは読みやすさに非常に関心があります。

メアリーC.ダイソンには、これに関するまったく新しい本があります： 読みやすい。メアリーが初期の章で明らかにしているように、それは確かに本に値するトピックです。

タイポグラフィおよびグラフィックデザインの中で、標識が読みやすい（特に遠くから）読みやすいかどうか、小さな印刷を解読できるか（特に人生の後半）、アイコンを簡単に識別または認識できるか（テキストラベルなし）、小説や教科書が読み取り可能なタイプに設定されている場合（読み取りを奨励する）かどうかを検討するかもしれません。これらの質問は、デザインが読みやすいかどうか、またはそれらがどれほど読みやすいかを判断する際に考慮する必要があるのは、テキストまたはシンボルの物理的特性だけではないことを強調しています。読書の目的、読書のコンテキスト、および読者の特性も読みやすさを決定します。

私の心は次のとおりです。明らかに読みやすいフォントを選び、ラインの高さで寛大になり、ラインの長さをあまりにも長くしないで、大きすぎる（大きすぎない）。しかし、それは読みやすさ101のようなものであり、考慮すべきことがたくさんあり、それらの基本にもっと深い深みがあります。

実際に新鮮なフォントを見つけるために実際にどこに行きますか？私はあなたのために完璧な答えがあればいいのにと思いますが、個々のウェブサイトを備えた何百ものフォントファウンドリーがあり、すべてが異なる方法で行うことがあります。私の最善のアドバイスは、あなたが彼らに出会ったときにそれらをブックマークすることであり、フォントを選ぶ時が来たら、ウィンドウショッピングに行くのに十分な時間を作ることです。

ただし、これは確かに保存するものです。なぜなら、私は通常、フォントの支払いを非常に満足させていますが、すべてのプロジェクトがそれを予算内に持っているわけではないので、 無料 必要なものです。 Googleフォントは相変わらず多くの可能性を秘めていますが、フォントのより大きな世界では、あなたが思っているよりも制限されています。ここには本物です： 集団。

Collletttivoは、オープンソースタイプのファウンドリーであり、相互交換とコラボレーションを通じてタイプデザインの実践を促進する人々のネットワークです。

それはすでにかなり素晴らしいものです：すでにすばらしいグループです。

私はあなたがすでにCSSのフォントのためのいくつかの一般的なキーワードがあることを知っているに違いない。 serif そして sans-serif。最近では、ようなキーワードを手に入れました system-ui これは、オペレーティングシステムが主に使用するフォントを選択することになっています（これは素晴らしいです）。その静脈にはもっとあります：

font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;

現在、W3Cで議論があります より一般的なフォントファミリの場合、その多くは非ラチン言語のフォントを中心としています。それは素晴らしいアイデアだと思います。ラチン以外の言語のカスタムフォントを選択し、ロードする際にいくつかの問題があり、必要な言語をサポートしていない次のフォントをリストにすることがどれほど残念であるかを想像してください。

これらの新しいジェネリックフォントの選択肢は実用的な結果をもたらし、ブラウザがランダムなフォントに戻ると読者の問題を引き起こす可能性がある状況で適用します。異なるフォントが、テキストの一部を別のテキストから区別するために従来使用されているため、またはテキストが間違ったフォントで読み取られない可能性があるため（例えば、kashmirの非nastaliq style）。それは単なるプレゼンテーションの好み以上のものです。

可変フォント：まだクールです。

マンディマイケルは完璧なURLで彼女のサイトを復活させました： https://variablefonts.dev/

私は、可変フォントが出てきたときにヒットすると思っていたほど激しくヒットしなかったと言いたいと思います。しかし…私はそれについて間違っているかもしれません。それらはウェブ上で全面的にサポートされています。それらがたくさんあります。デザインツールでの彼らのサポートはかなり良いです。マンディのような良いリソースサイトがたくさんあります。人々は一般的に彼らについて知っており、彼らが良い考えだと思っています。それはかなり良いことです。私はそれらがトンを使用しているのを見ないように感じます。彼らに対する最大のストライキは、彼らがどれほど大きくなるかであり、私はそれが人々を怖がらせると思います。

実際のフォントで終わるのはどうですか： playpen sans！コミックサンズの上品なバージョンのようなものです。どちらももっと読みやすいと思います（コミックサンズはすでに非常に読みやすいので） そして もっと楽しく。私 本当に 各文字に自動的にアクティブになる代替グリフがたくさんあるように、ほとんどのフォントのようなものしか存在しない場合よりも、実際に手書きのように見えます。さらに、それは無料です。

思い出させてください コミックコード （これはコードフォントファミリとして提供しています Codepen）およびのすべてのバリエーション インクウェル 家族。