日本人開発者向けの最適解？ GitHubフォント＋IBM日本語フォント＝「Moralerspace」【4月1日追記】／「Monaspace」と「IBM Plex Sans JP」をかけ合わせ、5スタイル×6つの全半角調整【レビュー】
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
clamp(下限, デザインファイル上のサイズ / アートボードの横幅 * 100vw, 上限); 例） 横幅375pxのアートボード上で30pxの文字 font-size: clamp(24px, 30 / 375 * 100vw, 30px) 例） 横幅1440pxのアートボード上で650pxの画像 width: clamp(0px, 650 / 1440 * 100vw, 650px) clampという見慣れない関数を使っています。後ほど詳しく説明します。 デモ このデモでは文字と画像部分に上記のサイズ調整を施しています。 解説 上記の計算式でやろうとしているのは、どの画面幅になっても比率を維持することです。比率が維持できているのなら画面幅が大きかろうが小さかろうが絶対に崩れません。 そこで比率が維持される計算式を考えます。画面幅に対してどのくらいか、が計算できれば良いですね。 よっ
日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
Iosevkaというフォントが良い
突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字
CLOG
現在 M+ FONTS は Google の支援をいただき、Glyphs を使用してデザイン修正の作業をおこない、GitHub にてその成果物を公開しています。しかし自分がここまで M+ FONTS の制作を続けることができたのは、開発当初の、多くのプログラマーの方によるご協力があったからです。自分のデザインした文字がオリジナルのスクリプトによってフォントファイルにまとめられ、コンピューター画面に表示されるさまは、まるで魔法をみているかのような素晴らしい経験でした。 また 1988 年にはじめての Macintosh を購入してからフリーソフトウェアの文化に感動し、いわゆる Unix 系の OS を使い始めてからも、さらに多くのフリーソフトウェアの恩恵にあずかりました。M+ FONTS では当初から、少しでもプログラマーの方々のお役に立つことができればと固定幅フォントを用意していましたが、
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
Google Fontsは使用する文字を絞り込んでダウンロードできる
結論 Google Fonts APIはGETパラメータに text=文字 を指定すると使用する文字を絞り込めます。 詳細はドキュメントにあります。ドキュメントをお読みください。 Google Fonts とは Webフォントを使用する際、第一選択に上がるのがGoogle Fontsです。 WebページでNoto Sans JPを使いたい場合、以下のようにlinkタグを追加してCSSでfont-familyを指定すれば、どのような環境でもNoto Sans JPで文字を表示させられます。 <!-- 太さ400のNoto Sans JPフォントを読み込む --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet" /> <style>
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
【CSS/Javascript】手書き風の文字を錬成して時代錯誤に立ち向かえ - Qiita
TL;DR 手書き文化は滅べ それっぽく対抗してみた 実運用は自己責任で… intro わし「ES提出したるで～、OpenES(※)でいくらでも出したるわ」 企業「手書きね＾＾」 わし「」 こういう非効率の塊みたいな企業が死滅することを祈りながら、技術的に解決することを試みる。 ※OpenES: Web上で書いてそのまま提出できるES。ガクチカ(学生時代に力を入れていたこと)という9割の人間はろくに書けない質問などを提供してくれる 目標 ぱっとみ手書きっぽくないようなフォントの組み合わせとかを錬成。 使用フォント ダーツフォント http://www.p-darts.jp/font/dartsfont/ ボールペンで書いたような細いフォント(公式ページより) 見てもらうとわかるが、字が綺麗 font-weight: boldじゃないとめっちゃ細い Kalam https://fonts.g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zen Kurenaido - Google Fonts
プログラミング向けフォントの新しい選択肢「0xProto」／トレンドを押さえつつも、可読性とデザインに独自の工夫。控えめな合字活用もちょうどいい【レビュー】
Roboto Condensed - Google Fonts
フォントワークス、8書体を“Google Fonts”で無償提供 ～GitHubにも公開／ライセンスはSIL Open Font License 1.1で商用可。改変やアプリへの組み込みもOK
文字リアクション
Twemoji
Microsoft、ターミナル・コードエディター向けの新フォント「Cascadia Code」を発表／合字を活用。「Windows Terminal」のコードネームを引き継いだフリー＆オープンソースフォント
GitHub - ookamiinc/kinto: 均等 — Kinto is a Japanese font family adapted to match size & balance with Latin characters in user interfaces. A project based off Google Noto fonts.
