Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 似たような記事は山程ありますが、「日本語対応したものに絞って」「とにかく収集する」記事はあまりないなと感じていたので、この記事を作成するに至りました。 なお、抜け・漏れ・紹介文の誤り・リンクミスなどのマサカリは大歓迎です。 「日本語対応」について プログラミングフォントとして紹介されているものの中には、日本語のグリフを含まないものもあります（というか、欧米で開発されたフォントでは、それが当たり前です）。そのようなフォントを使う場合でも、ソフトウェアの努力によって日本語を表示できます。 しかし、フォントが対応していない文字は別の
2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？ このスペースはテキストにline-heightプロパティを設定した際
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
Web サイトに使用するフォントは、Web ページの印象を左右する重要なポイントです。初めてホームページを作成する際に、おしゃれなフォントを使ってデザインしたにもかかわらず、「端末によって表示されるフォントが違う」「Web デザインに使用できないフォントだった」といった問題に直面することがあります。 そんな悩みを解決するべく、本記事では Web サイトを作成するときに知っておきたいフォントの基礎知識と、Web デザインに最適な日本語の定番 Web フォント 23 選を紹介します。Web フォントのメリットやデメリットを正しく理解して、UX や SEO に優れた Web デザインを目指しましょう。
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
2024年10月15日午前8時頃、モリサワによって写研書体がリリースされ、Morisawa Fontsにて使用可能となりました。 これは歴史の一大転換点であり、個人的にはデザイン・印刷史上、 モリサワがAdobeにPostScriptフォントを提供(1989) MacOSXにヒラギノ書体を標準搭載――“ヒラギノショック”(2001) フォントワークスがフォントの定額サブスク「LETS」を開始(2002) に匹敵、もしくは超えるターニングポイントであると考えています。デザインやフォントに詳しい方でないと、なかなか伝わらないと思いますが。 ちなみに写研というのは元々、こういうものです。まずはご覧ください。 これは現在のデザイン・印刷業界で主流のデジタルなDTPワークフローが登場する前の、手動写植機やフィルムを使用していた時代の雑誌制作風景です。 これがデジタルに移行していく過程で現在主流になっ
現代におけるフォントの数は和文フォントだけでも3000種類以上存在するといわれています。 そのなかでも特にゴシック体と明朝体は利用媒体が多く、新聞は明朝体、雑誌やWebの見出しはゴシック体で書かれていることが多く、生活になじみのあるフォントです。 この記事ではゴシック体と明朝体にフォーカスし、その歴史やそれぞれのフォントが与える印象について解説します。 またフォントを組み合わせた使い方やデザインに従事する私たちができることについても考えてみました。 ゴシック体と明朝体の歴史 フォントの代表選手であるゴシック体、明朝体はどのようにして生まれたのでしょうか。 ゴシック体はアメリカの書体家（デザイナー）が開発した書体、明朝体は中国の宋時代の木版印刷の発展から発生した文字です。 ゴシック体の誕生 15世紀の中期、ヨハネス・グーテンベルクの印刷技術から生まれたラテン文字が、後に「ドイツ・ゴシック」と
『奇跡のフォント 教科書が読めない子どもを知って ーUDデジタル教科書体 開発物語』書体デザイナー、渾身のドキュメント！ 「ディスレクシア（発達性読み書き障害）」という障害があることを知ったのは、ほんの数年前のことだ。トム・クルーズがこの学習障害で、台本を読むことが出来ず、マネージャーに読んでもらって暗記する、と聞いたときには、そんなことがあるのかと驚いた。 文字をすばやく、正しく、疲れずに読むことに困難のある人を言い、そのメカニズムは完全に解明されていないという。 この障害は日本人にも多く、日本語話者の5～８％存在するという報告がされているという。知能レベルや知識の欠如に問題はなくても、会話を文字にすることや文字を読み上げることに大きな苦労を強いられるため、「やる気のない子」「読書が嫌いな子」などのレッテルを貼られがちだ。 さらに文字を読むことが困難な人には、発達障害やダウン症、色覚異
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
スマートキャンプデザインブログです。 今回は2018年にリニューアルが相次いだハイブランドのロゴリニューアルについて、スマートキャンプインターンの八尋がまとめました。 ハイブランドのロゴリニューアルラッシュブランドのロゴというのは、そのブランドの個性や特徴を一番に表します。富裕層をターゲットとしているハイブランドにとって、高級感や豪華な印象を表すために重要な役割を担う存在と言えます。 また、今まで親しまれていたロゴを新しくすることは、ブランドイメージを新しくすることにつながります。 2018年にロゴをリニューアルしたハイブランドの新旧のロゴを比較して見たいと思います。 1. BALENCIAGA（バレンシアガ） Renewal / 2018春夏コレクション~ 20世紀前半のモード界において「クチュール界の建築家」とも評され、今も世界中で愛されているハイブランドとして有名なBALEN
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
文字をアウトライン化する アウトライン化したい文字を用意します。作例のフォントは「源ノ角ゴシック JP Bold」を使用しています。 テキストボックスを「Ctrl + Shift」キーを押しながら下にドラッグして複製します。 2つのテキストボックスを上揃え（揃え方を参照）で配置します。 2つのテキストボックスを選択した状態で、「図形の書式」タブ →「図形の挿入」グループ →「図形の結合」→「接合」をクリックします。 テキストから図形に変換され、アウトライン化された状態になりました。 アウトライン化の確認 文字を右クリックしてメニューを開き、「頂点の編集」をクリックします。 パスが表示され、アウトライン化の確認できました。 文字をパーツごとに分割する パーツごとに分割したい文字を用意します。作例のフォントは「源ノ明朝 SemiBold」を使用しています。 テキストボックスを複製します。 2つ
(2/7追記) こんにちはゆむらです。 タイトル通りです。暇だったので調べてみました。 くろかね EB パズドラといえばこのフォント。 太めのエレメントの端をスパッと落とし、鉄のように黒く力強い雰囲気の中に、どこか優しさをもっている書体。 コメット B パズドラレーダーといえばこのフォント。 すべてのラインを直線で構成している書体。 ロウディ EB 「ロダン」をベースに右方への力強い動きが感じられるユニークな書体。 最近は+ポイントの洞窟バナーぐらいでしか見ない。 カラット UB すべてのラインを直線で構成している極太でインパクトの強い書体。 ランキングダンジョンのロゴなどに使われている。 隷書101 独特のエレメントをもつオリジナル隷書体。 最近だとお正月バナーに使われた。 G2サンセリフ 力強さと読みやすさを両立したデザイン書体。 このフォントはよく見る。(7周年放送の時にも使われて
今回は商業漫画でよく使われるセリフのフォント（書体）に関するまとめ記事です。 フォントを上手く使えば漫画の表現の幅が広がりますし、知っていると漫画を読む時に違った楽しみ方もできるので、ぜひこの機会に一度自分の中で整理してみてください（ちなみにフォント指定は編集者に必要なスキルです）。 ジャンプはこんな感じらしいです。神まとめ。 【巻末解放区！WEEKLY週ちゃん】今週の週ちゃんはフォント（書体）大特集！好きな漫画で使われてるあのフォント、気になりませんか？編集部のリアルなフォント事情を語らせていただきました！ これを読めば漫画だけではなくロゴやテロップ見るのも少し楽しくなるかも？必見です！！〈担当〉 pic.twitter.com/JoQPvhmi1l — 少年ジャンプ編集部 (@jump_henshubu) April 8, 2019
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く