If i build my websites i always have an eye on seo. An well organized website structure with headings in the right order is mandatory today.
But if i use a hero title page, i often have only one or two words in it. If i turn off the site title and slogan in my website, this has to be H1 regularly. Not the best solution…
And if i use some text for “styling” some parts of the site, i don´t want to use headings because this would be the wrong meaning for google. Using a paragraph stack, i am limited in the text size and formatting (ParagraphPro is wonderful new stack!)…
How do you style your text? Is there a better way?
@jochenabitz
I’ve just released an update for Header Pro for you.
You can now select the tag as a div in addition to h1..6 and thus use all the styling features, scaling etc without it being marked up as a header.
v1.0.1 is now available via the stacks updater.
Is it possible to have italic text in Header Pro, perhaps with CSS?
It is possible yes, but first let me explain why I don’t make it a one click option.
By, italicising (or bolding) a font merely by using a bold or italic tag in the html (or a css style to do it) you will be asking the browser to faux render that font.
What this means is that you have not actually got an italic variant of the font loaded and so the browser makes its best attempt at either slanting or making the existing font heavier. This always results in less than ideal rendering of the font with jagged edges to a greater or lesser degree.
The Pro stacks are all about quality typography and as such have full facilities for loading web fonts and even sub-setting Google fonts (Google Fonts are dubious when we are speaking about quality - but I’ll let that go for now).
So, if you want and italic header, then clearly you should use an italic font for it in order that it will display to the same quality as the rest of your page.
With all that said if you really want to force it to faux render then simply add a custom class (the very bottom setting). For example if you entered, italic-header as a custom class, you could then add the following CSS either to the page inspector or site-wide if required.
.italic-header{ font-style:italic; }
similarly font-style:bold; will make it a stage heavier.
So, there you go, typography rant over You can do it - but it is a low quality short cut and you should really make a small subset of the font to handle such situations.
How about using an italic font (if available in google fonts, for example) and use an italicised font as a fallback? With an exclamation mark in the settings.
@jochenabitz I should add the option to load the italic variant of a google font loaded in Header Pro, just like Paragraph Pro does. To be honest I don’t know how it went missing from there in the settings - I’ve only just realised that.
Obviously the same warnings as I mentioned previously apply if the font does;'t actually exist in italic form.
Thanks @tav. Makes perfect sense. I just couldn’t figure out how to set the italic variant for a google font and wondered if i was overlooking a setting in the stack controls. These are truly remarkable stacks - a giant leap forward for RW!
@jochenabitz@thang I’ve just had a chance to check and the option is actually there already!
I will however be removing the bold setting from that drop down as it is not appropriate for headers and should not have been left there for google fonts. The "boldness’ is controlled by the font weight of the available fonts.
@jochenabitz@thang
Further update - the reason that you can’t see that control is that I have mistakenly enabled it with the Segment 1 google font selection and not the the main google font selection.
When I tried it I had segment one enabled thus it appeared for me.
Hi, Thanks for a great stack.
Header Pro looks like it could be very handy. I just have one question, how do I change the font selection. I have selected “Header Pro - Font” and changed for a test to Font Vault 1 but this has no effect on the font displayed. I tried with a few other settings too but the actual font displayed doesn’t vary from the theme font. Do I need to download another plugin or how do I actually change the font displayed. I’m testing on Tesla Pro theme same as BWD used on their site.
Many thanks Scott
@scottjf At the moment you can use Google fonts or web fonts that you host yourself - so pretty much anything you like. You can even load a web-font in one Header Pro stack (by selecting the “Load New” button) and then share it between all the others on the page (by selecting the “Existing” button) by using the name you give to it.
Font-Vaults are a setting ready for a new stack that will be released within the next couple of weeks. I can’t say more at the moment about it unfortunately but it will make professional font management super easy.
If you need any more help with fonts of any sort just email me via support [at] bigwhiteduck [dot] com
You can do it - but it is a low quality short cut and you should really make a small subset of the font to handle such situations.
