PROJECTS
CSS
You have to see Michael’s CodePen with literally growing letters. She used the
variable font Decovar and CSS animationsVariable fonts are a hot new thing happening on the web and
in graphic design in general. Variable fonts are packed into
one file – all the different styles for a font are in a single file. You
have bold, medium, light and italics included. Not only does it have
a better influence on performance (a variable font’s file size is
smaller than the sum of all the styles and there are less HTTP
requests) but you can also play with medium states thanks to the
interpolation of curves called masters.
If you’d like to find out more about web typography, I totally
recommend to subscribe to Jason Pamental’s newsletter called
Web Typography News (https://rwt.io/newsletter) – or read the
interview with him on page 26. It’s also fun to check out Mandy
Michael’s playful examples on Variable Typography (https://
codepen.io/collection/XqRLMb/). Michael explores new and exciting
creative opportunities for storytelling, design and expression in
ways standard fonts could never provide. She presents the demos
focused on designing web typography to adjust to various inputs,
situations or events, which might enable us to modify our fonts to
aid in storytelling or achieve improved readability and legibility in
different situations, environments or on larger or smaller screens.
If you’re also into technical and design details, you should
consider playing with the Glyphs app. With Glyphs you can create
fonts on your own – not only traditional fonts but also colour and
variable fonts, which makes it much more fun. There are plenty
of tutorials that will help you to dive into the application (https://
glyphsapp.com/tutorials).LEARN ABOUT
TYPOGRAPHY
IN-DEPTHCharacter unit
We can limit our text width or height depending on
the character unit. As Eric Mayer points out (https://
netm.ag/34QEc02), the ch unit represents the width
of the character ‘0’ (zero) in the current font, which
is of particular use in combination with monospace
fonts. It changes as the font family changes. We can
treat it a bit like an x-height but the ch is based on the
width of the 0 character instead of x.h2.contact-heading {
/*more properties in the CSS file*
...
max-width: 8ch;
}Word break tag <wbr>
Although this tutorial is based around CSS tricks
I also want to mention one HTML tag: <wbr>. This
is an HTML element that defines a word break
opportunity – a position within text where the
browser may break a line. In might be handy in
some situations – it can be used when a word is
pretty long and we’re afraid that the browser would
break the word in wrong places, for example a
telephone number.<wbr>+0043<wbr>234-343<wbr>234-234<wbr>Object fit
If you wonder whether we can control image
behaviour depending on the size of the container,
I recommend you check out the object-fit property.
This one defines how the content of an <img> or
<video> should be resized to fit its container. We
have four options: fill, contain, cover and scale-down. For
instance, with the cover value, the replaced content
is sized to maintain its aspect ratio while filling the
element’s entire content box..object-fit {
object-fit: cover;
height: 400px;
width: 100%;
}DECORATIVE AND CREATIVE ELEMENTS
Let’s move on to adding some new elements and
colours to our website.Conic-gradient
If you have ever wondered whether you could create
a pie chart only using CSS, the good news is you
actually can! And the solution for this brings us
to the conic-gradient function. It creates an image