# Label font size

**URL:** https://talk.observablehq.com/t/label-font-size/2273
**Category:** Uncategorized
**Created:** [August 16, 2019, 10:24pm UTC](https://talk.observablehq.com/t/label-font-size/2273 "2019-08-16T22:24:21Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![ralphlombreglia](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ralphlombreglia/32/2045_2.png) [@ralphlombreglia](https://talk.observablehq.com/u/ralphlombreglia)
#### Post date: [August 16, 2019, 10:24pm UTC](https://talk.observablehq.com/t/label-font-size/2273/1 "2019-08-16T22:24:21Z")

</div>

I’m getting started embedding some Observable Viz on the web, but I find that my label font size is weirdly small, and I don’t know how to control it via CSS. Anybody have suggestions?

Thanks.

---

<div class="post-metadata">

### Author: ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [August 16, 2019, 11:46pm UTC](https://talk.observablehq.com/t/label-font-size/2273/2 "2019-08-16T23:46:37Z")

</div>

Many Observable charts are SVG elements made with D3. To change the size of labels with CSS, you can style the `text` element of the label directly with [`.style()`](https://github.com/d3/d3-selection#selection_classed) or give it a `class` name using [`.classed()`](https://github.com/d3/d3-selection#selection_style).

If you give a link to an example notebook you’re trying to embed, we could probably give more specific directions.

---

<div class="post-metadata">

### Author: ![ralphlombreglia](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ralphlombreglia/32/2045_2.png) [@ralphlombreglia](https://talk.observablehq.com/u/ralphlombreglia)
#### Post date: [August 17, 2019, 12:06am UTC](https://talk.observablehq.com/t/label-font-size/2273/3 "2019-08-17T00:06:42Z")

</div>

Hi bgchen,

I’m working with these right now, specifically:

> **[Marimekko Chart](https://observablehq.com/@d3/marimekko-chart)**
>
> An Observable notebook by D3.

> **[Zoomable Sunburst](https://observablehq.com/@d3/zoomable-sunburst)**
>
> An Observable notebook by D3.

> **[Zoomable Icicle](https://observablehq.com/@d3/zoomable-icicle)**
>
> An Observable notebook by D3.

Thanks.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [August 17, 2019, 9:05am UTC](https://talk.observablehq.com/t/label-font-size/2273/4 "2019-08-17T09:05:06Z")

</div>

All of these set the font-size on the SVG element itself. The easiest way to override it globally is to add a cell with the following content to your notebook:

```javascript
html`<style>svg { font-size: 12px !important }`

```

Alternatively you can modify the style property on the element before displaying it:

```javascript
chart.style.fontSize = '12px', chart

```

A third option would be to wrap the chart:

```javascript
html`<div class="custom">${chart}<style>
.custom svg { font-size: 12px !important }
`

```

---

<div class="post-metadata">

### Author: ![ralphlombreglia](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ralphlombreglia/32/2045_2.png) [@ralphlombreglia](https://talk.observablehq.com/u/ralphlombreglia)
#### Post date: [August 18, 2019, 1:04pm UTC](https://talk.observablehq.com/t/label-font-size/2273/5 "2019-08-18T13:04:57Z")

</div>

Gratitude!

I modified your advice a little bit by adding this to my css:

```
.chart svg { 
    font-size: 0.9em !important;
}

```

Now what I’m wondering is if there is a hierarchy of text “styles” in the labels of an SVG that I could somehow target, or does “font-size” have to control all the labeling?

Thanks.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [August 18, 2019, 3:58pm UTC](https://talk.observablehq.com/t/label-font-size/2273/6 "2019-08-18T15:58:03Z")

</div>

Standard CSS will work. If selecting elements by their tag name or path doesn’t suffice you’ll have to add custom classes.

---

<div class="post-metadata">

### Author: ![ralphlombreglia](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ralphlombreglia/32/2045_2.png) [@ralphlombreglia](https://talk.observablehq.com/u/ralphlombreglia)
#### Post date: [August 18, 2019, 6:05pm UTC](https://talk.observablehq.com/t/label-font-size/2273/7 "2019-08-18T18:05:00Z")

</div>

I know enough CSS for that, but what I don’t know is the structure of SVGs and how to pinpoint elements. Taking this as a stock example…

> **[Zoomable Sunburst](https://observablehq.com/@ralphlombreglia/zoomable-sunburst)**
>
> An Observable notebook by ralphlombreglia.

…I see this line near the top…

`.style("font", "10px sans-serif");`

…that clearly indicates font styling, but I don’t understand the significance of “tag name or path,” nor how to “add custom classes.”

Could you offer a concrete example or two?

Thanks.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [August 18, 2019, 6:15pm UTC](https://talk.observablehq.com/t/label-font-size/2273/8 "2019-08-18T18:15:02Z")

</div>

> [@ralphlombreglia](#):
>
> Could you offer a concrete example or two?

Perhaps you could explain which changes you are trying to make?

---

<div class="post-metadata">

### Author: ![ralphlombreglia](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ralphlombreglia/32/2045_2.png) [@ralphlombreglia](https://talk.observablehq.com/u/ralphlombreglia)
#### Post date: [August 18, 2019, 6:33pm UTC](https://talk.observablehq.com/t/label-font-size/2273/9 "2019-08-18T18:33:47Z")

</div>

A different example might be better. In this chart…

> **[Marimekko Chart](https://observablehq.com/@ralphlombreglia/marimekko-chart)**
>
> An Observable notebook by ralphlombreglia.

…I can imagine wanting to use slightly larger, bold-face text for each cell’s primarily label, and then use smaller roman text for descriptions or quant about market size, value, etc., as a simple example.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [August 18, 2019, 7:18pm UTC](https://talk.observablehq.com/t/label-font-size/2273/10 "2019-08-18T19:18:50Z")

</div>

If you look at the chart code you can see three occurences of `cell.append("text")`. These are the places where you’ll want to apply your changes, e.g. by altering the existing values.

Note that changes to `font-size` may require adjustments to the y position of the respective text labels. You may also want to set a different `alignment-baseline` for each `text` element.