作字をはじめたら良いことだらけだった｜ニョグ｜note
こんにちは！ニョグです。 SNS上で主に作字作品の投稿をしております(Twitter→@nyogu_design、instagram→ nyogu_design) ここでいう作字は、自分でオリジナルの文字デザインを作ることとします。 自分なりに文字デザインを作るってめちゃ楽しい。 作字を始めたきっかけは、会社でのデザイン業務が上手くいかず、何か表現の幅を広げるような練習をしようと思ったことからです。 今回は、僕個人の体験談として読んでいただけますと幸いです。 引き出し不足法学部出身、ちょっとお絵描き好きなぐらいで、大学4年から独学でデザイナーを目指し始めました。80社以上デザイン系の会社に落ちても、諦めきれずに勉強期間を延長して、なんとかインハウスのグラフィックデザイナーになれました(これについてはいつか詳しく…)。 入社したはいいものの、表現力が圧倒的に足りないことを実感しました。デザイ
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
文字サイズの比率と調和
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
Viewport Unit Based Typography | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/viewport-based-typography. We hope to fix this soon!). I talked about using rem and em for responsive typography and for building modular components in two blog posts previously. In both posts, comments about viewport based un
Managing Typography on Large Apps – CSS Wizardry
21 February, 2016 Managing Typography on Large Apps Written by Harry Roberts on CSS Wizardry. Table of Contents Proposal I’ve written before about managing typographical styles across larger projects, but an issue that I still see clients continually coming up against is that of specifically managing their headings across larger and more complex apps. The problem stems from the styling of the defa
Everything I know about responsive web typography with CSS — Zell Liew
Divi CSS – die 3 besten Möglichkeiten, benutzerdefiniertes CSS in Divi zu nutzen! EinleitungDivi ist unser Lieblings WordPress Theme für die meisten unserer Webdesign Projekte und es wird immer besser. Die letzten Performance Updates haben es geschafft, die ehemals furchtbar bloatigen Theme Dateien zu optimieren und Divi auch in der Performance ganz nach vorne zu bringen. Der größte Vorteil ist je
15 Super Useful Typography Tools and Frameworks
Nowadays, web design is almost 95% of typography. Typography includes the use of modern CSS techniques and web fonts, which makes it easy for you to obtain complex things carried out in no time. A web designer that gets the best typography tools can increase the aesthetic appeal of a website. These tools could make things easy and simple for you the way you render fonts. Moreover, you will have ad
type.js
Typography tools for better web type. Type.js allows you to write new CSS properties to take finer typographic control of type styles on the web. Implementation Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body. <script src="./type.js" type="text/javascript"></script> Next, add a style tag before the script, and write these new CSS properties
Web typography for non-designers | Presslabs
Mikey Ferreira Posted on February 27, 2015 and last updated May 31, 2019 #Why is web typography so important? Although a lot of today’s web content is highly interactive and image-based, language–and thus words–is still the basic means of expression on almost every single web page. Hierarchies upon hierarchies of titles and sentences, pages, paragraphs, columns, all prove the fact that the main co
Typesettings.css | Minimal CSS Framework
Docs Customize Showcase Github Download Basic Usage Include typesettings.css in the HTML file’s <head> section: <head> <link rel="stylesheet" href="[path]/typesettings.css"> </head> 📣: If you are using typesettings.css as is, don’t combine it with other frameworks. Also, basic resets are included, there is no need to use Normalize.css or Sanitize.css. Add data-typesettings attribute to the direct
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
Gridlover
Gridlover Establish a typographic system with modular scale & vertical rhythm. Try Gridlover No signup, always free Fiddle with the font size, line height and scale factor sliders and watch the typography dance. You'll get it right away, we promise! The app loads faster than a demo video would, so just go ahead and try it. What is vertical rhythm? Read Compose to a vertical rhythm. What is modular
黄金律を使ってデザイン性の高いウェブサイトを作る方法
by arnoKath 美しいウェブサイトを作ることは単純にユーザーの気分をよくするだけではなく、パフォーマンスを上げると言われています。ウェブサイトのデザイン性を上げるには使用するフォントも大切ですが、フォントの大きさも重要な要素。そこで、黄金律を使ってフォントサイズを決めることの重要さや方法をAdditive AnalyticsのCEOであるLaura Diane Hamiltonさんがまとめています。 The Golden Ratio and Typography - Laura Diane Hamilton http://www.lauradhamilton.com/the-golden-ratio-and-typography ウェブサイトに情報を記載する上で、フォントのサイズに階層を設けるとユーザーを情報へ正しく導くことが可能であるため、ウェブサイト上のフォントサイズは複数のも
デザインに自信がつく、タイポグラフィの基本
第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」にて講演。［2014-04-19］ ちょっとした工夫で“普通のテキスト”を“デザインされたテキスト”に変えることができます。今までのWEBデザインではデバイスフォントという制約もあり、DTPと比べるとタイポグラフィはあまり重要視されてきませんでしたが、高解像度のデバイスやウェブフォントの普及などにより、その必要性は高まっています。適切で根拠のあるテキストの扱い方を学び、あなたが制作するデザインに自信つくよう、DTP・WEB両方のデザイン経験を元にタイポグラフィと文字組版の基本を解説いたします。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animography
GitHub - 2metres/typographic: Easy SCSS or Stylus responsive typography with vertical rhythm, modular scale, font stacks, and more.
Nihon Typeface on Behance
On Web Typography by Jason Santa Maria