普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
Writing a TrueType font renderer
This post was discussed further on Hacker News. 09 Jan, 2024: There was an issue with newsletter signups. If you tried to sign up, please try again! You should see a success message. Text is the medium of digital interaction, and text rendering has an outsized impact on the overall fit and finish of any system. It therefore pains me that axle has for years relied on a low-resolution 8x8 bitmap fon
商用でも完全に無料！ 読みやすくシンプルにデザインされた、美しいサンセリフフォント、コーディング向けフォントも揃ってます -Geist Font
見出しやロゴ用に読みやすくシンプルにデザインされたGeist Sans、エディタなどのコード表示用にデザインされたGeist Monoがセットになった新しいフォントファミリ「Geist」を紹介します。 フォントはオープンソース化されており、商用でも無料で利用できます。また、ThinからUltra Blackまで9つのウェイトが揃っているのも嬉しいですね。 Geist Font Geist Font -GitHub Geist Fontの特徴 Geist Fontのダウンロード Geist Fontの使用例 Geist Fontの特徴 Geistは、VercelがBesement Studioとコラボレーションして作成された新しいフォントファミリです。フォントファミリには、2種類のフォントがあります。 Geist Sans Geist Mono フォントのライセンスはSIL OPEN FON
Cloudflare Fonts: enhancing website font privacy and speed
Cloudflare Fonts: enhancing website font privacy and speed09/25/2023 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance
GitHub - Gutenberg-Labo/GL-NovantiquaMinamoto: GL-ノバンチカ源 / Japanese font for manga dialogue.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Classic Console Neue TrueType Font - ASCII 8x16 Reproduction - DeeJayy
Classic Console Neue (aka. Classic Console v2) TrueType Font (ttf) Original 8x16 ASCII Console Fixed Width Font including many code pages (latin, cyrillic, greek, hebrew, braille, armenian, georgian, ethiopic, turkish, etc) (retro old console terminal vga bios ms dos font). Currently counting 4100 glyphs. Useful as command line font, FAR Manager, Putty, VS Code font, IntelliJ, WebStorm/PHPStorm, o
Dear every human on earth that’s ever typed text, For 15 years, our beloved Calibri was Microsoft’s default font and crown keeper of office communications, but as you know, our relationship has come to a natural end. We changed. The technology we use every day has changed. And so, our search of the perfect font for higher resolution screens began. The font needed to have sharpness, uniformity, and
Geist Font – Vercel
At Vercel, we've developed Geist, a typeface specifically designed for developers and designers. We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities. Geist embodies our design principles of simplicity, minimalism
https://font-da.hatenablog.jp/entry/2023/12/30/103256 みんなブコメで何言ってたの
Font College Open Campus 12 日本語デザインを変えた技術 発明100年に1から知りたい写植の話
写植という言葉をご存知でしょうか。 写植とは写真植字の略で、写真の原理を使って文字を印画紙やフィルム上に焼き付け、文字組みをする技術です。 日本語の写植を可能にする邦文写真植字機は、1924年にモリサワの創業者と株式会社写研の創業者によって発明されました。写真植字はその後次第に広まると1960年代から90年代に最盛期を迎え、DTPが一般化するまでの間、文字組みに広く用いられました。その影響は現在までおよび、デザインに関わる方もそうでない方も、知らず知らずのうちに写植のもたらしたものに触れてきています。 2024年で邦文写真植字機の発明から100周年を迎えるにあたり、Font College Open Campus 特別編として、写真植字とグラフィックデザインのこれまでを振り返ります。講師に、近著『杉浦康平と写植の時代 光学技術と日本語のデザイン』で数々の賞を受賞しているメディア論研究者・阿
Geist Font – Vercel
At Vercel, we've developed Geist, a typeface specifically designed for developers and designers. We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities. Geist embodies our design principles of simplicity, minimalism
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
無料で作れちゃう！ シヤチハタ、Webブラウザー上で筆文字入りのサムネイル画像を生成できる新サービス【TGS2023】／「J-Fontサムネメーカー」が正式リリース。完全新作フォント「相撲文字」も披露
A change of typeface: Microsoft’s new default font has arrived
font-da「永井均の発言について」がブコメ非表示なので教えて