# Text blurring inside of at smaller screen size SVG.
**URL:** https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404
**Category:** Help
**Created:** [June 20, 2024, 5:57pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404 "2024-06-20T17:57:32Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@dchung1997](https://talk.observablehq.com/u/dchung1997)
#### Post date: [June 20, 2024, 5:57pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/1 "2024-06-20T17:57:33Z")
Hi,
I’m working on some visualizations using d3js and noticed that when using viewport after a certain point the text and often shapes inside of the image begin to blur. Is there a good way of dealing with this? I’m not sure if increasing the font size would be the only option here or if there was an alternative. I already tried increasing the font size but it didn’t really work due to my size constraints. I’m using Observable Plot for a grouped bar chart and was wondering if there was any built in methods or tools that help deal with this issue.
---
### Author:  [@Fil](https://talk.observablehq.com/u/Fil)
#### Post date: [June 20, 2024, 6:17pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/2 "2024-06-20T18:17:12Z")
can you share a concrete example?
---
### Author:  [@dchung1997](https://talk.observablehq.com/u/dchung1997)
#### Post date: [June 20, 2024, 6:28pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/3 "2024-06-20T18:28:22Z")
The plot seems to work fine on independently. However, when I implement the same code inside of a grid it seems to run into issues.
> **[Plot: Grouped bar chart](https://observablehq.com/d/2bd65132dd65a6b4)**
>
> Facets group the bars by State; the fx domain, representing States, is sorted by the sum total of the heights of the bars (in other words, by total population). Each facet is a simple bar chart, with the ordinal x position ordered by age (keys).
Here’s an image of what it looks like in a dashboard.
When I move to resize to a bit smaller screen step the text ends up becoming illegible.
Resizing it and changing the number of visualizations per row can fix it but I kind of want it to be legible in the positions that they are currently in.
Is there something that I could be doing wrong? I’m not entirely sure.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [June 20, 2024, 8:10pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/4 "2024-06-20T20:10:17Z")
Is this in Safari? And how are you embedding the SVG into your page?
---
### Author:  [@dchung1997](https://talk.observablehq.com/u/dchung1997)
#### Post date: [June 20, 2024, 8:16pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/5 "2024-06-20T20:16:01Z")
Hi this is in Brave or a version of Chromium. But it seems to have the same issue in chrome. I just ended up changing my dashboard after testing some different font sizes and realizing that ended fixing the legibility problem more.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [June 20, 2024, 8:33pm UTC](https://talk.observablehq.com/t/text-blurring-inside-of-at-smaller-screen-size-svg/9404/6 "2024-06-20T20:33:31Z")
You could also experiment with different ways to optimize the text rendering (although it may still vary heavily from device to device):
> **[text-rendering - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering)**
>
> The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.