OSやブラウザで違うFontのVertical Metricsの悩み | ツクメモ - ウェブやアプリをツクるヒトのメモ
夏になると、しっかり調整したはずのサイトのコーディングで「ずれています」と連発して言われたことを思い出すもりさんです……。 Google Fontsにも日本語フォントがいくつか使えるようになり、ますますサイト制作しやすくなりました。 Google Fonts イントロダクション 夏のある時期、Google Fontsを利用したある案件を受けました。 さらに欧文や数字だけだったので、問題ないと考えてしました。 しかし…、何度調整しても「ずれている」と言われつづけることになったのです。 ずれる問題 問題は、文字の垂直の空きが違うことでした。 普通に使う分には、ほとんど分からないので問題ありません。 罫線で囲うなどを行うと、OSなどによってFontの垂直の値の違うが明確に出てしまうようです。 問題の表示を確認 Google Fontsで、Orbitronを利用したときにこんな感じになりました。
Online @font-face generator
TTF, OTF, WOFF, WOFF2 or SVG, 15 MB per file. Multiupload and drag-and-drop are supported. The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. Usage: click the Add font(s) button, selec
Capsize
{ familyName: "Roboto", fullName: "Roboto", postscriptName: "Roboto-Regular", category: "sans-serif", capHeight: 1456, ascent: 1900, descent: -500, lineGap: 0, unitsPerEm: 2048, xHeight: 1082, xWidthAvg: 911, subsets: { latin: { xWidthAvg: 911 }, thai: { xWidthAvg: 908 } } } Lorem ipsum Lolor sit amet, Lonsectetur adipiscing elit. Duis eu ornare nisi, sed feugiat metus. Pellentesque rutrum vel met
Morisawa Fonts
Morisawa Fontsは、高品質でバラエティ豊かな2,000書体以上のフォントを提供する、モリサワの新しいサブスクリプションサービスです。
モリサワ フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 | ニュース&プレスリリース | 企業情報
モリサワ フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 株式会社モリサワ（代表取締役社長：森澤彰彦 本社：大阪市浪速区敷津東2-6-25 Tel:06-6649-2151 代表、以下モリサワ）は、フォントサブスクリプションサービス「Morisawa Fonts」において、新たにWebフォントを2024年9月12日（木）に提供開始することを発表します。 この度のWebフォントの提供開始により、Morisawa Fontsは、共通のMorisawa IDでデスクトップフォントとWebフォントを購入・利用が可能となるプラットフォームへと進化します。今後、多様な媒体にまたがるデザインプロジェクトに、最適なサービスや機能を提供してまいります。 提供開始予定のWebフォントは、特定のフォントのスタイルを事前に登録して、必要なフォン
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
朗報！ Google Fontsにかわいい日本語フォントが大量に追加されました -2023年5月
あおぼし -GitHub Aoboshi One -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Copperplate Gothicのような文字の太さが均一でセリフのある和文書体を目指してつくられたかなフォント。ひらがな・カタカナ・英数記号文字・ラテン文字が収録されています。 フリーフォントのダウンロードはページ上部の「Download Family」から、またはGitHubの「Code- Download Zip」から。 つきみ丸ゴかな -GitHub Tsukimi Rounded -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 東京築地活版製造所の3号かなの骨格にインスパイアされたかなフォント。筆の動きを残した丸ゴシックで、縦組みにぴったりです。ひらがな・カタカナ・一部の記号文字が収録されています。 フ
Webアイコンフォントはどれを使うとよいか at softelメモ
問題 検索の虫眼鏡マークや、ログイン、ログアウトにカギのマークを表示したりしたいです。 Webアイコンフォントを使うとよさそうですが、たくさんありますね。 どれがよいでしょうか。 答え 方式 以下のように方式が様々。 Webフォント ↔ SVGCSSのみ ↔ JavaScriptが必要なものクラス指定 ↔ 合字（legature） Font Awesome のJS版は、「SVG、要JavaScript、クラス指定」 Font Awesome のCSS版は、「Webフォント、CSSのみ、クラス指定」 Material Icons は、「Webフォント、CSSのみ、合字（legature）」 軽量さ SVG＋JSのほうが軽いのかな？と思っていましたが、よく見てみると違いました。 SVGでアイコンを描こうとするとそこそこの容量になるようで、Webフォントのwoffファイル1個などのほうが数十KB
簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS
Googleフォントを使うと犯罪になる - Qiita
<link href="https://fonts.googleapis.com">って書くと罰金取られます。 以下はGerman Court Rules Websites Embedding Google Fonts Violates GDPRというニュースの紹介です。 German Court Rules Websites Embedding Google Fonts Violates GDPR ドイツのミュンヘン地方裁判所は、あるWebサイトの運営者が、ユーザの個人情報を本人の同意なしにフォントライブラリを経由してGoogleに提供したとして、100ユーロの賠償を命じました。 Webサイトが原告のIPアドレスをGoogleに無断で提供したことは、ユーザのプライバシー権の侵害に当たると判断しました。 さらに、Webサイトの運営者は収集した情報をその他のデータと突き合わせることで『IPア
コーヒー屋を開業するにあたって作った書体の話｜Koji Kimura
デザインスタジオであるSTARRYWORKS inc.は、昨年秋からロースター・カフェを開業しました。そのお店の名前に合わせて「Hue」という欧文書体を開発することになった、そのプロセスや開発の裏側を紹介したいと思います。 1. お店のコンセプトは「色で選ぶコーヒー」お店の名前は「Hue Coffee Roaster」といいます。「Hue」（ヒュー）は色相や色味という意味の英語で、コーヒーのメニュー名を産地や豆の品種、焙煎度合などではなく、「色」の名前で表現することでより気軽にさまざまなコーヒーを楽しんでいただくことをコンセプトとしています。 お店のInstagram 私はコーヒーが好きで毎日飲みますが、豆の品種や産地などは詳しくなく覚えられずにいました。以前注文したものが美味しかったからまた飲みたいと思ったり、前回とは違うものに挑戦してみたいと思っても、ややこしい地名などで覚えられず、う
unicode-range - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
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という
Futura Nowとオプティカルサイズについて｜hide
反省しなきゃいけないんだけど、ちょっと小金が入ったとはいえ、また前にもしたような迂愚な行いで、発売記念バーゲンセール75％OFFのFutura Nowをついつい衝動買い……Monotype使い放題を契約しているのでこれに関していえば本当に無駄遣い。まぁ、なんというか何やってんだろう……少し計画的に収入支出を考えないと、お金なんて出ていくばっかりなんだから……ホント、ちゃんとしないと……イヤ、なんか、それ以前に酔ってるときは気をつけないと……さて、まぁ、そんな感じなので今回は脳内の予定を変更して急拠Futuraの話をしよう。ところで国語審議会と新聞なんかの所為で急拠って書いてしまっているけど言葉の意味からいっても本来これは大間違いで急遽って書かないといけないんだけれど……その話は……まぁどうでもいいか。 さて、とは言ってもPaul Rennerによって設計され1927年にリリースされたこのジ
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fontshare: Quality Fonts. Free.
Icons - Material Design
