Tag: harmful

Text-overflow: ellipsis considered harmful

Eric Eggert:

There are a few legitimate use cases for this technique. For example, you might have a table with titles and descriptions. To preserve more space for the title, you constrain the description to one line on small viewports to the one-line and you repeat the description on the detail page for this item.

However, I often see it used on items like buttons or even form labels to make them look nicer(?) or when aligning them vertically. But once you change the viewport or resize the text, the end of the text disappears.

I think “… if used in certain situations” belongs there, but it certainly makes for a better blog post title without it. As Eric says, there are legitimate use cases for truncating text. Maybe only a few, but legitimate nonetheless.

The ultimate goal is to prevent “losing” data, something that can certainly happen in CSS. Text that inadvertently overflows a container is lost in the sense that it’s simply not there. And if that text is simply not there, users will miss it, even if it is the best and most well-crafted call to action ever published to the web.

Eric points out that there is no way to make the text truncated by text-overflow: ellipsis visible. Once it’s gone, it’s gone (although screen readers seem to announce it). It’s practically lost data. You might be OK with that. That’s cool as long as you know what’s happening and it’s intended.

But here’s what Eric says that made me want to share this:

Don’t constrain the content to fit your design, make your CSS flexible to handle longer words gracefully.

Again, you might want to conform content to the design. But I’d probably argue, like Eric, that the design should adapt to the content rather than the other way around. I have a hard time recalling any situation where the text on a page is unimportant or without purpose to the extent that I’d be cool cutting if off at any arbitrary point determined by a CSS property. Maybe an archive of blog posts where each post shows an excerpt of the post content before truncating, but that’s not exactly a use case for text-overflow: ellipse.

CSS has the tools to make a flexible design that accounts for varying lengths of text. So maybe err on the side of writing defensive CSS… CSS that anticipates issues and knows how to gracefully handle different content scenarios. text-overflow: ellipsis might be part of your CSS arsenal for that. But it might also be throwing the baby out with the bath water. Worth asking whether losing that data is worth the cost of what that content is supposed to do before giving giving it a haircut.

While we’re talking about truncating text…

To Shared LinkPermalink on CSS-Tricks


Text-overflow: ellipsis considered harmful originally published on CSS-Tricks. You should get the newsletter.

CSS-Tricks

, , ,

font-weight: 300 considered harmful

Tomáš Janoušek:

Many web pages these days set font-weight: 300 in their stylesheet. With DejaVu Sans as my preferred font, this results in very thin and light text that is hard to read, because for some reason the “DejaVu Sans ExtraLight” variant (weight 200) is being used for weights < 360 (in Chrome; in Firefox up to 399). Let’s investigate why this happens and what can be done about it.

Why are people setting font-weight: 300; at all? Well, Mac people, probably. On my macOS Catalina computer, look at the differences between some of the default and built-in fonts between 400 and 300.

400 weight on the top, 300 weight on the bottom

I wouldn’t blame a designer for going using a 300 weight in some cases. In fact, 11 years ago I published a snippet called “Better Helvetica” that touted this.

body {    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;     font-weight: 300; }

But for Tomáš, whose default font is DejaVu Sans (a default on many Linux and Android systems) the font is difficult to read when the type is that thin. Part of the issue is that if a fallback font doesn’t happen to have a 300, the spec says it can fallback all the way to 100 if needed. I believe the technical term for that is pretty gosh-darned thin.

I’ll try to avoid that myself (or use it when I’m loading web fonts I know have it), but check out Tomáš’ article for a fix on your computer if this bugs you on many sites. This actually reminds me of the different Levels of Fix.

Direct Link to ArticlePermalink


The post font-weight: 300 considered harmful appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, ,
[Top]