文字の「書体」＝フォントについて意識したことはありますか。新聞や本、スマホなどで読まれる文字にはその用途にあった様々なデザインの書体が使われています。そんな中、開発に１０年かけたある書体がいま、教育現場で注目を集めています。 大阪府和泉市で看板店を営む板倉賢治さん（５３）。板倉さんは看板制作の傍ら、定期的に自分で手書きした作品を１年ほど前からＳＮＳに載せるようになりました。 Ｑ．全部手書きですか？ 「そう、手書き。下書きはなしで」（板倉賢治さん） 国内でこの技術をもつ職人は数少ないといいます。そしてこの文字にはある特徴が。 「これ『角ゴシック』。角が角ばってるやつ。これ『丸ゴシック』。『ナール』って知らん？阪急電車の駅標、あれナールやで」（板倉賢治さん） 板倉さんは客が発注したイメージに合うように文字の形をあらわす「書体」にこだわりを持っています。その種類は『明朝体』と『ゴシック体』など、

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で

スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

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.

CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ

アンパサンド（&記号）やダッシュ（―記号）など、英文でよく使う記号。英文サイトで誤った使い方をしてしまうと恥をかくだけでなく、読みづらくなってしまいます。正しい使い方をマスターしましょう。 句読点記号や文法は、読みやすさに直結します。ユーザーエクスペリエンスの最適化に読みやすさは欠かせません。たった1つの句読点記号でも、配置次第で、納得できる文章にも、意味が分からないものにもなります。 Webデザインの約95%が文字情報です。11年前の情報ですが、現在でも当てはまります。コピーライターがユーザーの立場に立って文章を考える、Webデザイナーがライターの立場から改善に時間を費やすとき、コンテンツの読みやすさや、ユーザーの反応は格段に向上します。「コンテンツは王様」なのです。 読みやすさと文章の理解度を劇的に向上させるための記号の使い方を解説します。今回はコロン、カンマ、ピリオドのような基本では

スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ

サスガIE。 こちらの記事で紹介した制作事例のサイトで、「見出しは明朝で」というオーダーがあったのでfont-familyに游明朝を組み込んでいたのですが、IEでまさかのレイアウトずれ。 調べたら、ちょこちょこいろんなところで悲鳴が上がっている模様。 游明朝体・游ゴシック体の使用は注意しなくてはならない・・・　やってくれるねIE先輩！ – Qiita IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる – マイクロソフト コミュニティ 游明朝・游ゴシックとは？ 游書体は有限会社字游工房から出ている書体。 Winodws環境では、Winodws 8.1から、MacでもOS X Mavericksからプリインストールされるようになった。 特にWindowsでは、これまで明朝といえば美しいとは言い難いMS明朝系／OfficeにバンドルされているのHG系フォント（Off

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で作

<!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; vertical-align: baseline; } html, body { height: 100%; width: 100%; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; vertical-align: inherit; } .yu-mincho { font-family: "游明朝体", "Yu Mincho

（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デザイナーの長年の悲願であっ

フォントブログ 閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへアーカイ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?