Menu
Community /Pin to ProfileBookmark
@NogDogJan 19.2023 — #Not my area of expertise, but I'd prefer the 2nd approach, on the assumption that if someone decides at some point to change the font for a set of elements, you would just need to change one thing in the style section, as opposed to either changing the classes of a bunch of HTML tags, or having those class names be misleading. I.e., consider maintenance costs as well as initial development costs. :) YMMV
best practice: Elements with different font-families
Hello there!
I have a question regarding best practices when it comes to deal with HTML elements with different font-families.
Would you use one class per family and apply them to the HTML elements or would you group the HTML elements by font-families?
This is an example using one class per font-family.
[code]
<head>
<style>
.roboto {
font-family: ‘Roboto’, sans-serif;
}
.alegrya {
font-family: ‘Alegrya’, sans-serif;
}
.anek {
font-family: ‘Anek’, sans-serif;
}
</style>
</head>
<body>
<h1 class=”heading-1 anek”>Heading</h1>
<span class=”description roboto”>A description</span>
<p class=”paragraph alegrya”>More text</p>
<span class=”colophon roboto”></span>
<h2 class=”heading-2 anek”>Main titles</h2>
<p class=”long-paragraph roboto”>Much more text</p>
</body>
And this is an example grouping HTML elements by family
[code]
<head>
<style>
.heading-1, .heading-2 {
font-family: ‘Anek’, sans-serif;
}
.description, .colophon, .long-paragraph {
font-family: ‘Roboto’, sans-serif;
}
.paragraph {
font-family: ‘Alegrya’, sans-serif;
}
</style>
</head>
<body>
<h1 class=”heading-1″>Heading</h1>
<span class=”description”>A description</span>
<p class=”paragraph”>More text</p>
<span class=”colophon”></span>
<h2 class=”heading-2″>Main titles</h2>
<p class=”long-paragraph”>Much more text</p>
</body>
I personally prefer the first approach, but I want to know your opinion and if you have any other better approach.
Thanks a lot!
Sign in
to post a comment5 Comments(s) ↴
0
@NogDogJan 19.2023 — #Not my area of expertise, but I'd prefer the 2nd approach, on the assumption that if someone decides at some point to change the font for a set of elements, you would just need to change one thing in the style section, as opposed to either changing the classes of a bunch of HTML tags, or having those class names be misleading. I.e., consider maintenance costs as well as initial development costs. :) YMMV