日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開／「Ricty」でもお馴染みの「Inconsolata」と読みやすい「BIZ UDゴシック」をかけ合わせ
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
みなさんは日本語の文字の並べ方に「ベタ組」「ツメ組」という言葉があることをご存じでしょうか？ 実は日本語の文章は、読み手を意識して読みやすい間隔で文字が並べられています。 今回はそんな日本語の文字の並べ方をご紹介します。 ベタ組とツメ組「ベタ」という言葉の意味は「隙間なく物が並んでいること」だそうです。そういえば印刷用の絵や漫画の黒一色で隙間なく塗った部分を「ベタ」とも言っていますね。他にも「ベタ」は建築業界の⽤語にもあるようです。 まずは日本語組版にもある「ベタ」を説明する前に、文字の設計についてお話しします。 日本語で使われる漢字やひらがな、カタカナは一般的に正方形に収まるように設計されており、この正方形に相当するところを「仮想ボディ」と呼んでいます。そして「仮想ボディ」の中に実際の文字部分である「字面」が収まっています。 仮想ボディと字面。pt? 級? 号? 文字に関する単位の話より
line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカス「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】 「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】 2024年6月12日 プログラミングフォント制作者 たわら プログラミングフォント制作者。コーディングに適した欧文・英数字フォントと、日本語フォントを合成し、新たなフォントを生み出す手法に定評がある。2019年5月に「白源（HackGen）」を公開したのを皮切りに、毎年のペースで合成フォントを手がけている。本業ではインフラエンジニアやWebプログラマなどを経て、現在ではSaaS企業にてSREを担う。自身の息子に「プログラミングを教えて」と頼まれた時、まずはプログラミングフォントの重要性を説いた。 X GitHu
絵文字は英語でも「emoji」と呼ばれている通り、日本発祥の文化という説が有力です。新たに1988年に生産された日本の電子手帳から「最初期の絵文字」が発見されました。 Emoji history: the missing years ⌘I Get Info https://blog.gingerbeardman.com/2024/05/10/emoji-history-the-missing-years/ New Earliest Emoji Sets From 1988 & 1990 Uncovered https://blog.emojipedia.org/new-earliest-emoji-sets-from-1988-and-1990-uncovered/ 絵文字文化の起源には多様な説があり、中でも「1999年のNTTドコモによるiモード開発が切っ掛けで誕生した」という説が広
これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
「ピグモ00」「マメロン」「廻想体」「金畫字」など、人気が高いフリーフォントをたくさんリリースされているもじワク研究さんから、新作のフリーフォントがリリースされました！ 今回は、ゴシック調のデザインで、ヴィンテージ感もあ...記事の続きを読む
GitHub - yuru7/bizin-gothic: Bizin Gothic は、ユニバーサルデザインフォントの BIZ UDゴシック と英文フォント Inconsolata を合成したプログラミング向けフォントです。
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
視覚障害を持つ人々はブラウザの拡大機能やカスタムCSSを使用して文字を大きくしてウェブサイトにアクセスすることがありますが、サイト側の対応が不適切だとレイアウトが崩れてしまいます。レイアウトを維持したまま文字のサイズ変更に対応する方法が、Airbnbの企業ブログで解説されています。 Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 視力が著しく低下してしまった人がAirbnbのページを見た時のイメージはこん
米Googleは5月15日（現地時間）、次期Android OS「Android 15」の「beta 2」をリリースしたと発表した。その中で、中国語、日本語、韓国語の表示で使用しているフォント「NotoSansCJK」がバリアブルフォントになるという。 新たに搭載するフォントは「CJK Variable Font」と呼ばれ、Googleは「日中韓言語におけるクリエイティブなタイポグラフィの新たな可能性を開き、デザイナーはより幅広いスタイルを模索し、以前は困難または不可能であった視覚的に印象的なレイアウトを作成できる」と説明している。 また、変体仮名のフォントファイルがデフォルトで組み込まれる。Googleは2月に、ChromeOSやAndroidでの日本語環境改善の一環として「Noto Serif 変体仮名」をリリースしており、アートワークやデザインだけでなく、古文書の正確な伝達と理解の維
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
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
まいどおなじみTenです。つい先日まで自治会の会長さんというやつをやっていたのですけど、ドキュメントの整備や広報の配布作業とかで手を取られてあっぷあっぷでした。ドキュメント整備からも開放されたのでそろそろエクステンション作りたいなって思っています。まずはIllustrator向けのカラーフォントエディタを作りたいと思います。 まあ、それはおいておいて、先日はAcrobatのPDF内部構造の参照機能を見ていただいたんですけど、Acrobatさんには他にも面白い機能がありますので、今回はそちらをご紹介する次第です。 まず、例によってPDFの内部構造を覗き見してみます。 このようにフォントが埋め込まれていて色々と情報が見えるのがおわかりいただけるかと思います。ここで見えているCFFというのはCompact Font Formatの略称で、Postscript系フォントの中核をになうテーブルとなり
List of Emoji
Emojis are small picture-like symbols that can add context and emotion to written text. They are about the same size as a letter that can be typed, but unlike alphanumeric characters, they are usually depicted in color, and their meaning is often open to interpretation. The word emoji comes from combining the Japanese words for picture and character. The first emoji characters, introduced in the 9
1 鳥肌の立った「愛」（ヒラギノ明朝体・W6）。 | 書体をつくるひと。書体デザイナー・鳥海修さんの仕事 | 鳥海修 | ほぼ日刊イトイ新聞
なにかを突き詰めてきた方のお話って、 やっぱり面白いんです。 本、雑誌、ポスター、ウェブサイト、各種表示など、 我々が日常的に目にするさまざまな文字を 長年にわたりデザインされてきた、 書体設計士の鳥海修（とりのうみ・おさむ）さんに、 文字をつくる仕事について教えていただきました。 スティーブ・ジョブズが 「Cool!」と言ったというヒラギノ明朝体、 iPhoneの表示に使われているヒラギノゴシック体、 鳥海さんが所属する「字游工房」の フラッグシップ書体である游明朝体や游ゴシック体など、 新しい書体はどのように生まれるのだろう？ 一書体につき約14500文字ある漢字は、どうつくる？ 明朝体の魅力や、つくり終えたときの気持ちは？ 貴重な制作過程の映像も、登場しますよ。 ＞鳥海修さんプロフィール 1955年山形県生まれ。 多摩美術大学を卒業後、 1979年に写研に入社し、 書体デザイナーの道
先日の「サマサン・ドノクン」に続いて、「ピグモ00」「マメロン」「廻想体」「金畫字」など、人気が高いフリーフォントをたくさんリリースされているもじワク研究さんから、さらに新作のフリーフォントがリリースされました！ 今回の「ポプらむ☆キウイ」はJIS第1水準漢字＋αが揃ったかわいい極太フリーフォントで、オープンソースで利用できます。 ポプらむ☆キウイ ではさっそく、フォントのダウンロード方法を。 下記ページにアクセスし、ページ下部「キウイ皮ごと囓る」の下「Download」をクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。 ポプらむ☆キウイ ライセンスはSIL Open Font Licenseで、個人でも商用でも無料で利用できます。詳しくは、ダウンロードファイル「仕様説明.txt」をご覧ください。 ダウンロードできるフォントのフォーマットは、下記の通り。 .otf
日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開（窓の杜） - Yahoo!ニュース
「BIZ UDゴシック」と「Inconsolata」をかけ合わせた日本人プログラマー向けのコーディングフォント「Bizin Gothic」（ビジン ゴシック）が5月28日、試験的にリリースされた。現在、「GitHub」のリリースページから無償でダウンロード可能。 プログラミング言語を記述する際の可読性とデザイン性を重視したコーディングフォントはプログラマーにとって必需品ともいえるものだが、その多くは欧文フォントであり、かならずしも日本語コメントとの調和がとれているとはいいがたい。 そこで、欧文コーディングフォントと日本語フォントを組み合わせた日本人プログラマー向けのコーディングフォントというべきものがいくつか制作されているが、今回リリースされた「Bizin Gothic」もその1つだ。制作者は、「白源」や「UDEV Gothic」、「Moralerspace」などですでに実績のあるたわら氏
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブサイト制作では、游ゴシックはおすすめしない理由
「慶応」も「コンクリート」も漢字1文字で ～Unicode標準に新しいブロックが提案中／手書きでしばしば用いられる「部首＋カナ」スタイルの略式漢字【やじうまの杜】
ベタ組とツメ組。日本語の文字の並べ方を押さえよう｜モリサワ note編集部
最初期の絵文字セットが1988年のシャープ製電子手帳から発見される
商用利用無料！ ゴシック調の新作日本語フリーフォントが登場、一つひとつの文字がかわいい「サマサン・ドノクン」
おっさんが使いがちなネコの絵文字、どの環境でもかわいいとは限らないんだぞ／「はてな匿名ダイアリー」の注意喚起記事がちょっと話題に【やじうまの杜】
ブラウザ側で文字サイズを変更してもレイアウトが崩れないようにするための方法をAirbnbのエンジニアが解説
Android 15、日本語のバリアブルフォントを採用へ 変体仮名にも対応 「beta 2」リリース
https://www.unicode.org/L2/L2024/24125-cjk-abbrev-block.pdf
AcrobatProで埋め込まれたフォントの構造を確認する – Automation Skill
商用利用無料！ 極太フォントでかわいい、漢字も揃っているキウイ皮ごと囓るのフリーフォント「ポプらむ☆キウイ」