【特集】学力アップ！？読みやすいフォント 「ＵＤフォント」が教育現場で広がるわけ（MBSニュース） - Yahoo!ニュース
文字の「書体」＝フォントについて意識したことはありますか。新聞や本、スマホなどで読まれる文字にはその用途にあった様々なデザインの書体が使われています。そんな中、開発に１０年かけたある書体がいま、教育現場で注目を集めています。 大阪府和泉市で看板店を営む板倉賢治さん（５３）。板倉さんは看板制作の傍ら、定期的に自分で手書きした作品を１年ほど前からＳＮＳに載せるようになりました。 Ｑ．全部手書きですか？ 「そう、手書き。下書きはなしで」（板倉賢治さん） 国内でこの技術をもつ職人は数少ないといいます。そしてこの文字にはある特徴が。 「これ『角ゴシック』。角が角ばってるやつ。これ『丸ゴシック』。『ナール』って知らん？阪急電車の駅標、あれナールやで」（板倉賢治さん） 板倉さんは客が発注したイメージに合うように文字の形をあらわす「書体」にこだわりを持っています。その種類は『明朝体』と『ゴシック体』など、
CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
FontBase — a Free, Beautiful, and Fast Font Manager
Font management. Perfected.All platforms. Professional features. Beautiful UI. Totally free. FontBase is the font manager of the new generation, built by designers, for designers. A set of amazing featuresFontBase is built for designers, by designers. We understand what you need and deliever a set of great features to help you find the right font.
@font-face - MDC
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
何となくで使っていない？UX視点で考える英文サイトでの記号の正しい使い方
アンパサンド（&記号）やダッシュ（―記号）など、英文でよく使う記号。英文サイトで誤った使い方をしてしまうと恥をかくだけでなく、読みづらくなってしまいます。正しい使い方をマスターしましょう。 句読点記号や文法は、読みやすさに直結します。ユーザーエクスペリエンスの最適化に読みやすさは欠かせません。たった1つの句読点記号でも、配置次第で、納得できる文章にも、意味が分からないものにもなります。 Webデザインの約95%が文字情報です。11年前の情報ですが、現在でも当てはまります。コピーライターがユーザーの立場に立って文章を考える、Webデザイナーがライターの立場から改善に時間を費やすとき、コンテンツの読みやすさや、ユーザーの反応は格段に向上します。「コンテンツは王様」なのです。 読みやすさと文章の理解度を劇的に向上させるための記号の使い方を解説します。今回はコロン、カンマ、ピリオドのような基本では
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
【CSS】游明朝・游ゴシックがIEでずれる | 野良人（のらんど）
サスガIE。 こちらの記事で紹介した制作事例のサイトで、「見出しは明朝で」というオーダーがあったのでfont-familyに游明朝を組み込んでいたのですが、IEでまさかのレイアウトずれ。 調べたら、ちょこちょこいろんなところで悲鳴が上がっている模様。 游明朝体・游ゴシック体の使用は注意しなくてはならない・・・ やってくれるねIE先輩！ – Qiita IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる – マイクロソフト コミュニティ 游明朝・游ゴシックとは？ 游書体は有限会社字游工房から出ている書体。 Winodws環境では、Winodws 8.1から、MacでもOS X Mavericksからプリインストールされるようになった。 特にWindowsでは、これまで明朝といえば美しいとは言い難いMS明朝系／OfficeにバンドルされているのHG系フォント（Off
Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ ｜ Tips Note by TAM
2016.09.26 Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ 案件で起きたことの覚書です。 案件でのテキスト周りのルールは、 テキストは明朝体で表示する テキストはシステムフォントで表示する（＝Webフォントは使わなくてよい） ボタン等は指示がない限りテキストで表示する だったので、font-familyを以下のように指定していました。 font-family: Century, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; システムフォントで表示するので、Windows8.1、Windows10、Macでは、游明朝が表示されることになります。 流し込みのテキストだとまったく気になりませんが、CSSで作
游明朝体・游ゴシック体の使用は注意しなくてはならない・・・ やってくれるねIE先輩！ - Qiita
WindowsでもMacでも同じフォントが使えるということで游ゴシックを試してみたのですが、IEでレイアウトがずれてしまいました・・・。 キャプチャを見てもらえれば分かるかと思うのですが、文字の下に謎の余白？が出来てしまっています MSコミュニティにもこんな質問があがっていました。 IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる 相変わらずIE先輩には悩まされますね・・・ 検証コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>游書体テスト</title> <style type="text/css" media="screen"> html { box-sizing: border-box; font-size: 16px; line-height: 1.5;
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
Mac OS X：フォントの保存場所とその目的 - Apple サポート
Mac OS X には複数の「Fonts」フォルダがあります。フォントのインストール場所により、誰がどのような場合にそのフォントを使えるかが決まります。 Font Book でフォントを管理する フォントをインストール、削除、表示、整理、検証、使用、および使用停止する際は、Font Book (Mac OS X v10.3 以降に付属) を使うよう推奨されています。詳しくは、こちらの記事を参照してください。 Font Book を使わずにフォントを手動で管理する場合は、次のセクションを参照してください。 フォントを手動で管理する 注意：Mac OS X には 4 つ以上の「Fonts」フォルダがあります (ソフトウェアのインストール状況とユーザ数により異なります)。この記事では、これらのフォルダをパス名で区別します。パス名について詳しくは、こちらの記事を参照してください。 フォントをインス
フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする #qiita - Qiita
概要 Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする Font Awesome Font Awesome については、こちら。 Font Awesome 利点 見栄えが良くなる 基本的なアイコンの利用法を統一しておくと、見た目で構成を理解しやすくなる 内容に合わせたアイコンを利用すると内容を理解しやすい 欲しい情報がどこにあるか、高速でスクロールしている時に目印にし易い 手順 Icon 選び Font Awesome からアイコンを選びます ここでは、私が見出しによく利用している、 3Dキューブ（3個）を選ぶことにします。 フォント名は fa-cubes です。 fa-cubes を利用する場合は、以下のように記述します。 上記の HTML を Markdown 中に記述しておくと、この記事の「概要」のように表示されます。 本来は、 Font Aweso
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
え、ふぉんと？ モリサワの“あの”フォントが「Windows 10 October 2018 Update」に標準搭載 - やじうまの杜 - 窓の杜
Redirecting
ウェブ最大の「フォント問題」を巡ってアップル、グーグル、MS、アドビが団結
https://qiita.com/shinnn/items/5be7e8106189311559c1