フォントを使っていて 明朝体、ゴシック体、セリフ、サンセリフ、サン どれが何だったか混乱したことはありませんか? 私は、その場では覚えたつもりでも、しばらく経つと忘れてしまっていて 「これはどっちだったかな?」と自信がなくて調べ直すことがよくありました。 しかし、ある人から覚え方のヒントを教わったらスーッと頭に入ったので、それを共有したいと思います。 ※この記事は、HTML/CSS font-familyの総称フォント名に関連する話しです。 要約すると 明朝体、セリフが仲間 ゴシック体、サンセリフ、サンが仲間 筆っぽいのが「明朝」 マジックペンっぽいのが「ゴシック」 「止め」などの端部の装飾のある部分を「セリフ」と言う セリフは「止め」など端部の装飾のあるフォント サンは、フランス語で「〜のない」「〜なしに」という意味 サンセリフは「止め」など端部の装飾のないフォント 「止め」や「払い」の
概要 CSSでのフォントサイズ指定に使用できる単位にはいろいろなものがあります。 その中でも、先日初めてremを使用する機会があったので、学びの整理として記事にまとめたいと思います。 remとは ルート要素のフォントサイズを1とした時の相対的なサイズ指定を表します。 ルート要素についての記述は以下のとおりです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/html <html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 つまり、<html>に指定されているフォントサイズを1とした時の相対的な文字サイズを表すのがremです。 例 以下のように、<html>に10pxを指定したと
Photo by Alexander Andrews on Unsplash デフォルトでは、 Windows 版の Chrome のフォントはメイリオになっており、大半のサイトはメイリオで表示されます。 しかし、このメイリオ。正直に言ってあまり美しくないと思いませんか? Mac のように綺麗なフォントを使いたいという方もいるでしょう。この記事では、Chrome で表示されるフォントを Mac 並みに美しい Noto Sans に変更する手順を解説します。 綺麗なフォント 一口に綺麗なフォントと言っても色々あります。 その中でも、今回は Google と Adobe が共同開発している、Noto Sans を使用します。 この Noto Sans は非常に高品質なのにもかかわらず、商用・非商用問わずに無料で使えてしまうという優れものです。 今回は、この Noto Sans のダウンロード
現在のWindowsのフォントは、アウトラインフォント形式のOpenTypeをメインにしている。OpenTypeは、1997年にTrueTypeの拡張として発表された。TrueType形式のアウトラインデータに加え、CFF/Type2というPostScript用のアウトライン形式を含めることができる点がTrueTypeと異なる。 ここでは、OpenTypeフォントであるCascadia Codeを例に、フォントの概要やアプリケーションからのフォントfeature機能の利用について解説する。 そもそもCascadia Codeフォントとは? Cascadia Codeフォントとは、Windows Terminalと同時に開発されたオープンソースのフォントである。Windows Terminalと同時にインストールされるが、単体でもインストール可能だ。このフォントを例に持ち出したのは、オープン
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
1.3のページ買えただけだとなんか変だったので新しくページ作成でござる 1.6のパッチ出せゴ━━━━(# ゚Д゚)━━━━ルァ!!とご指摘いただいたので、とりあえず作成しました。 ここで配布しているパッチは本体を日本語化するものではありません。 EACの潰れたフォントを見やすくするための変更パッチです。 1.6版のはなぜか1つ疑わしいと出ていましたが、知らないベンダーなのでまぁ怪しいと思った方は使わないほうがよいでしょうね。Virus Total このパッチをDLして使っていただくのはご自由ですが、ご利用は自己責任でどうぞ。 1.6がリリースされてたので早速適当にパッチ作成しましたよっと 一応Windows10の64bit版でデフォルトのインストール先にインストール後、パッチあてて↓の日本語ファイルで起動することは確認済みです。(Win7はもう手元にないので未確認) 1.6用のダイアログ
「0xProto」フォントとは 「0xProto」フォントは、プログラミング向けのフォントです。文字の読みやすさを重視しています。 最初のリリースは2023年5月で、その後も何度かアップデートされています。 1.000:2023年5月 1.300:2023年10月、Nerd Fonts 3.1.1に含まれる0xProto Nerd Fontのベース 1.500:2023年12月 この記事は、0xProto 1.500をもとに書かれています。 (2024-05-21 追記)現在の最新バージョンは2.001になっています。なお、MacではHomebrewでのインストールが可能になっています。 2.000:2024年5月 イタリック体が追加 プログラミング向けのフォントとは プログラミングにおけるフォント選択は、単なる見た目だけの問題ではなく、それ以上の意味があります。ソースコードが読みやすくな
環境 Windows10 Visual Studio Code 1.39.2 フォント名を確認する フォント名を確認するためには,タスクバーの検索欄で「font」または「フォント」と入力し,Best match!な「Font settings」をクリックします. お望みのフォントをフォント名で検索します. 今回は「源真ゴシック等幅」というフォントを使いたいと思います. フォントを選択すると以下のような詳細画面が開きます. フォントの中には複数の「Font face」を持つものがあります. フォント検索の画面で,各フォントに「5 font faces」などと書かれていることがわかると思います. このFont faceも選択することができるので,お好みに合わせて選択してください. Font faceを選択すると,Full nameの項目にそのフォントの名前が表示されます. これをVSCodeで
当サイトでは、毎月新しく公開されたフリーフォント素材をまとめて紹介しています。 この記事では、2023年にリリースされた、商用利用できる完全無料の英語・日本語フリーフォントを集めました。 2023年は、特に数多くの日本語フリーフォントが公開されました。 おしゃれな英語フォントから高級感のあるセリフ書体、人気定番の筆記体、手書き、ブラシフォント、ビンテージ、ディスプレイなど。 幅広いカテゴリよりフリーフォント素材120個を厳選しているので、自分の「推しフォント」を見つけてみませんか。 「日本語フォントをまとめてダウンロードしたい」 「できるだけ安く、仕事でも安心して、フォントを使いたい」 そんなときは、20,000以上の英語フォント、日本語フォントも500以上を使い放題の、Adobe Fonts(アドビフォント)がオススメです。 その理由はずばり、Adobe CCユーザーなら、すべて無料で、
2023年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです! これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 無料版で使ってみたらいい感じだったので、有料版を購入しました。 かもめ明朝 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 築地二号系で昭和初期に作られたであろう金属活字にインスパイアされて作成されたフォント。ひらがな・カタカナ・約物、漢字は4文字だけ収録されています。 フリーフォントのダウンロードは、サイドバーの「無料ダウンロード」から。 202
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。(最終調査日:2023年7月) font-familyの役割とは CSSのf
ホームページのWEBデザインを制作する際に最も重要な一つの要素として、使用するフォントの選定が挙げられます。Adobe FontsやGoogle Fontsなどのホームページに実装することができるWEBフォントサービスは近年充実度を増し、デザイン性の高いフォントなどもWEBデザインに気軽に使用することができるようになりました。しかしデザイン性の高いフォントはホームページの見栄えを良くし、他社ホームページとの差別化が望める一方で可読性が低くなってしまうという問題もあります。WEBフォントの中にはUIに特化してデザインされた可読性に優れたフォントもあり、可読性の担保されたフォントを用いることでコンテンツの内容がどんなユーザーにも伝わりやすくなり、結果的にSEO効果を期待できることもあります。そこで今回は、UIや可読性に配慮して開発されたWebフォントをご紹介します。 【目次】 1. 英語フォン
前回の、おすすめなフォントまとめ①では、主にシンプルなフォントを紹介しました。今回は、ちょっとお洒落な、特徴のあるフォントを紹介します。 Poppinsまず初めに紹介するPoppinsは、Indian Type Foundryによってデザインされた、全体的に丸い感じで可愛らしいフォントです。ちょっとおしゃれなフォントが使いたかったらこれがおすすめです。とてもお洒落で読みやすく、次世代の高速ブラウザとして注目されているBraveなども使用しています。 Montserrat次に紹介するMontserratは、アルゼンチンのグラフィック デザイナー Julieta Ulanovskyによってデザインされた、デザイン性の高い、力強い太めのフォントです。フォントのウェイトも豊富で、見出しに使うのがおすすめですが、本文にも問題なく使えます。 JostJostは、Owen Earlによってデザインされた
コーディングやメモ書きに必須となる等幅フォント。色々調べてみたのでメモを残します。 個人的にはSource Han Code JPが好きです。英数字:かな漢字=1:2が必須ならNoto Sans Mono CJK JPでしょうか。 M+系のポップ感は少し苦手です。 Noto Fonts / Source Han Sans https://www.google.com/get/noto/ https://github.com/adobe-fonts/source-han-sans AdobeとGoogleが共同開発しているフォント。Googleの方はNoto Sans、Adobeの方はSource Han Sans(源ノ角ゴシック)。Notoの由来は"No Tofu"(豆腐文字=文字化け時に表示される四角)だとか。 日本語だけでよいのでNoto Sans CJK JPをダウンロード。 Not
どうも。すっかり朝の早起きが定着してきました。本日は、「TrueTypeとOpenTypeの見分け方と違い」というタイトルでお送りいたします。 TrueTypeとOpenType皆さんはフォントの形式に種類があることをご存知でしょうか。 大きく分けて、フォントには「TrueType」と呼ばれるものと「OpenType」と呼ばれるものがあり、使用している時はあまり意識せずに使えてしまうため、違いを知らない方も少なくないと思います。 新しくフォントを購入する場合や、普段よりも高解像度のデザインをしなければならない場合においては、この違いを意識しておいた方がいいことがあります。 見分けるには? llustratorやPhotoshop上でフォントを選択する際、フォント名の横に「T」のようなマークと「O」のようなマークのいずれかがついているかと思います。これは「TrueType」と「OpenTyp
折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ(時系列など)を描画するためのフォントです。値は0~100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く