ベタ組とツメ組。日本語の文字の並べ方を押さえよう｜モリサワ note編集部
みなさんは日本語の文字の並べ方に「ベタ組」「ツメ組」という言葉があることをご存じでしょうか？ 実は日本語の文章は、読み手を意識して読みやすい間隔で文字が並べられています。 今回はそんな日本語の文字の並べ方をご紹介します。 ベタ組とツメ組「ベタ」という言葉の意味は「隙間なく物が並んでいること」だそうです。そういえば印刷用の絵や漫画の黒一色で隙間なく塗った部分を「ベタ」とも言っていますね。他にも「ベタ」は建築業界の⽤語にもあるようです。 まずは日本語組版にもある「ベタ」を説明する前に、文字の設計についてお話しします。 日本語で使われる漢字やひらがな、カタカナは一般的に正方形に収まるように設計されており、この正方形に相当するところを「仮想ボディ」と呼んでいます。そして「仮想ボディ」の中に実際の文字部分である「字面」が収まっています。 仮想ボディと字面。pt? 級? 号? 文字に関する単位の話より
アドビ、初の2軸日本語バリアブルフォント『百千鳥』の開発を発表 | Dig-it [ディグ・イット]
「ThunderVolt」編集長。IT系メディア編集歴12年。USのiPhone発表会に呼ばれる数少ない日本人プレスのひとり。趣味の雑誌ひと筋で編集し続けて30年。バイク、ラジコン飛行機、海水魚とサンゴの飼育、園芸など、作った雑誌は600冊以上。 太さ、文字幅が自由に変えられる初のフォント 手書き文字の看板などがあり、活字や写植があり、そしてデジタルフォントが作られてきた。デジタル化は誰もが簡単に、美しいデザインを作ることを可能にしたが、逆に表現の幅を狭めていた部分もある。 ポスターや看板などが手書きだった時代、そのスペースに合わせて絶妙に職人技で文字を描く人たちがいたが、デジタルのデザインでは、実はこういうことが難しかった。 これまでのデザインアプリでも、文字の幅を変えたり、太さを変えたりはできたが、実は幅を変えると線の幅が縦と、横で不ぞろいになっていた。たとえば、文字自体の横幅を130
![アドビ、初の2軸日本語バリアブルフォント『百千鳥』の開発を発表 | Dig-it [ディグ・イット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee0ca46bb544293c6982b08d2c52c9c777a05b3e/height=288;version=1;width=512/https%3A%2F%2Fdig-it.media%2Fwp-content%2Fuploads%2F2024%2F04%2F2X5A2151.jpeg)
【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" fetchpriority="high" href="{href}" /> <link rel="stylesheet" href="{href}" media="print" onload='
Cloudflare Fonts試してみた
利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。 オリジンの内容を変更したりなどの作業は一切不要。 サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。
朗報！ リニューアルされたGoogle Fontsがかなり使いやすくなってる、フリーフォントとアイコンを探すときに便利
先週、Google Fontsがリニューアルされました！ サイトのデザインは一新され、フォントやアイコンがこれまで以上に簡単に探せ、すぐにダウンロードしたりコードを簡単に利用できます。 新しくなったGoogle Fontsの使い方をざっと一通り紹介します。 Google Fonts 近日リリース予定のChrome 117もデザインが一新されますが、それに先駆けて、Google Fontsは9/7にリニューアルされました。 We're very excited about this: The new Google Fonts, find what you’re looking forhttps://t.co/agnALPyt9g — Google Fonts (@googlefonts) September 7, 2023 Google Fontsはこの10年間で、1,000以上の言語で1,
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
2024年用、日本語のフリーフォント699種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人でも商用でも無料利用できる、日本語のフリーフォント707種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ 前年の647からフリーフォントが50種類くらい増えています！ ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2024/6/4: フォントを10種類追加 2024/2/20: フォントを11種類追加 2023/12/26: フ
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
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
朗報！ Google Fontsにかわいい日本語フォントが大量に追加されました -2023年5月
あおぼし -GitHub Aoboshi One -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Copperplate Gothicのような文字の太さが均一でセリフのある和文書体を目指してつくられたかなフォント。ひらがな・カタカナ・英数記号文字・ラテン文字が収録されています。 フリーフォントのダウンロードはページ上部の「Download Family」から、またはGitHubの「Code- Download Zip」から。 つきみ丸ゴかな -GitHub Tsukimi Rounded -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 東京築地活版製造所の3号かなの骨格にインスパイアされたかなフォント。筆の動きを残した丸ゴシックで、縦組みにぴったりです。ひらがな・カタカナ・一部の記号文字が収録されています。 フ
Other things to be careful of
A static site to link people to when their code is displaying Japanese wrong. View the Project on GitHub heistak/your-code-displays-japanese-wrong Other things to be careful of Line breaking rules Line breaking, or word-wrapping, in Japanese contain a few new rules as well. Web browsers and TextMesh Pro both have correct JP line breaking rules built in, but if you are rolling your own text display
Your code displays Japanese wrong
A static site to link people to when their code is displaying Japanese wrong. View the Project on GitHub heistak/your-code-displays-japanese-wrong Why am I here? If someone gave you a link to this page, that person probably thinks your code displays Japanese wrong. In short, from a native Japanese eye, yѳur ҭєxҭ lѳѳκs κιnd ѳf lικє ҭЋιs. This page will give you a brief description of the glyph appe
Webフォントを使用する時に知っておきたいこと｜にしはら
WebデザインにWebフォントを使用する際に知っておきたい前提や技術的な課題などについてです。Webフォントにあまり詳しくない人向けです。 Webフォントの仕組みWebフォントはデバイスにインストールされていないフォントでも表示できるようにする技術です。基本的な仕組みは、サーバーに設置されたフォントファイルをダウンロードし、それをブラウザ上で利用することでフォントを表示しています。 この仕組みをふまえて、Webフォントの特徴を解説していきます。 日本語Webフォントはファイルサイズが大きい 欧文に比べ日本語は文字数（グリフ）が多いです。JIS第1水準漢字と呼ばれる、日常的によく使う漢字だけでも約3000字、そのほか、かなや数字、記号などを含めて約3500字くらいが一般的なWebサイトの表示に必要な字数になります。 欧文フォントが数百キロバイト単位に対し、数メガバイト単位になります。これは1
2023年4月、Adobe Fontsのラインナップが大幅拡充しました
2023年4月、Adobe Fontsのラインナップが大幅拡充しました 文字に豊かな表現力を与えるフォントは、クリエイティブには欠かせない道具のひとつです。 Adobe Fontsに新しいパートナーとフォントラインナップが追加されましたのでご紹介します。 SCREENグラフィックソリューションズがAdobe Fontsパートナーに加わりました Adobe FontsにSCREENグラフィックソリューションズという強力なパートナーが加わりました。会社を知っている方も多いのでは無いでしょうか？主に、印刷業界向けのデジタル印刷機、CTP装置、ソフトウエア、サービスを提供し、グラフィックアーツ機器事業を展開されております。クリエイティブがアナログからデジタルへ移行する黎明期から、印刷業界のデジタル化へと業界を支えている会社の一つです。 ヒラギノフォント4書体が追加 そんなSCREENグラフィックソ
“奇跡のフォント”で小学生の正答率に差 開発者が語る「UDデジタル教科書体」の驚くべき効果とは（全文） | デイリー新潮
ロービジョン（弱視）や学習障害のひとつであるディスレクシア（読み書き障害）の人でも読みやすい「UDフォント」をご存じだろうか。UDとはユニバーサルデザイン（Universal Design）の略で、障害がある人に優しいだけではなく、そうでない人にも読む速さの向上や疲労感の軽減の効果が期待できる書体である。『奇跡のフォント 教科書が読めない子どもを知って－UDデジタル教科書体 開発物語』（時事通信社）を3月23日に上梓した書体デザイナーの高田裕美さんに話を聞いた。 【比較画像】一般的な明朝体と「BIZ UD明朝体」の読みやすさの違いを体験する 新たなフォントが続々開発 日々目にするさまざまな文章だが、そのフォント（書体デザイン）が何なのかを意識している人は少ないかもしれない。例えば、Yahoo!ニュースでは、デフォルトの設定でメイリオという書体が使われている。 「明朝体やゴシック体だけで、そ
サブセットフォントを作成する方法
最初はサブセットフォントメーカーと WOFF コンバーターを使ってサブセットフォントを作成しました。どちらもソフトをインストールして、元のフォントファイルをドラッグすれば良いだけだったので楽勝〜と思ってたんだけど、諸々のフォント情報も削除してしまうために縦書き表示が一部おかしくなってしまうということがわかったので、python を使ってコマンドラインから作成することにしました。 基本的には下記の記事の通りなんだけども、僕の環境ではそのままなぞっただけだとちゃんと動かなかったのでメモ。 Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る – Qiitaはじめに2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。さっそくサイトでも使いたいとこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloudflare Fonts試してみた🔤
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
「BIZ UD」フォントが「Google Fonts」へ ～モリサワのユニバーサルフォント／ライセンスは「SIL Open Font License 1.1」。すでにカスタムフォントも
Google Fontsに新しい日本語フォントが追加されました！ 和のデザインにぴったりなかわいいフォント -だるまどろっぷ
