ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは!せきゆおう です。 游ゴシックは好きですか?僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では?」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
みなさんは日本語の文字の並べ方に「ベタ組」「ツメ組」という言葉があることをご存じでしょうか? 実は日本語の文章は、読み手を意識して読みやすい間隔で文字が並べられています。 今回はそんな日本語の文字の並べ方をご紹介します。 ベタ組とツメ組「ベタ」という言葉の意味は「隙間なく物が並んでいること」だそうです。そういえば印刷用の絵や漫画の黒一色で隙間なく塗った部分を「ベタ」とも言っていますね。他にも「ベタ」は建築業界の⽤語にもあるようです。 まずは日本語組版にもある「ベタ」を説明する前に、文字の設計についてお話しします。 日本語で使われる漢字やひらがな、カタカナは一般的に正方形に収まるように設計されており、この正方形に相当するところを「仮想ボディ」と呼んでいます。そして「仮想ボディ」の中に実際の文字部分である「字面」が収まっています。 仮想ボディと字面。pt? 級? 号? 文字に関する単位の話より
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デザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
絵文字は英語でも「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モード開発が切っ掛けで誕生した」という説が広
パワーポイント用デザイン・テンプレートの2024年版を公開しました。今回の変更点としては、ワイド画面(16:9)のスライドがより使いやすくなるようルールを拡張し、併せて新しいデザインパーツの収録、そのほか細かなフォントサイズや余白の調性といった微調整を行っています。とはいえ、前回(2022年3月版)と比べてテンプレートのつくりに大きな変更はないため、今までと同じ感覚で利用いただけると思います。まずはダウンロードしてお試しください! 当サイトの「デザイン・テンプレート」とは 当サイトのテンプレートを初めて利用する方向けに。プレゼンデザインでは、パワーポイント用のデザイン・テンプレートを2012年のサイト開設後間もない頃から無償公開し続けています。 一般的なデザイン・テンプレートとは少し毛色が異なり、デザイン済みスライドの提供に加えて、スライドサイズや色の選び方、フォント、余白の取り方など、プ
視覚障害を持つ人々はブラウザの拡大機能やカスタム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 変体仮名」をリリースしており、アートワークやデザインだけでなく、古文書の正確な伝達と理解の維
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 (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系フォントの中核をになうテーブルとなり
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
なにかを突き詰めてきた方のお話って、 やっぱり面白いんです。 本、雑誌、ポスター、ウェブサイト、各種表示など、 我々が日常的に目にするさまざまな文字を 長年にわたりデザインされてきた、 書体設計士の鳥海修(とりのうみ・おさむ)さんに、 文字をつくる仕事について教えていただきました。 スティーブ・ジョブズが 「Cool!」と言ったというヒラギノ明朝体、 iPhoneの表示に使われているヒラギノゴシック体、 鳥海さんが所属する「字游工房」の フラッグシップ書体である游明朝体や游ゴシック体など、 新しい書体はどのように生まれるのだろう? 一書体につき約14500文字ある漢字は、どうつくる? 明朝体の魅力や、つくり終えたときの気持ちは? 貴重な制作過程の映像も、登場しますよ。 >鳥海修さんプロフィール 1955年山形県生まれ。 多摩美術大学を卒業後、 1979年に写研に入社し、 書体デザイナーの道
「BIZ UDゴシック」と「Inconsolata」をかけ合わせた日本人プログラマー向けのコーディングフォント「Bizin Gothic」(ビジン ゴシック)が5月28日、試験的にリリースされた。現在、「GitHub」のリリースページから無償でダウンロード可能。 プログラミング言語を記述する際の可読性とデザイン性を重視したコーディングフォントはプログラマーにとって必需品ともいえるものだが、その多くは欧文フォントであり、かならずしも日本語コメントとの調和がとれているとはいいがたい。 そこで、欧文コーディングフォントと日本語フォントを組み合わせた日本人プログラマー向けのコーディングフォントというべきものがいくつか制作されているが、今回リリースされた「Bizin Gothic」もその1つだ。制作者は、「白源」や「UDEV Gothic」、「Moralerspace」などですでに実績のあるたわら氏
なにかを突き詰めてきた方のお話って、 やっぱり面白いんです。 本、雑誌、ポスター、ウェブサイト、各種表示など、 我々が日常的に目にするさまざまな文字を 長年にわたりデザインされてきた、 書体設計士の鳥海修(とりのうみ・おさむ)さんに、 文字をつくる仕事について教えていただきました。 スティーブ・ジョブズが 「Cool!」と言ったというヒラギノ明朝体、 iPhoneの表示に使われているヒラギノゴシック体、 鳥海さんが所属する「字游工房」の フラッグシップ書体である游明朝体や游ゴシック体など、 新しい書体はどのように生まれるのだろう? 一書体につき約14500文字ある漢字は、どうつくる? 明朝体の魅力や、つくり終えたときの気持ちは? 貴重な制作過程の映像も、登場しますよ。 >鳥海修さんプロフィール 1955年山形県生まれ。 多摩美術大学を卒業後、 1979年に写研に入社し、 書体デザイナーの道
AppleがmacOS 15 SequoiaやiOS 18で追加される800以上の新しいシンボルをサポートした「SF Symbols 6」のBeta版をリリースしています。詳細は以下から。 Appleは現地時間2024年06月10日、世界開発者会議(WWDC24)を開催し、今年の秋にもリリースを予定している「macOS 15 Sequoia」や「iOS/iPadOS 18」、「visionOS 2」などを発表しましたが、同時に、SFフォントから派生したベクターシンボル「SF Symbols」の最新バージョンとなる「SF Symbols v6.0」のBeta版をリリースしています。 SF Symbols 6 brings new and enhanced animations, updated annotation tools, and over 800 new symbols. SF Sy
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは!せきゆおう です。 游ゴシックは好きですか?僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では?」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
「その時、突然草むらからたくさんの蝶が飛んでくる様子を見たんです。それがとても心にしみました。家に帰ると直ぐに『この島で文章を紡ぐ詩人のために詩に相応しい字を作りたい』とFacebookに書き込んでいました」 『島の物語を紡ぐ者たち』は、Flaneur Culture LabとFisfisa Mediaが共同プロデュースした、台湾の文学の巨匠たちの生涯と文学の成果がテーマのドキュメンタリー映画です。2024年5月現在、3つのシリーズが公開され、通算18作品(20名)の文学者にまつわる映画が発表されています。また2012年には6名の文学者を取り上げたシリーズ1作目の完全保存版DVDもリリースされ、同年度の台北国際ブックフェアで販売されました。書体デザイナーのOliveはこの時、Flaneur Culture Labの出展ブースに入り、ガラスのショーケースに展示された周夢蝶の小楷で書かれた手稿
なにかを突き詰めてきた方のお話って、 やっぱり面白いんです。 本、雑誌、ポスター、ウェブサイト、各種表示など、 我々が日常的に目にするさまざまな文字を 長年にわたりデザインされてきた、 書体設計士の鳥海修(とりのうみ・おさむ)さんに、 文字をつくる仕事について教えていただきました。 スティーブ・ジョブズが 「Cool!」と言ったというヒラギノ明朝体、 iPhoneの表示に使われているヒラギノゴシック体、 鳥海さんが所属する「字游工房」の フラッグシップ書体である游明朝体や游ゴシック体など、 新しい書体はどのように生まれるのだろう? 一書体につき約14500文字ある漢字は、どうつくる? 明朝体の魅力や、つくり終えたときの気持ちは? 貴重な制作過程の映像も、登場しますよ。 >鳥海修さんプロフィール 1955年山形県生まれ。 多摩美術大学を卒業後、 1979年に写研に入社し、 書体デザイナーの道
アナログ風・手書き風のクリエイティブデザインには、《親しみのある雰囲気を演出できる》《デジタルが主流の中で目立ちやすい》など、消費者に響きやすいメリットがあります。そのためBtoCの企業を中心によく見られるようになりました。 そんなアナログ風・手書き風のデザインに欠かせないのが、手作り感と温もりが伝わる手書きフォント。商品の特徴を説明するキャプションで使用するのにも適しますし、感情が伝わりやすい見た目の利点を活かし、お客様やスタッフからのコメントに使用するのも効果的です。 このページでは、いま注目の手書き系フォントを特集。デザインポケットで取り扱い中の商品からおすすめのフォントをご紹介します。SNSで話題になっている商品や定番のベストセラー、手頃な価格の商品など、厳選した40書体をご覧ください。
現代におけるフォントの数は和文フォントだけでも3000種類以上存在するといわれています。 そのなかでも特にゴシック体と明朝体は利用媒体が多く、新聞は明朝体、雑誌やWebの見出しはゴシック体で書かれていることが多く、生活になじみのあるフォントです。 この記事ではゴシック体と明朝体にフォーカスし、その歴史やそれぞれのフォントが与える印象について解説します。 またフォントを組み合わせた使い方やデザインに従事する私たちができることについても考えてみました。 ゴシック体と明朝体の歴史 フォントの代表選手であるゴシック体、明朝体はどのようにして生まれたのでしょうか。 ゴシック体はアメリカの書体家(デザイナー)が開発した書体、明朝体は中国の宋時代の木版印刷の発展から発生した文字です。 ゴシック体の誕生 15世紀の中期、ヨハネス・グーテンベルクの印刷技術から生まれたラテン文字が、後に「ドイツ・ゴシック」と
最終的にこんな感じになります! 画像は bash on Ubuntu on Windows で Vim を開いているところです。 目標 Windows 10 でデフォルトの端末が PowerShell になり、コマンドプロンプトに比べたらイケているのですが...。本記事では綺麗な日本語を表示できるフォントと Solarized のようなカラーテーマを導入する方法を紹介します。 注意: VSCode ユーザーの方は直接レジストリエディタからレジストリを編集することが必要になる場合があります。最後の注意書きを参照してください。 フォントのダウンロードとインストール PowerShell では TrueType フォントしか使用できないので、TrueType 形式で配布されている日本語フォントを選択する必要があります。本記事では源真ゴシックを使います。源真ゴシックは Adobe の源ノ角ゴシック
昨年にGoogle Fontに商用利用OKな和文フォントが大幅バージョンアップされて「キャー😍」という話がまず最初です。 今回の和風のサイトのお仕事があり、明朝体のWEBフォントを探しておりました🥷 Noto Serif Japanese まずはもう言わずと知れたNoto Serif Japaneseを必然的にベースにすればいいかな(明朝のWEBフォントで適当なのはそれくらいしかないかなと)と思ってみていたのですが。。。 👀なにやらWEBフォント業界がザワついていた 昨年の3月頃に、Googleフォントに和文フォントが多数追加されたようだった。 中でも個人的にかっこいい〜と思ったのは、 💁5mm四方の升目にすべて手書きした明朝体「New Tegomin」 New Tegomin 2019年にリリースした手書き明朝体フォント「テゴミン」の更新版です。 5mm四方の升目にすべて手書きし
フリーフォントをダウンロードできます。 圧縮されたZipファイルがダウンロードを開始します。ファイルを解凍してインストールしてください。個人使用に限り、ご自由にお使いいただけます。OPEN TYPE・2バイト 。なおフォントにより一部文字に制限がございます。 商用での利用をご希望の方は STORES,Booth,FontFactoryにて正規版のご購入をお願いいたします。 使用環境 MAC OS X以降・WINDOWS7以降を推奨 ●使用許諾について
皆さんは、砧書体制作所というフォントメーカーをご存じでしょうか? 20年以上にわたり、広告やパッケージなどで使われ続けている「丸明朝体ファミリー」を生み出したフォントメーカーです。 2016年1月に、カタオカデザインワークスから社名変更し「砧書体制作所」となりました。創業は1995年です。 URL: https://www.moji-sekkei.jp/ 文字に柔らかさと優しさをあたえる「丸明朝体」2001年リリース以降、ポスターや広告、雑誌などの紙媒体から、TVCMや番組、WEBなどのデジタルコンテンツに至るまで、長く愛され使われ続けている書体ファミリーです。 明朝体ながらエレメントに丸を用いることで柔らかな印象を与え、筆の動きが強調された文字は躍動感を感じさせながら、見る人に温かみや懐かしさを与える唯一無二の書体です。 「丸明朝体」は、ゴシックに丸ゴシックがあるように、明朝体にも丸明朝
こちらのフォントデータをパソコンに入れることで、いろいろなアプリケーションでご使用頂けます。「DONATE & DOWNLOAD」を選択すると、のらもじ発見プロジェクトを資金面で応援することができます。(廃業してしまったお店や、寄付をお断りされるお店が多いため、現在お店への支払いは停止しております。)無償でのダウンロードをご希望の際は、SNSでのシェアにご協力ください。 You can download the font and use it in your computer. By selecting DONATE & DOWNLOAD, you can financially support our project. (Due to the fact that many stops have gone out of business or refuse to accept donati
Next.jsではnext/fontを活用することで、Googleフォントをセルフホスティングすることができ、Googleへの通信が発生しないことにより、ページの読み込み速度を向上することができます。 next/fontの使い方などは公式ドキュメント等に委ねますが、next/fontかつCIを導入している方にモック化することを勧めたく思います。 なぜモック化するのか run buildなど実行時にフォント取得に失敗する場合があります。 どういったCIを組んでいるかにもよりますが、それが原因でCI自体が失敗する可能性があります。 頻度としては10回に1回もない程度で、再実行すれば解消しますが、ストレスを減らすためにmock化するのが好ましいです。 storybookのdocにでもモックを推奨されてます。 どうモックかするか 上記のstorybookのドキュメントで確認できますが、やることとし
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは!せきゆおう です。 游ゴシックは好きですか?僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では?」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く