コーヒー屋を開業するにあたって作った書体の話｜Koji Kimura
デザインスタジオであるSTARRYWORKS inc.は、昨年秋からロースター・カフェを開業しました。そのお店の名前に合わせて「Hue」という欧文書体を開発することになった、そのプロセスや開発の裏側を紹介したいと思います。 1. お店のコンセプトは「色で選ぶコーヒー」お店の名前は「Hue Coffee Roaster」といいます。「Hue」（ヒュー）は色相や色味という意味の英語で、コーヒーのメニュー名を産地や豆の品種、焙煎度合などではなく、「色」の名前で表現することでより気軽にさまざまなコーヒーを楽しんでいただくことをコンセプトとしています。 お店のInstagram 私はコーヒーが好きで毎日飲みますが、豆の品種や産地などは詳しくなく覚えられずにいました。以前注文したものが美味しかったからまた飲みたいと思ったり、前回とは違うものに挑戦してみたいと思っても、ややこしい地名などで覚えられず、う
新しい日本語フォントがたくさんリリースされてる！ 2021年、日本語の新作フリーフォントのまとめ
2021年もあと残り2週間ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2021年フォント界の大きなニュースは、Google Fontsに大量の日本語フォントが追加されたことです。Webフォントとして利用できるのはもちろん、オープンソースになったので商用プロジェクトでも無料で利用できます。 というわけで、Google Fontsで利用できるようになった日本語フォントから紹介します。有料だったフォント（砧書体やZENフォントやFontworksなど）もオープンソースのSILライセンス
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
フォントと画像の管理にはこれ！シンプルで使いやすい、WinMac両対応アプリ「Eagle」が神アップデート
以前当ブログで紹介した時からずっと愛用しているEagleがver.2に神アップデートしたので、改めて紹介したいと思います。 簡単に言うと、フォント（ttf,otf,ttc,woffも）、画像（jpg,png,gif,svg,webpはもちろん、raw,psd,ai,xd,sketch,clipも）、動画、音声、PDFやテキストも管理でき、タグ付けやフォルダ分けやカラーフィルターなどで整理も簡単できるアプリです。 Windows, macOS（M1対応）に対応したアプリで、1ライセンスで2つ使用でき、サブスクではなく買い切り、しかもバージョンアップの追加料金なしです。 ver.2が先日リリースされ、ver.1の人は無料でアップデートできます！ Eagle Eagleとは Eagle ver.2の神アップデート Eagleのダウンロード・インストール Eagleの使い方 Eagleとは Eag
フォントが大好物な人は要チェック！2020年、日本語の新作フリーフォントのまとめ
2020年もあと残り1ヵ月、今年リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 明朝体、ゴシック体、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、もじワク研究から待望のフリーフォント。 私はさっそくすべてのデバイスにインストールして、愛用しています。 マメロン Hi-Regular 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 個人的にも特にお勧めの「マメロン」が、大きく変わりました。デジタルデバイスでの使用を意識してデザインされており、可読性が高いかわいいフォントです。収録文字はAdobeJapan1-3StdNに対応しており、JIS第一・第二水
本のフォントが気になったので、徹底的に調べてみたら、意外な事実が判明した。｜後日談追記｜伊藤太一 / プロダクトデザイナー
2020.1.14. 一番下に後日談追記。 「読みたいことを、書けばいい。」という本を買った。 noteをはじめたことで、そもそも文章ってどう書くのかとか、わかりやすい文章ってどういうことなのかが気になっていたから。 学びたい欲求が出たときはすぐに行動に移すと吸収が違う。 だから買ったのに。 まず表紙からそうはさせてくれないのである。 なんだこのフォントは。 思わず読もうとする手をとめた。 まず、この「を」に注目してほしい。 タイトルの文字「読みたいこと」と「書けばいい。」と比較して、太さ（以下：ウエイト）は同じに見えるが、文字の雰囲気が異なっていることが分かる。 くるっとなってるこの部分。 ここだけ筆の流れを感じさせるような繋がりがある。 もし他の文字と同じルールで作るのであれば、こうするのが自然だ。 デザイナーさんがニュアンスを加える為に、アレンジして作った文字なのだろうか。「A1
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。 他にも「ＭＳ Ｐゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。 Website fonts have been affected by OS and Browser updates. R
Hello Mercari Sans | メルカリデザイン
It will convey our messages in a single, consistent tone.
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
新宿駅にガムテ職人が作り出す案内表示「修悦体」らしきものが現れザワつく人々
リンク Wikipedia 佐藤修悦 佐藤 修悦（さとう しゅうえつ、1954年 - ）は、三和警備保障株式会社に勤務する警備員。岩手県花巻市出身。オリジナルの書体、いわゆる「修悦体」（しゅうえつたい）で知られる。2004年、JR東日本新宿駅東口で行われていた部分改築工事の際、鉄板の壁がいたるところに立っていたため迷路のような状況となっていた駅に誘導係として配置された佐藤が「声を使っての実際の誘導だけでは対応できない」として、ガムテープを使った案内表示を作り始めたのが「修悦体」の始まりである。当初は駅からの指示や許可は無かったが、無断で駅の番 8 リンク ロケットニュース24 新宿駅の「ガムテープ案内表示」を作りだした佐藤修悦さんインタビュー ！『修悦体』はこうして生まれた 皆さんは、「修悦体」という書体をご存じだろうか？ 佐藤修悦さんというガードマンの方が、ガムテープを使って作り出した書
webフォントを120%活用するための基礎知識&最新動向 - Speaker Deck
## webフォント/OpenTypeの仕様 - CSS Fonts Module Level 3 - https://www.w3.org/TR/css-fonts-3/ - OpenType Font Variations overview - Typography | Microsoft Docs - https://docs.microsoft.com/ja-jp/typography/opentype/spec/otvaroverview - svg - Scalable vector graphics table - Typography | Microsoft Docs - https://docs.microsoft.com/ja-jp/typography/opentype/spec/svg ## コーポレートフォント - 小林章×小林豊 | こちら、銀座 資生堂 センデ
デザイナーが持っていたい、すごい新作フリーフォント素材54個まとめ
全体のイメージを決める重要な要素のひとつ「フォント選び」。素材がありすぎてどれを使ったら良いか分からないと、悩んでしまうこともしばしば。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 商用可で完全無料！2017年公開のフリーフォント素材129個総まとめ デザイナーが持っていたい、すごい新作フリーフォント素材まとめ Handwritten Font Collection 収録されている5つの書体を一緒に利用するだけで、海外のカフェのようなオシャレデザインを完成できるフォントコレクション。 ※ 個人、商用利用
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
フォントオタクなデザイナーが本気で選んだ「美しいフォント」24選【フリー＆有償】
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立
どれもオシャレ！英語の筆記体フリーフォントまとめ
数多くあるフォントのなかでも、筆記体フォントは特に人気のスタイルです。取り入れるだけでオシャレな印象になる筆記体フォントをよく使われている方も多いのではないでしょうか。単に筆記体フォントといっても、リアルな手書き風のものから、そのままロゴとして使えそうなものまで幅広いデザインのものが存在します。 今回は、豊富な英語のフリーフォントの中から、無料でデザインに使いやすい筆記体フォントをまとめて紹介します。 ▼ノンデザイナーでも使える！デザイン簡単ツール みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】 専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。 英語の筆記体フリーフォント AggstockGravid AggstockGravi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴに適したフォントはこれ！有名ブランドから学ぶ、ロゴのデザインに使用されているフォントのまとめ
1日で100個以上のフリーフォントを調べたわたしがおすすめする、おしゃれな日本語フリーフォントサイトまとめ｜あいまいみーのきたろぐ
http://www.life-is-bitter.com/entry/2017/06/09/140542
好きなフォント。