2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
はてなエンジニア世論調査: 開発環境のフォントなに使ってますか？ - Hatena Developer Blog
こんにちは、スマートフォンアプリケーションエンジニアの id:yutailang0119 です。 突然ですが、ターミナルを毎日使っていますよね？エディタと触れ合わない日はないですよね？ ということで、今回は "はてなエンジニア世論調査" と題して、開発環境のフォントになにを使っているかのアンケートを取ってみました！ ちなみに自分はiTerm2では Monaco 14pt、1番使うエディタのXcodeでは SF Mono Regular 11pt です。 エディタではシンタックスハイライトが効き、小さい文字でも大体読めるので、iTerm2よりも小さいのです。 (Xcode Themeは自作しています。) 調査結果 フォントの種類 Monaco: 21.2% SF Mono Regular: 11.5% Menlo Regular: 5.8% Ricty Discord Regular: 5.
CSSを使ってアルファベットを“描く” Webの進化も見える「CSS SANS」 - はてなニュース
AからZまでのフォントを、「CSS」だけを使って制作したプロジェクト「CSS SANS」を見つけました。その意外性から、はてなブックマークでも話題を集めています。企画・制作は巣籠悠輔さんと各務将成さんです。 ▽ CSS SANS 本来CSSは、Webページのレイアウトや文字間の調整に使われるもので、文字のデザインはできませんでした。そこで、CSSで使えるさまざまな要素を組み合わせることで、文字のデザインを試みたそうです。 ブラウザのバージョンによってCSSのバージョンが違うので、表示されるWebページの見た目が異なります。古いバージョンのCSSでフォントを描こうとしても、繊細な表現ができずに文字がつぶれます。新しいバージョンになるにつれて複雑な表現ができるようになり、文字をきれいに表示できます。その新旧の差をフォントとして見せることで、Webの歴史を視覚化しているそうです。 さまざまなブラ
オリジナルフォントを使ったデザイン - クックパッド開発者ブログ
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか？ ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
GitHubで使用されているアイコンフォント「Octicons」が一般公開を開始
世界中のソフトウェア開発者のための共有ウェブサービスであるGitHubは、同サイトで使用されているアイコンフォント「Octicons」を一般向けに公開を開始しました。 Octicons http://octicons.github.com/ 公開されたアイコンフォントの一覧がこちら。GitHubが使っているアイコンだけあって、開発系のWebサイトやソフトに特化したアイコンが揃っているといえます。 サイトで各アイコンをクリックすると、各アイコンの文字コード(Unicode)やサイト埋め込み用のタグが表示されます。 フォントをPCにインストールするには「Download Octicons」をクリックし、圧縮ファイル(zipファイル)をダウンロード。 ファイルを解凍し、「octicons-local.ttf」をインストールすると、ローカルでもフォントを使用することができるようになります。 各アイ
CSS3での日本語縦中横を考える - ちくちく日記
【問題】 日本語縦組で文字が縦中横されたとき、組まれた文字の文字幅はどうなっているのが正解か A. 1文字の幅（1em）に納める B. 何もせずそのままの幅にしておく ▲（左）A. 1文字の幅（1em）に納める （右）B. 何もせずそのままの幅にしておく 何の話をしているのかというと、これ、、CSS Writing Modes Level3で定義される日本語縦組での縦中横の処理の話である。 先日、村上さん、小形さんお二人の呼びかけで「fantasai（ファンタサイ）さんを囲む夕べ」という飲み会が開催されました。 W3C CSSWG Tokyo F2Fのため来日中のfantasai twitter.com/fantasai/statu… を囲む夕食会を来週に計画してます。興味ある方は私にDMください。— 村上真雄 MURAKAMI Shinyuさん (@MurakamiShinyu) 201
デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。 今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。 GoogleWebフォントを使うメリット GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。 SEO対策になる 修正が簡単に行える 選択してコピペできる 拡大縮小・高解像度画面（Retina Displayなど）でもボケない 使わない手はありません。 GoogleWebフォントの使い方 使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。 今さらながらWe
「M＋と IPAフォントの合成フォント」が最高にキレイです。 - 『ちよろず。』
今日はチョイネタです。MacOSを使った後にWindows環境に戻ると、まずゲンナリするのがフォント表示の汚さ・・・。MacOSだとこんな感じ。それが、Windowsに戻るとこんな。これは耐えられませんよね・・・。そんな僕が愛用しているのが「M＋と IPAフォントの合成フォント」です。M+ と IPAフォントの合成フォントこのフォントをインストールするだけで、こんな感じになります。部分的なので分かりにくいかもしれませんが、ずいぶん雰囲気が変わって良くなりましたよ！そして、合成フォントのサイトを久しぶりに見てみたら等幅フォントもリリースされていました。MSゴシックだと、等幅もこんな感じです。そこに「M＋と IPAフォントの合成フォント」の等幅版を入れてみるとこんな感じになります。おお、なんか英字がカッコいいです。テキストエディタ（秀丸）とメーラー（Thunderbird）の等幅フォントも早速
プログラマーが好きなフォント:アルファルファモザイク
文化祭でカセットコンロ４台の上に鉄板２枚載せて焼きそばを作っていたらガスボンベが爆発、生徒１５人負傷…私立豊南高校
女の子っぽい字の手書きフォント9つ*二十歳街道まっしぐら（FC2ブログ時代）
女の子が書いたような字が書けるフォントの紹介です。 まずは、あんずもじです。 ■あんずもじ サイト：http://www8.plala.or.jp/p_dolce/font2.html ダウンロード：http://www8.plala.or.jp/p_dolce/font2.html サンプル： 丸みのある字が書けます＾＾；絵文字もあります。 以下に、その他8つの手書きフォントを紹介します。 ■みかちゃん サイト：http://www001.upp.so-net.ne.jp/mikachan/ ダウンロード：http://mikachan.sourceforge.jp/dl.html サンプル： ■あずきフォント サイト：http://key.milkcafe.to/azuki/ ダウンロード：http://key.milkcafe.to/azuki/font/index.html サンプ
プログラミングに適したフォント10 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers プログラマはエディタ選びに熱中することがある。またエディタで使うフォント選びに熱中することもある。大抵の場合は文字の判別がつけやすいかどうか、インデントがみやすいかどうかを重視するため等幅フォントが採用されることが多い。しかし一度に多くの文字を閲覧できるという理由でプロポーショナルなフォントを選択することもある。 どのフォントを選べばいいか迷ってしまうところだ。そこでCraig Buckler氏がSitePointに掲載した10 of the Best Programming Fontsに注目したい。プログラミングに採用できるフォントとして10個のフォントが紹介されている。フォントの表示例が画像で掲載されており、比較もしやすい。紹介されているフォ
プログラミング時に使ってる Font - 宇宙行きたい
なんか最近、Font 何使ってるか聞かれる事が多いのでまとめておきます。 プログラミング時やターミナル上では 「Bitstream Vera Sans Mono」 を使っています。 http://www.gnome.org/fonts/ http://www.dafont.com/bitstream-vera-mono.font Ubuntu では標準で入っていますが、Windows や Mac でも普通に使えます。 bold ラブな人間なのでこれを bold で使用しています。 0(数字のゼロ)やO(アルファベット大文字のオー)、 1(数字のイチ)やI(アルファベット大文字のアイ)l(アルファベット小文字のエル) なども見分けやすくてお奨めです。
プログラミング向けフォント３２選 [K'conf]
Monaco のリンク先を、フォントファイルから http://www.gringod.com/2006/11/01/new-version-of-monaco-font/ に変えられたようですが… リンク先に “I’m not sure how the new version differs but I’m told its from a new Mac Book Pro.” と書かれているとおり、そこで配布されているフォントは Mac から取り出したものです。 フォントファイルはプログラムとみすことができ、その場合これは著作権による保護の対象となります。また、Mac から取りだしたフォントファイルを配布するという行為は、Mac OS X のソフトウェア使用許諾契約に違反しています。 というわけで、Monaco の配布記事にリンクするのはいろいろとマズイんではないかと思うわけですが、いか
![プログラミング向けフォント３２選 [K'conf]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2435916bdee1550d551c2ee50ba6a2764be3c7ad/height=288;version=1;width=512/http%3A%2F%2Fkenz0.s201.xrea.com%2Fimage%2Fblog%2F2008-10-13%2FAndaleMono11_t_mx.png)
ProFont for Windows, for Macintosh, for Linux
ProFont is a small bitmap font which is absolutely great for programming. It was made for Macintosh computers, but now it's also available for Windows and Linux/UNIX X Windows. For comments, questions and troubleshooting there is a ProFont/Sheldon forum now. If you've never read my Desperately Seeking ProFont file, you should do that before you go on: Click here to read. Did you read it now? Or do
GD-高速道路ゴシックJA-OTF (GD-HighwayGothicJA-OTF) 高速道路の文字を再現しよう計画 5r4ce2[Fiber Force2] pumpCurry's Website - fontJunction at hogera.com
ぱんかれはいつも「なんかないかのう」とつぶやきます。 しかし、このワードをつぶやいているときは面白いモノを作るきっかけを探しています。 高速道路フォントを作り始める前にも「なんかないかのう」とつぶやいていました。 最近はコンビニエンスにいろいろなものが簡単に実現できるようになりました。 調べることも、遊ぶことも、作ることも、何か始めることでさえ、ネットにつなげることができればすぐ完結できてしまいます。 そんな世の中を受け入れつつも、他の方の「こんなのないかのう」を満たすような、なにか変わったものをつくりたい。 サイト名称「5r4ce2(ファイバーフォースツー)」は、Fiber(繊維のような)とForce(力)、この2つを組み合わせたものです。 みなさんと、がっしり結びつきながら、新たな方向性という「力」を、世に発信していければと考えています。 いっしょに、私たちと楽しんでみませんか？ 20
ウノウラボ Unoh Labs: プログラミングに使いやすいフォントを選ぶ
yukiです。 人によってまちまちですが、見易さや生産性にかなり影響する(と思っている)プログラミング時のフォントについて紹介します。 マカーの方はデフォルトで十分読みやすいフォントが入っているので、ここではwindows向けとして紹介させて頂きます。 個人的に選ぶポイントは、 ゼロ・オーは斜線で区別がつく 日本語も使える 長時間見ても疲れない(一番大事) です。これいいよ！というのがあったら絶賛募集中です。 有名どころかもしれませんが M+フォント M+フォント posted by (C)フォト蔵 普段はコレを使わせていただいています。 自分的にはゼロ(0)とオー(O)の差が分かりやすく◎です。 ゼロの中にスラッシュやドットが入っていて読みやすく、等幅なので使いやすいです。 VLゴシックフォントファミリ 上記のM+を元に製作されたフォントです。 弊社CTOが過去に参加
Elementary, ... ドラクエ風に写真を説明
やはり、モダンブラウザの世界で戦うには Flash（ActionScript）も基本技能かと、日曜は Flash に取り組んでみました。デザイナが使うのを後ろから見てたりすることはあったのですが、しろうとなので、まずはオーサリングツールの Flash そのものの使い方から入ったのですが。。 Flash はつまり swf 用 IDE。Eclipse みたいなもん タイムライン ＝ Photoshop のフレームに時間軸を足したもの シンボルが自分のタイムラインを持っていることがある。これ、わかりにくかった。3次元を超えてる as が書かれたフレームには a と入る。ただし、ステージに置いたインスタンスに as を書くこともできるのでどこに as があるか見てみないとわからない。 つかめてきたので、ウェブアプリと組み合わせる方向をさぐっていきます。 Flash Player 8 以降の Ext
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What are the best monospace or fixed-width fonts to use for programming?
Wordmark
hereticanthem co.,ltd. » フォント探しに便利なサイトやツールまとめ