Changing the Header size and formatting

[ThatOneOutlier]

Hello, I’m not so familiar with CSS but would like to know how I can change the formatting and size of my headers using CSS? The size difference between them is huge and I’d like to make some of them bold with an underline, etc.

Thus far I only saw how to change the size of the body which is not what I want to do.

[hannesfrank]

Here are some use example CSS rules you can freely combine:

.rem-text.rem-header--1 {
  font-size: 32px;
  text-align: center;
  background-color: #e7e7ef;
  text-decoration: underline;
  font-weight: 900;
}

.rem-text.rem-header--2 {
  background-color: #efeff6;
  color: gray;
  font-style: italic;
  font-weight: 300;
}

.rem-text.rem-header--3 {
  background-color: #fafafd;
  font-family: monospace;
  font-size: 18px;
}

[UMNiK]

Would you mind sharing the pre-update default font-sizes for each header? And if it’s not too much to ask, the pre-update default regular font size and a selector for it as well as for selected document titles, please. (Tbh, I could just zoom out in browser, but that makes the emojis look too small)

[Dante_Gaxiola]

Hi, @hannesfrank ! I changed the Header 2 with this code, but it seems to affect the way these documents are displayed when zoomed in (as titles, I think). Is there a way to make these changes not affect the document title format? I hope I’m being clear. Thanks!

[Dante_Gaxiola]

Here is the solution:

@UMNiK

/* smaller and less bold headers, except for when they are zoomed into */
.rem-text.rem-header--1:not(.document-title) {
	font-size: 22px; /* regular text size is 16px */
	font-family: Segoe UI; /* Inter is the default */
	font-weight: 500; /* 700 is the default */
}

.rem-text.rem-header--2:not(.document-title) {

	font-size: 20px; /* regular text size is 16px */
	font-family: Segoe UI; /* Inter is the default */
	font-weight: 500; /* 700 is the default */
}

.rem-text.rem-header--3:not(.document-title) {
	font-size: 18px; /* regular text size is 16px */
	font-family: Segoe UI; /* Inter is the default */
	font-weight: 500; /* 700 is the default */
}

Thanks @UMNiK!

[Claude_Mundy]

Super useful! Thanks!