Поднимите руку, если когда-нибудь сталкивались с такой ситуацией: вы получили текст со странными прямоугольниками или вопросительными знаками.

Рады представить вам историю создания проекта шрифтовой гарнитуры TT Marxiana.

Easy to implement, 3D typography for the web. Works with every font.

How an emerging CSS standard can fix old problems and raise the bar for web apps

certainlyakey starred ftlabs/ftellipsis

Scales up (or down) text so it fits perfectly to its parent container.

💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁

JavaScript polyfill for client-side hyphenation

he Equilateral Triangle of a Perfect Paragraph is a theory developed by Matej Latin in the Better Web Type course about web typography for web designers and web developers. Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony. The theory is explained in details in an article on CSS-Tricks.

certainlyakey starred tonsky/FiraCode

Fontie converts your desktop fonts into web fonts that work everywhere and puts them along with the CSS in one fine @font-face package. Various options give you the possibilty to fix and optimize your webfonts.

certainlyakey starred mnater/Hyphenator

CSS3 Text provides the ability to apply hyphenation to text, via the hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.

The practical guide to why laying out type never quite does what you want

Typography is an important part of web design nowadays and free services like Google Web Fonts or Adobe’s Typekit make custom fonts on the web a commodity.

Let’s take it slow and start with a core principle of typography, vertical rhythm. Vertical rhythm is about spacing body text or, more generally, vertical stacked elements, in a consistent manner to give structure and hierarchy to your content.

Some use the body text’s line-height as the measuring unit for the vertical rhythm. But using half of this value is a better choice because it can give you more reliability on automatic calculation of line-height for different font sizes using mixins.

But lately (several months) I’ve been thinking can we use SVG icons in Social Menu instead of icon fonts. Leland Fiegel picked up my question in Twitter and rolled his own idea. It’s not bad solution but what if we could do this without Javascript.

Why and how one should switch from icon fonts to SVG files, presentation given by Sami Keijonen in Exove's WordPress Café on May 10th, 2016.

px-em is a px to em tool which allows you to work out the em sizes from px. Just add the parent px size in the top box, required size in the bottom and you're done!

Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…