Is it possible to create a class that always simply downsizes the font-size of the current element? For instance, I’d like to have an h1-6 that are specific sizes and if a user adds the class .small-header, I’d like to set the font-size to 90% of that. I’m using Sass by the way if any of those functions will help.
That is exactly what the em unit does.
Only rather than a percentage, it’s relative to 1. So 90% would be 0.9em, 50% is 0.5em etc…
So if an <h2> tag is normally 20px, and you add the class .small-header you would like the <h2> to be 90% of that (or 18px)?
I think that is a bit more complicated than just using em, which gives you a font-size which is a percentage of the parent element’s font-size.
I don’t know Sass at all, but can’t you do calculations with it? I’m sure some Sass expert here would be able to point you in the right direction.
yes, that is exactly what I’d like to do. I tried em and it just sizes it to the 90% of current font-size of the div. I’m wanting 90% of what the font-size is normally set to for that element. I have all of those in a Sass variable array, but have no idea how to get to the next step.
With em it will need a sub-element within the header, as applying the class directly to the heading will scale relative to the parent size:-
3 Likes
Thanks Sam, I have indeed confirmed this and figured out that I should be using the small tag to accomplish this.
<h3><small>Header Text</small></h3>
I did consider the small tag, but was a bit unsure about the semantics of it, particularly within a heading.
At first I thought being a “presentational” tag, it does not have much in the way of semantics meaning, but on further investigation…
The small element represents side comments such as small print.
Note Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
https://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Which makes me uncomfortable about using it in a heading.
6 Likes
Other than the lack of semantic meaning, I would avoid using that tag there because it relies on a browsers default style for one tag to alter the browsers default style for a parent tag.
Although it might look OK in your browser I would not count on it looking OK for others.
2 Likes
The small tag is semantically incorrect in that situation and a waste of mark up when you have a phrase element wrapped in two tags for no good reason. 
You could make a case for having the small tag inside the heading tag if perhaps you had a main title first outside of the small tag and then in the small tag you could have some text that was an aside to the title( e.g. the sort of text you might add inside brackets to explain things).
<h1>Main Heading <small>(as good as it gets)</small></h1>
Oh course you havé to set the tag to display at the size you chose and not some browser default.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.