Book Image

Practical Responsive Typography

By : Calonaci
Book Image

Practical Responsive Typography

By: Calonaci

Overview of this book

Typography is an essential part of any website’s design. It can help you stand out from the crowd, communicate with clarity, and cultivate a distinctive identity. Practical Responsive Typography demonstrates how to use typography to greatest effect. With this book you won't underestimate it's importance - you'll be in complete control over this crucial component of web design. From scaling and optimizing screen spaces to using a range of different web fonts, you'll quickly get up to speed with the practical considerations behind successful typography. But more than the fundamentals, you'll also find out how to go further by customizing typography designs to suit your identity.
Table of Contents (12 chapters)
11
Index

Onto the future – Shaping your text

All we did till now was beautiful text, well paired and calculated. But what if we want to break the old squared development and present our text inside a wide array of shapes?

Luckily, with the newly-introduced CSS3 shape element (which is still much unsupported) we can do it!

I will guide you through this, it will just be a little bit since we'll be able to fully use it in our day-by-day projects. Combined with clipping and masking, CSS filters, compositing, and blending we'll be able to make the web our playground more than ever. But it's time for us to focus on our typography.

You can apply a shape to an element on the page by attaching one of its properties, since the shapes right now are functions:

Element {
Shape-outside: polygon(parameters);
}

The currently existing functions are:

  • Circle
  • Ellipse
  • Inset
  • Polygon

Each of them is defined by a set of points. The properties instead are:

  • Shape-outside (wrap content around a shape)
  • Shape-inside...