Daniel Hruška's Blog

Container queries and responsive typography

2023-03-10T00:00:00.000Z

If you were designing and styling web components containing text, you‘ve ran into an issue. You’ve wanted the text to have dynamic size based on element size. Container Queries have enabled just that.

Having said that, setting font size to CQ unit alone is not doing exactly the thing. When the container is small, text is barely legible. And when the container is wide, text becomes huge.

We have to add boundaries for minimum and maximum font size. And that is a perfect use-case for function clamp(). You pass three values as parameters:

Minimum
Preferred
Maximum

For example:

font-size: clamp(1rem, 3cqi, 3rem)

Does this (you can resize the element):

That’s all. Ahoj.

One-liner: centering element with margin

2023-02-24T00:00:00.000Z

Supposing you have an element with width or maximum width, you are trying to center:

.foo {
   margin-inline: auto;
}

This is better solution than margin: 0 auto because that 0 on block direction could reset margins, you don’t want to change.

That’s all. Ahoj.

CSS units 'ch' & 'ex'

2023-02-21T00:00:00.000Z

You know them, the usual suspects:

rem: Relative size to root element size. I always set the base size on :root and it could be anything - 16px, 20pt, 3cm, …
em: Relative size to the element size. If you have for example 14pt on the root element, 2em means 28pt.
px: Pixel, the dot on the screen. Or it used to be. Now with high density screens one logical pixel could mean four more physical pixels.
% : Relative to the parent element. This is the main difference to em. Parent element could be one level up in the DOM.

Then there are more less known units which are dope, nobody uses them (or at least I don’t know anyone). But I do. At least one of them.

ch: Width of the character 0
ex: Hight of the character x, the good old x-height.

Cool, but what about that? The ex isn’t that interesting or practical. I’ve wanted to visualised it because as you can see, every typeface has distinct x-height. The ch not the other hand is handy and I use it all the time. It’s the em unit on horizontal axis.

Let’s compare to containers with dummy text. We want to have them approximately 40 characters wide. The first container has maximum width 20em, the second 20ch. As you can see, defining width using ch has more precise output. The text is approximately 20 characters wide.

.em-container {
   max-inline-size: 20em;
}

.ch-container {
   max-inline-size: 20ch;
}

That’s all. Ahoj.

Hello World

2023-02-20T00:00:00.000Z

First words

It seems to be a little bit cliché I named the first article “Hello World.” But you know what – it feels right on design slash dev related blog. I’ve had a website before but it didn’t have a blog and I didn’t communicate anything except my portfolio. So “Hello” again or “Ahoj” as we say here in Czech Republic.

English is not my mother language and sometimes you can find weird phrases, word combinations, wrong tenses or other grammar mistakes. I hope everything will be fine with you. My plan for content is no plan. I’ll write anything what comes in my mind – CSS, Less, HTML, Pug, Sketch or random thought. In the upcoming months I’ll be starting to learning Blender a Three.js so maybe I’ll post interesting notes from that. But let’s start how I build this page first.

Under the hood

I’m a designer with skills in HTML, CSS and little bit of JavaScript. That said, I’ve decided to stay in these waters and build static website, even with a blog in mind.

HTML

I use Pug for generating HTML. What do I like about it?

Syntax based on indentation: tab, tab, tab
Stripping angle brackets and closing tags which makes code much cleaner
Templates for making global changes in few files
Calling JS methods within Pug file. For example, in template of this article I use toLocaleDateString() for date formatting
And loops, mixins, variables and other good stuff Pug offers

Styles

Styling is done by CSS (shocker). In this case I use Less as my favorite CSS preprocessor. When I’ve started to learn CSS years ago, company I work for had been using Less. So am I. I’ve used Sass with SCSS syntax in couple of projects but I didn’t see a reason to switch. Maybe I’ll try Sass with indented syntax, that could be nice. Anyway, what do I like about Less?

Organizing styles into multiple files
Nesting selectors
Mixins and variables for not doing the same thing over and over again. Good chunk of variables I need can be now done by pure CSS Custom Properties. That was not the case few years back
@import (reference) for making variables and mixins available in certain files without compiling the imported one

Writing

When thinking about a blog, Markdown is a must. I’ve been using Markdown for writing and notes more than 10 years. I’ve wanted my blog to be as simple as possible – throw .md files in a folder and make things happen. Thankfully there is gulp-mvb plugin which is pure gold.

Typography

Bookerly
Overpass Mono
Marvin Visions

If you’d like to read further articles, you can subscribe to feed with your favorite RSS reeder. Feed is done by Atom which is an alternative for RSS.

Daniel Hruška's Blog

Container queries and responsive typography

One-liner: centering element with margin

CSS units 'ch' & 'ex'

Hello World

First words

Under the hood

HTML

Styles

Writing

Typography

Subscribe