おでんマンwithたわ神 @ugaidensetu サッポロ一番の謎すぎる「切り胡麻」フォント、メーカーにもなんでここだけフォント違うのか理由を把握してる人居ないって記事見て温かい気持ちになっている。 pic.twitter.com/U0MimlNcyx
Tweet Pocket このメディアを運営している日本デザインスクールでは、毎月120名ほどの受講生にデザインの指導をおこなっています。 WEBデザインを教えている中でよくあがってくるのが 「フォントって、奥が深すぎる……」 「けっきょく、どのフォントを使えばいいかわからん…」 という声。 その気持ち、めちゃくちゃわかります。 最近はCanvaなど無料のツールでも簡単にデザインが作れるようになりましたよね。 デザインのテンプレートが使えてすごく便利ですが、フォントの選び方がわからず、何度も何度もフォントを変えていた経験が私にもあります。 そこで今回は、プロのWEBデザイナーもよく使っているおすすめのフォントをジャンル別に181個まとめてみました。 気になるフォントがあればぜひ使ってみてくださいね。 現役WEBデザイナーおすすめの見やすいフォントTOP5それではさっそく、現役WEBデザイナ
現在のWindowsのフォントは、アウトラインフォント形式のOpenTypeをメインにしている。OpenTypeは、1997年にTrueTypeの拡張として発表された。TrueType形式のアウトラインデータに加え、CFF/Type2というPostScript用のアウトライン形式を含めることができる点がTrueTypeと異なる。 ここでは、OpenTypeフォントであるCascadia Codeを例に、フォントの概要やアプリケーションからのフォントfeature機能の利用について解説する。 そもそもCascadia Codeフォントとは? Cascadia Codeフォントとは、Windows Terminalと同時に開発されたオープンソースのフォントである。Windows Terminalと同時にインストールされるが、単体でもインストール可能だ。このフォントを例に持ち出したのは、オープン
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか? UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
モリサワ 写研書体のOpenTypeフォント開発で今後100フォントをリリースすることを発表 邦文写真植字機発明100周年を皮切りに 株式会社モリサワ(代表取締役社長:森澤彰彦 本社:大阪市浪速区敷津東2-6-25 Tel:06-6649-2151代表、以下モリサワ)は、2021年1月に発表した株式会社写研(代表取締役社長:笠原義隆 本社:東京都豊島区南大塚2-35-2、以下写研)とのOpenTypeフォント開発プロジェクトにおいて、数年内に合計100フォントに及ぶリリースを予定していることを発表します。 まずは、以前に発表した改刻フォントである「石井明朝・石井明朝オールドスタイルかな」「石井ゴシック」の13フォントと、写研のバリエーション豊かな見出し書体群を「写研クラシックス」としてOpenType化した30フォント、合計43フォントを2024年に提供します。そして2025年以降も、これ
まえがき ミャンマーでは公用語としてビルマ語が使われている。ビルマ語の表記にはビルマ文字を用いるのだが、このビルマ文字のインターネット上での使用は、混迷を極めていた。そしておそらく今もまだ…。なぜか? それは、Unicodeという文字コードの標準がありながら、Zawgyiというものが広く使われていたためである。なぜそのようなものが登場し、普及することとなったのか、この記事で解説する。 目次 まえがき 目次 凡例 この記事で使う名称について ビルマ語表記 コードポイント ラテン文字表記について Zawgyiの概説と歴史 Zawgyiとは Zawgyiのダウンロード Zawgyi誕生・普及の経緯 複雑なビルマ文字 ビルマ文字とUnicode 回避策としてのビルマ文字フォントの登場 Zawgyiの普及 Zawgyiの実装 実装の方針 文字の並べ替えをせず、左から右に書く 文字の形のバリエーション
はじめに デザイナーの toshi です。少しずつ暖かくなり畑仕事も捗ります。(この前、ジャガイモの植え付けとネギを 200 粒蒔きました。おいしく育つといいな 🌱 ) さて、この記事では私のデザインワークを格段に上げる「 Eagle 」とその使い方を紹介できたらと思います。 私は 2018 年頃から Eagle を使い始めてデザインワークの初速が上がったり、画像・素材管理のストレスが確実に減りました。 みなさんは、競合調査やベンチマークにするデザインなど参考にするデータはどのように管理していますか? ブックマークで管理?キャプチャ画像をフォルダで管理?画像管理アプリで管理? はじめに なぜベンチマーク管理と参照が大切だと考えているか 時間の有効活用 自分の基準「だけ」で判断しない 質より量でアイデア出しの初速を高める Eagleを使う前 Eagle とは Eagle の使い方 Eagl
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ(Fluid Typography)は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」(紹介記事)も第1・第2水準漢字対応です。 「マルミーニャM」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャM マルミーニャM -BOOTH マルミーニャMのダウンロード マルミーニャMの特徴 x0y0pxFreeFontの他のフォント マルミーニャMのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。
令和5年9/12にユニコード15.1が正式公開され、CJK漢字拡張-Iの他に“漢字構成記述文字”に指示記号4種、“CJK筆画”に拡張漢字構成記述文字の指示記号が1種類追加されました。ユニコードに採用されていない字の説明がしやすくなったのが重要です。𝚄+𝟹𝟷𝙴𝙵の一部除去指示記号は文字構成要素の一部が削除されていることを示す記号です。 漢字構成記述文字記号をラテン・ギリシャ・キリル各文字体系に応用した例で、ユニコードに採用されていない左右逆になる字形と逆になる字形を説明しやすくなりそうです。画像はにしき的フォントに含まれるユニコード未登録のラテン・ギリシャ・キリル各種字母を漢字構成記述文字記号で説明した例です。
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算(calc(1rem + 1px))できることが便利ですが、乗算除算(calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
そんな事もあり、4月10日は新しいフォントがいくつか発表された。今年の目玉はなんといっても「和文バリアブルフォント」であろう。 われわれが普段使用するフォントは、同じデザインでも細いもの、太いもの、横が詰まったものなどがそれぞれ個別のフォントとして提供され、1つのファミリーを形成している。 一方バリアブルフォントは、そうした文字の変形を1つのフォントで提供していこうという比較的最近のフォントフォーマットで、米Adobe/米Apple/米Google/米Microsoftが共同開発した。フォントパラメータとして、太さや字幅がバリアブルで変更できるため、従来はファミリーで提供しなければならなかったフォントデータが、1つのフォントで小さく提供できるというメリットがある。 もちろんデザインする側も、細いか太いかの2択ではなく「中間」も選べるし、縦長、横長も選べるので、表現の幅が広がるわけである。た
Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen. Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user inter
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位(em, rem, cap, ch, ex, ic, lhなど)の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語(CJK)の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能(Chrome 119 以降) 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
モリサワ 阪神甲子園球場と100周年記念共同プロジェクト 伝統の「甲子園文字」を受け継ぐ『甲子園フォント』制作が決定! 株式会社モリサワ(代表取締役社長:森澤彰彦 本社:大阪市浪速区敷津東2-6-25 Tel:06-6649-2151 代表、以下モリサワ)は、2024年7月24日に、創業者森澤信夫らが「邦文写真植字機」を発明して100周年を迎えます。同じく、阪神電気鉄道株式会社(代表取締役社長:久須 勇介 本社:大阪市福島区)が運営する阪神甲子園球場も、同年8月1日に開場100周年を迎えます。これを記念して、阪神甲子園球場とモリサワは、100周年記念共同プロジェクトとして、同球場のスコアボードで使用してきた伝統の「甲子園文字」を受け継ぎ、『甲子園フォント』として制作、デジタルフォント化することを決定しました。 阪神甲子園球場のスコアボードでは、1983年まで、職人が黒い板に毛筆で手書きをし
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 前回はフォントに基づく相対単位でしたが、今回はビューポートに基づく相対単位(vw, vh, lvh, svh, dvh, vb, viなど)の便利な使い方を紹介します。 Relative length units based on the viewport -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: vwとは CSSの単位: vhとは CSSの単位: vbとviとは、ブロックとインライン CSSの単位: lvh, svh, dvhとは ビューポート単位の解説動画
TOPフォーカス「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】 「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】 2024年6月12日 プログラミングフォント制作者 たわら プログラミングフォント制作者。コーディングに適した欧文・英数字フォントと、日本語フォントを合成し、新たなフォントを生み出す手法に定評がある。2019年5月に「白源(HackGen)」を公開したのを皮切りに、毎年のペースで合成フォントを手がけている。本業ではインフラエンジニアやWebプログラマなどを経て、現在ではSaaS企業にてSREを担う。自身の息子に「プログラミングを教えて」と頼まれた時、まずはプログラミングフォントの重要性を説いた。 X GitHu
さまざまなデザインに広く使用されているHelveticaのもっとも際だった特徴を模倣した、異世界のHelveticaを目指してデザインされたオープンソースの無料フォント「Overused Grotesk」を紹介します。 8種類のウェイトに可変フォントも揃っており、Webフォントとしても利用できます。最終的にはキリル文字など多言語にも対応する予定です。 上: Overused Grotesk、下: Helvetica Overused Groteskは異世界のHelveticaとして、Helveticaのもっとも際だった特徴を模倣してデザインされたフォントです。ライセンスはSIL Open Font License 1.1で、個人でも商用プロジェクトでも無料で利用できます。
【はじめに】この記事はBaaaaと何の関係もないただの学生(25卒)が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
「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月 イタリック体が追加 プログラミング向けのフォントとは プログラミングにおけるフォント選択は、単なる見た目だけの問題ではなく、それ以上の意味があります。ソースコードが読みやすくな
ダークモードは人気があるが、必須ではない。ユーザーはダークモードを好むが、ダークモードなしでも行動は変わらない。ダークモードをアプリケーションレベルではなくシステムレベルで考えているからだ。ダークモードをサポートする場合は、ダークモードでよくある問題を避けるために、そのデザインをテストしよう。 Dark Mode: How Users Think About It and Issues to Avoid by Tanner Kohler and Amy Zhang on August 27, 2023 日本語版2024年1月15日公開 ダークモードがかつてないほど流行している。少なくともこのトピックに関する多くのウェブデザインの記事を読む限りでは、ダークモードは必要不可欠とさえ思うかもしれない。しかし、ダークモードを完全にサポートし、「うまく活用する」ためには貴重な時間とリソースを必要とす
はじめに レスポンシブサイト構築の際に、何かと悩む(ちょっと煩わしい)のがfont-sizeの指定方法なのではないでしょうか? 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち(④が最もおすすめ!サクッと読みたい方は③(④の序章みたいな感じです)からどうぞ!) ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
小山真吾 | Shingo Koyama @KoyamaSkoyama CEO of Tecdia. The father of “kaika” precision nozzle for 3D printing/ Japanese maker/ TEAM非常識/ 3DP/ 仕事も遊びもチョイ残し禁止 linkedin.com/in/shingo-koya… 小山真吾 | Shingo Koyama @KoyamaSkoyama アメリカ人に読めて、日本人には絶対読めない英語フォント、だそうです。なんと書いてあるか?俺は読めませんでした。写真ピンチアウトして商品理解すれば、思わず出ることばは「おーーーーー」☺️ pic.x.com/lg1kkquvnm
こんにちは。デジカルチームの末永(asmsuechan)です。この記事は「フルスクラッチして理解するOpenID Connect」の全4記事中の3記事目です。前回はこちら。 www.m3tech.blog 9 JWT の実装 9.1 JWT概説 9.2 OpenID Connect の JWT 9.3 ヘッダーとペイロードの実装 9.4 署名の実装 公開鍵と秘密鍵を生成する 署名処理を作る 10 JWKS URI の実装 (GET /openid-connect/jwks) 11 RelyingParty で ID トークンの検証をする 12 OpenID Connect Discovery エンドポイントの実装 (GET /openid-connect/.well-known/openid-configuration) まとめ We're hiring 今回は全4回中の第3回目です。 (
最新バージョンの更新日は2024年4月8日 4時41分です。それ以前にダウンロードされた方は、再ダウンロードをおすすめいたします。 ヒント: コピペ 「いちきゅうげんご」のふぉんとを、はいふしています。 どなたでもむりょうで、だうんろーどできます。 りようのせいげんは、ありません。ごじゆうに、ごりようください。 (にじはいふのみ、きんしさせてください) とあるうちゅうの「いちきゅうげんご」を、むりやりこんばーとしたものですので、あまりきたいしないでください。 このふぉんとのりようによる、いかなるとらぶる、そんしつ、そんがいにたいして、せきにんをおいません。わたしは、むせきにんです。 げんざいのばーじょんは、20240408aです。 「てがきふう」のだうんろーどはこちら(ich1Q hand 20240408a)。「ちょくせんてき」のだうんろーどはこちら(ich1Q line 2024040
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式(H2Oなど)、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く