Publii site title and post titles

[PedroPesto]

In themes I have explored so far, the site title and post titles appear too large and take up too much space. I cannot find a way to hide them on a page altogether or at least to reduce their sizes. I would value help with this.

[Grosso2020]

Add CSS in Tools&Plugins -> Custom CSS. Example.
Single post:

.post__title {
   font-size: 25px
}

Lists post title

.c-card__title {
font-size: 25px
}

[candidexmedia]

Here are some more solutions:

Removing/Hiding Titles

I cannot find a way to hide them on a page altogether

Easy mode

Use Custom CSS as @Grosso2020 described:

.post__title {
   display: none
}

Complex mode

(Optional but recommended) Create a theme override.

Under [Publii sites directory] > [site name] > input > themes > [theme-override], open and edit the post.hbs file in the text editor of your choice.

Delete or comment out {{!-- like this --}} the following line:

<h1 class="post__title">{{title}}</h1>

This will remove the title for every post. If you want to be able to select which posts have a title using some kind of Post option, check out the Post Settings API.

Reducing the Size of Headings

or at least to reduce their sizes

Publii's themes typically make use of some nifty calculations to set the headings sizes. Although @Grosso2020's answer works perfectly fine as a quick and dirty solution, it will override the CSS calculations set to make the headings sizing ✨ responsive, fluid, and accessible ✨ as part of the type scale.

Here's an example from the Mercury theme's main.css file:

h1,
.h1 {
  font-size: 1.6018066406rem;
  margin: 0;
}
@media screen and (min-width: 20rem) {
  h1,
  .h1 {
    font-size: calc(1.6018066406rem + 0.6788907051 * ((100vw - 20rem) / 113));
  }
}
@media screen and (min-width: 133rem) {
  h1,
  .h1 {
    font-size: 2.2806973457rem;
  }
}

I would edit or override this base h1 calculation by adjusting the starting font-size rem unit (in this case: 1.6018066406rem). 1rem typically equals 16px.

I'm not sure how well-versed and comfortable you are with HTML + CSS @PedroPesto, so all of this might be a load of gibberish.

If you want something cut and dry, you can use @Grosso2020's answer, but I'd recommend using rem units instead of px pixels for font sizing for accessibility -- see:

• The Surprising Truth About Pixels and Accessibility
• Font Sizing For Web Accessibility Using CSS EM And REM Units
• Accessible Font Sizing, Explained

When resizing the main heading (H1), keep in mind that having a good contrast between paragraph text and headings is a good design practice. It allows your users and site visitors to quickly scan information. You can read more about typographic scales here:

• The typographic scale
• Typographic Scales - UI Design Handbook
• Visual Principles - Baseline Design Bootcamp (skip to "Visual Hierarchy" section)