On my page, I would like to change the base font size from what seems to be 14px to 16px. By trial and error I have crafted the following custom CSS:
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
h1, .h1 {
font-size: 2rem;
}
h2, .h2 {
font-size: 1.71rem;
}
h3, .h3 {
font-size: 1.43rem;
}
h4, .h4 {
font-size: 1.14rem;
}
h5, .h5 {
font-size: 1rem;
}
h6, .h6 {
font-size: 0.93rem;
}
blockquote {
font-size: 1.25rem;
}
.navbar-default .navbar-nav> li> a {
font-size: 0.86rem;
}
.post-inner-content .cat-item {
font-size: 0.86rem;
}
.entry-title {
font-size: 1.71rem;
}
.entry-meta a {
font-size: 0.93rem;
}
.post-navigation a, .paging-navigation a {
font-size: 0.86rem;
}
.site-info {
font-size: 0.86rem;
}
.flex-caption h2 {
font-size: 2rem;
}
.flex-control-paging li a {
width: 0.86rem;
height: 0.86rem;
}
and it seems to be working correctly. The core idea is that only the html element provides pixel-based size and all other elements are changed to relate to it (the rem unit) using the ratio currently existing.
However, I’m afraid I might be missing some specific cases that don’t show on my page (but might in the future while the page matures). Also, I should perhaps update some other pixel-related sizes to maintain proportions.
What would be the right way to change the font size? It would be nice if the theme had this in its options…
