2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド 工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ
CSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。 今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。
UX Design for Users ユーザーへの価値とビジネスの成立を実現するUXデザインを提供し、 アプリやWebサービスの新規立ち上げや改善をサポートします。 提供するサービス About STANDARD 私たちSTANDARDはUXデザインを軸に、スマートフォンアプリやWebを活用した新規事業の立ち上げや既存サービスの改善を支援するネットワーク型のデザイン会社です。 ユーザーの抱えている課題から価値を定義し、理想の体験を構想・設計するだけでなく、ビジネスとしても成立するための仕組みをデザインすることで、事業の成長と未来を豊かにするサービスの創出に貢献します。 私たちについて
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
MarkeDriveは、コンテンツマーケティングに関する知識とノウハウを提供し、マーケティングの課題解決を支援するオウンドメディアです。貴社のマーケティング活動の加速をサポートします。
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
ブログやウェブサイトのユーザインターフェイス用にさまざまなアイテムを揃えた、商用でも無料で利用できるアイコンフォントを紹介します。 アイコンのカテゴリは、ウェブ、ソーシャル、Eコマース、デバイス、メディア、ツール、グラフ、文具、天気、乗り物、など多岐に渡ります。 Sosa icon font アイコンフォントは4種類のフォーマットが用意されています。 TrueTypeフォント EOT WOFF SVG アイテムは全部で121種類！ その中からいくつか紹介します。
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
無料日本語webフォントJapanSans
webフォントJapanSans無料ダウンロード 無料の日本語webフォントJapanSans webフォントJapanSansは誰でも無料で安心して使える日本語webフォントです。ライセ... Read More
text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011
今日のエントリもSMX West 2011のセッションからのレポートです。 text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。 CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。 ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言しています。 使ってもいいのか悪いのかは以前はGoogle社員によって答えがマチマチでした。 しかしここ1年ほどは画像置き換えに対するGoogleのスタンスは一貫して“NG”です。 今回のSMXでも、GoogleのMaile Ohye(マイリー・オイェ)さんが使用すべきでないことをあらためてクリアにしました。 理由は、画像置き換えはスパマーがよく使う手法だからです。 画像置き換えがすぐさまス
お探しのものはたぶんここにはないです。 ここはなに 使われなくなったサブドメインたちの墓場です。 提供していたサービスとその移転先 tachikawa.maud.io とか諸々を提供していた自宅鯖は 2019.10.31 を以て閉鎖されました。4年間ありがとうございました。 Minecraft: craft.maud.io はサービスを終了しました。 Nextcloud: cloud.akane.blue による全ての共有ファイルの提供は終了しました。 Koruri: 移転しました FlokoROM: 移転しました その他: あったかもしれないが全部潰したのでもうない リンク プロフィールや連絡先: maud.io CSS framework: lit © 2019- lindwurm
Loading...
Font Library
Datalegreya Cooper Hewitt Jellee Typeface Avara Fantasque Sans Mono
WebHostingHub Glyphs
Glyph Icon Font from WebHostingHub High quality icons that are easy to use with Bootstrap, other CSS frameworks and in any web projects. They also work in desktop software such as Adobe Photoshop or Microsoft Word. They are perfect for use in mobile developement on Android or iOS devices. Icons rock when used as a font! Font gives you freedom to change icon's size, color, shadow and other things o
恥ずかしながら最近までIEの旧バージョンだとWebフォントは使えないと思っていました。 以前ブログのタイトルにGoogle Web Fontsを使っていましたが、それ以降はWebフォントへの興味を失っていて、個人的に興味がそそられるような記事を見てもスルーしていました。 そんなとき「安全な@font-faceの書き方(抄訳) - Weblog - hail2u.net」という記事を見ました。 Webフォントの記述方法について書かれたもので、記事自体3年くらいまでのものですがかなり新鮮に感じました。そのなかにこんな一文が。
そしてもちろん我らが日本語も用意されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。 日本語は優遇されているのか7つも異なるウエイト（太さ）が用意されています。 ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。（2バイト文字は65536種類に対応している） 中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日本語はイワタ、中国語はChang
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
designers-hack.net
This domain may be for sale!
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu
Tweet * WhatFont is not affiliated with MyFonts and/or the WhatTheFont service. ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
土曜日なので軽い話題。天気 アイコン型のWebフォントです。 スマートフォンのアプリ向け に作られたみたいです。見た目 が可愛いのでアプリ以外にも 何かに利用したいですね。 天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。 可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。 結構揃ってます。 フォトショやイラレで使えるデータもあります。 商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Code — Kate Morley
This section of my site contains code and programming tutorials. Online binary file viewer Styling checkboxes and radio buttons with CSS A star rating widget in CSS Tree views in CSS Border box sizing in CSS Detecting caps lock in JavaScript Creating CSV downloads in PHP Compressing the Wordle dictionary AmigaGuide reference HAKMEM Item 175
【保存版】和文のWebフォントサイト25選
Webフォントを使用して、Webサイトを制作すると、表現できるデザインの幅が格段に広がります。 何となく使用方法が難しいと思われがちなWebフォントですが、一度理解できれば意外に簡単です。 以下の記事でWebフォントの使用方法を解説したので、一読することをオススメします。 意外と簡単！Webフォントを理解しよう 今回は、日本語に対応しているWebフォントがダウンロードできるWebサイト25選をご紹介します。 1.Noto Sans Japanese https://www.google.com/get/noto/ Googleが提供しているフォントサイトです。 和文だけではなく、様々な言語の一般的なフォントが揃えられていますので、まず導入として使用してみることをおすすめします。 2.TypeSquare http://typesquare.com/ 日本で最も有名な和文フォントサイトです。
http://iconmelon.com/
WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ！ サイトのちょっとした装飾に使ったりする「アイコン」ですが、わざわざ画像を作成したり、素材を探してきたりするのは結構大変です。それにアイコン画像のサイズや色をあとで変えたいと思っても、画像自体を作りなおさないといけないので、それはそれで面倒な話になっちゃいます。 でもそんな面倒な話は、「Font Awesome」というWEBフォントを使えば一気に解決します。これを使えば、簡単にアイコンを挿入することができるうえ、WEBフォントなので、あとでサイズを大きくしたり色を変えたりといった作業も、CSSを触るだけで簡単にやれちゃうんです。 ということでわたしも「Font Awesome」を使って、STINGER3を使った当サイトの細かいところにアイコンを入れて装
タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-menu-contents"> <a href="#" id="home"></a> <div class="panel-wrap"> <a href="#" class="panel-btn">カテゴリー</a> <div class="panel"> コンテンツ </div> </div> <div class="panel-wrap"> <a href="#" class="panel-btn
Webページ上でベクターのアイコンを簡単に表示できる憎いアイツ。そう、アイコンWebフォント。 Retinaディスプレイでも綺麗に表示されるし導入は（そんなに）難しくないし至れりつくせり。 セマンティック？なにそれおいしいの？ そんなわけで今回はよく使っておりますアイコンWebフォントのセットと、ジェネレーターをまとめてみました。 ※紹介しているフォントを使用する際は、ライセンスを必ずご確認ください。 Font Awesome とっても有名なアイコンフォント、Font Awesome。600を超えるアイコンを使用できるのが特徴です。ソーシャル系のアイコンも揃っております。線のRは少し強めの印象。 個人・商用利用なのも嬉しい。 Font Awesome, the iconic font and CSS toolkit Entypo キリッとしたアイコンがエレガントなイメージなのがEntypo
【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナー兼イラストレーターのもりたです。 最近、うら若い後輩たちが意外とフォントのあれこれについて知らないということに気付きました。なので、フォントのことについて何回かに分けて書いていきたいと思います。 第1回目は、プロになりたてのデザイナーだとうっかり間違えることも多い、「フリーフォント」について。 初歩的な話しかしていないので、もう何年もデザイナーをやってる人にとっては常識なことばかりだと思います。 いろんな人に叱られたり肝を冷やしたりしながら覚えてきたことだと思うので、若手の子が迷ったとき、こんなことも知らないの？と言う前に、ぜひこの記事のURLをそっと渡してあげてください。 もくじ そのフリーフォント、使っても大丈夫？ フリーフォントの「フリー」は、無料という意味 フリーでも使えない場合もある！ フリーフォントを使うときに気をつけたいこと フリーフォントを探すならこの
M+Web FONTS Subsetter
M+Web FONTS SubsetterこのWebアプリケーションはM+ OUTLINE FONTSのサブセットを生成するツールです。 生成したフォントはWebフォント(woff形式,eot形式,ttf形式)としてそのまま利用できます。 M+ OUTLINE FONTSとはM+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開されているアウトラインフォントです。 詳細はこちら
普段何気無く目にしている書体 ―「フォント」 想い、イメージ、情報。 言葉を選ぶように、服を選ぶように、 デザイナは「フォント」を選ぶ。 だけどもこれまで、インターネット上で 「日本語フォント」は自由に選べなかった。 「Webフォント」は2バイト圏の日本では絵に描いた餅だった。 デザイナは1バイト圏を指を咥え眺める日々を過ごした。 しかし今、ようやく、 実用に耐えうる、日本語Webフォントサービスが始まった。 僕達はフォントの自由を手に入れる。 ようこそ、日本語のウェブの美しい未来へ。
2013年11月8日、JPタワー（東京・丸の内）で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。 http://adobe-createnow.jp/eventRead less
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
Next.js 13
As we announced at Next.js Conf, Next.js 13 (stable) lays the foundations to be dynamic without limits: app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
「コーポレート・ロゴ」フォント（ver3）の提供情報「コーポレート・ロゴ」（ver3）は、オープンソースの源ノ角ゴシックに会社ロゴタイプ風のひらがな・カタカナを組み合わせ、加工を加えたフリーフォントです。本サイトにて無料にてダウンロードすることができます。WindowsおよびMac OSの主なバージョンに対応しています。 本フォントファイルは、源ノ角ゴシックと同じ SIL Open Font License 1.1 のもとで使用することができます。 「コーポレート・ロゴ」フォントのデザインいわゆる企業やサービスで使われているようなモダンでシンプルなロゴ文字をイメージしたフォントです。そのままロゴタイプとして使用することもおすすめですし、ロゴ作成のベース・フォントにすることも可能です。 ロゴとしての活用例 ※以上のフォント見本にある会社・団体名はすべて架空のものです。 かな文字の中でもカタカ
ミニマルなアイコンやシンボルをWebフォントで表現するために作られたフリーフォント・Web Symbols typeface
ちょっと面白かったのでメモ。 ミニマルなアイコンやシンボル をWebフォントとして使えるよう にしてくれたフリーフォント、 Web Symbols typefaceのご紹介 です。割と嬉しいかもｗ 以前、シンボルやアイコンタイプのフォントをご紹介しましたが、こちらは最初からWebフォントとして使う目的で作ったそうです。 アイコンをWebフォントにすることで、毎回アートディレクターにスライス等を頼まずにすむんや！って言ってました。 あんまり大きいサイズにするとちょっとアレですけどね・・ミニアイコンとして使うことのほうが多そうなのであんまり気にならないかな。css3でエフェクトをつけるのも面白いかもです。 こんな感じで使う。 css@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.e
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインにおけるタイポグラフィの考察 | ノート | dotgraphy
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
Standard Inc. アプリやWebサービスのUXデザイン会社
Googleフォントをサブセット化してページの読み込みをスムーズに
https://ttf2eot.sebastiankippe.com/
MarkeDrive｜マーケティングを、ビジネスの推進力に。
次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？ - フォントブログ
120種類以上の面白いアイテムがたくさん揃ったアイコンフォント -Sosa icon font
Yaku Han JP - 約物半角専用のフォント
画像の最適化 | Web | Google Developers
小瑠璃フォント (koruri)
IEでもWebフォントが使えることを知ったので勉強してみました
Google Fontsの日本語フォント「Noto Fonts」の使い方
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ
これは便利！アイコン型WebフォントのCDN「Font Awesome」
Webフォントにも利用可能なフリーの天気アイコンフォント・Climacons Font
Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた - 32style
上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー
よく使うアイコンWebフォントのフォントセットとジェネレーターまとめ
Web Designing ウェブフォントデザインアワード2011
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘（スイッチ）
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
「コーポレート・ロゴ」フォントDL – 転職サイト・エージェント情報のLOGOTYPE.JP