WordPress TwentyFifteen font size

I’m a fan of WordPress and their themes, but I usually find a couple of little things that annoy me that I try and tweak. The main thing that stuck out for me was the font size (it was way too big for me) but making things just a little smaller isn’t a theme option and I needed to fiddle with the CSS.

WordPress has a handy CSS editor for adding styles to your site without having to modify the theme. You can access it from the WordPress admin by hovering over “Appearance” and clicking on the “Edit CSS” link.

A quick google search linked me to a WordPress Support Forum Topic about changing the font size, but changing the two CSS entries suggested was far from complete.

My CSS is not complete either, and I only really checked it in Safari, but I feel it is an improvement. I plan to continue making changes to the CSS as I make more posts and come across things, and will keep this page up to date with any changes I make.

Here is what I have:

.entry-title {
	font-size: 3.1rem;
/* from 3.9rem */
}

.entry-content, .comment-content {
	font-size: 1.5rem;
/* from 1.9rem */
}

.entry-content .more-link::after, .entry-summary .more-link::after, .author-link::after {
	font-size: 20px;
/* from 24px */
}

.entry-content h3, .entry-summary h3, .page-content h3, .comment-content h3 {
	font-size: 2.1rem;
/* from 2.4rem */
}

.entry-footer {
	font-size: 1.3rem;
/* from 1.6rem */
}

.posted-on::before, .byline::before, .cat-links::before, .tags-links::before, .comments-link::before, .entry-format::before, .edit-link::before, .full-size-link::before {
	top: 2px;
/* from 4px */
}

.page-title, .comments-title, .comment-reply-title, .post-navigation .post-title {
	font-size: 2.5rem;
/* from 2.7rem */
}

.post-password-form label, .post-navigation .meta-nav, .comment-navigation, .image-navigation, .author-heading, .author-bio, .entry-footer, .page-links a, .page-links span, .comment-metadata, .pingback .edit-link, .comment-list .reply, .comment-notes, .comment-awaiting-moderation, .logged-in-as, .comment-form label, .form-allowed-tags, .site-info, .wp-caption-text, .gallery-caption, .entry-caption {
	font-size: 1.3rem;
/* from 1.6rem */
}

.comment-metadata .edit-link::before {
	top: 5px;
/* from 8px */
}

Published by

Oliver

I am a web developer, I am a software developer.

Leave a Reply