Community Forums › Forums › Archived Forums › Design Tips and Tricks › Shamelessly Copying Apple's Typography Into No Sidebar
- This topic has 15 replies, 2 voices, and was last updated 7 years, 1 month ago by jjbwp.
-
AuthorPosts
-
March 2, 2017 at 12:19 pm #202354RegevParticipant
I love the No Sidebar theme for its simplicity and elegance. However, I feel like there's a lot of wasted white space, and that the content could "pop" a lot better. You know, much larger images, crisper, larger typography, etc.
So I browsed the internet for inspiration. And there I found it! The iMac page on Apple's website:
My question, how do I enlarge No Sidebar's content width (from its default 717 to, say 780, or 890, or something like that to experiment with), and then change all the typographical elements to the exact ones from that iMac's page? I'm still a newbie (trying to learn small things like that), and the inspection tool is a bit too confusing for my level.
Thanks a lot in advance.
March 2, 2017 at 2:31 pm #202370jjbwpParticipantRegarding the typefaces, Apple uses Myriad (from Adobe) on its site (as well as in other media). You would need to either subscribe to the Adobe Typekit service to use Myriad on your site, or purchase the web fonts from either Adobe's Typekit Marketplace or another service like Fonts.com.
You would then simply replace Playfair Display and Lato (the Google fonts used by No Sidebar) in your CSS. That could be done easily enough through a simple search-and-replace, but you'd need to make changes to the sizes, weights and line spacing to make the text appear exactly like it does on Apple's site.
March 2, 2017 at 2:48 pm #202372RegevParticipant1. Are Adobe fonts considered premium in quality compared to free ones, like Google fonts? In other words, could I replicate that look with a free one without compromising on quality?
2. How do I adjust the sizes, weights and line spacings to match it exactly? Just trial and error? Because No Sidebar is built around % and not absolute amounts like my inspector shows.
3. How do I make the content area a lot wider, for example 890 instead of the default 717? I found no mention of it in the function/stylesheet files.
Thanks a lot pal, appreciate it.
March 2, 2017 at 4:01 pm #202373jjbwpParticipant1. Yes, most of the typefaces available from Typekit are premium quality (Typekit also includes a few Google fonts, but generally only the best of them). Since Myriad, the typeface used by Apple, is a premium font by Adobe, you'll need to pay to get it.
The closest free alternative to Myriad is CartoGothic Std, but the free version is hard to find these days; probably one of the closer widely available open source fonts is Adobe Source Sans Pro (since Source Sans Pro is available through Google Fonts, you'd only need to change the font names in your CSS and functions.php files to use it in No Sidebar). You can see Source Sans Pro and Myriad side-by-side at http://www.identifont.com/differences?first=source+sans&second=Myriad&q=Go.
Microsoft's system font, Segoe, has been compared to Myriad, so you could include it in your font stack.
2. I recommend using a browser plugin to see the weights, sizes and line spacing used by a website (such as Apple's) -- I use Fontface Ninja (https://fontface.ninja). As far as changing these in your CSS, there's no other option than to manually go through and make the changes.
3. I don't know enough to give you good advice about changing the width of a content area, but there's a video of someone doing it with the Altitude Pro theme (albeit reducing rather than expanding the width) at https://genesisclubbers.com/9101/how-to-change-width-of-altitude-pro-home-page/.
March 2, 2017 at 5:53 pm #202377jjbwpParticipantI was actually curious about whether any of the weights of Myriad Pro were available as part of the free Typekit plan, and it turns out that a few of them are.
It looks like the upright and italics are available for bold and bold condensed weights.
You can learn more at https://typekit.com/fonts/myriad/availability.
All the weights of Source Sans Pro are also available in the free Typekit plan as well, of course.
March 4, 2017 at 7:02 am #202445RegevParticipantAwesome, thank you so much.
Managed to enlarge the content area, but now how do I call the adobe fonts onto my theme? I see this in my functions file:
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:400,400italic,700|Oswald:300|Playfair+Display:400,400italic,700', array(), CHILD_THEME_VERSION );
What do I replace it with?
And how bout PT Sans as a replacement for Myriad? http://joelcrawfordsmith.com/closest-font/font/myriad-pro
March 4, 2017 at 11:41 am #202459jjbwpParticipantIf you're simply substituting Source Sans Pro for Playfair Display and Lato, you can find instructions for working with Google Fonts at https://basicwp.com/add-google-fonts-genesis-theme/ (or you could go with the instructions at https://restored316designs.com/blog/2016/08/22/how-to-change-your-fonts-using-google-fonts/).
If you're replacing Google Fonts with Typekit, you'll remove the wp_enqueue_style with the Google Fonts from your function.php, follow the instructions at https://helpx.adobe.com/typekit/using/add-fonts-website.html, and then add the Embed Code to your header in WordPress using Genesis > Theme Settings > Header Scripts.
In either case, whether using Google Fonts or Typekit, you'll then need to go through the CSS and replace Playfair Display and Lato (as well as make whatever changes you find necessary to the size, weight and line height).
PT Sans is another possibility for replacing Myriad -- some of its letters are closer to Myriad than those of Source Sans Pro, while some of Source Sans' are closer than those of PT Sans. It is notable that Robert Slimbach, one of the co-designers of Myriad, oversaw the Source Sans Pro project.
March 4, 2017 at 12:57 pm #202460RegevParticipantThank you so much.
Does it matter if I include the font weight in the code? For example the default No Sidebar code for fonts is this (full of numbers of font weights):
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:400,400italic,700|Oswald:300|Playfair+Display:400,400italic,700', array(), CHILD_THEME_VERSION );
If I simply change it to:
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro', array(), CHILD_THEME_VERSION );
March 4, 2017 at 1:35 pm #202463jjbwpParticipantYes, you need to include the weight in the code - you call up individual font files for use, rather than the entire type family.
March 4, 2017 at 1:40 pm #202464RegevParticipantBut if I call up the extra light or extra bold and all those that aren't the usual normal/bold/italic, how do I use them in the copy? Do they automatically render when I use font-weight that is too light or too bold?
March 4, 2017 at 2:12 pm #202466jjbwpParticipantAny of the weights you use -- whether regular or light, etc. -- is applied to text using CSS.
Therefore, for example, let's say you wanted to render your H3 headings using Source Sans Pro Light. Your CSS might then be something like this:
h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 36px; font-size: 3.6rem; font-weight: 300; line-height: 1.6; }
I'm not sure, however, what happens if you're talking about using the "bold" button in the visual editor when composing a post, but instead of bold you want the text to be semi-bold. I think that, if you haven't called up the bold font in your functions.php, the browser simply does its own job of rendering the text as bold (just like it does to italicize text when there are no italics fonts), but this of course doesn't look very good (and would be far from the semi-bold you wanted).
The way around that would be to type up your posts in the textual (non-visual) editor when composing a post. You would then have to type in the class tags for any text that needed to display as semi-bold. That would, of course, be a pain, but I cannot think of an alternative (beyond doing what many people, including myself, do, and simply not using bold within the body copy).
March 5, 2017 at 12:14 am #202492RegevParticipantThanks a lot mate.
Now what happens if I call up Myriad Pro? Where would I put my license?
March 5, 2017 at 12:30 am #202493RegevParticipantp.s what do you mean you're not using bold? why don't you simply call up the bold version of the font?
March 5, 2017 at 9:15 am #202506jjbwpParticipantHow licensing would be handled with Myriad Pro depends on how you're getting the fonts.
If you're getting the fonts through Typekit (either "renting" them with a subscription, or purchasing them through the Typekit Marketplace), then you don't have to put a license anywhere. Instead, your unique Embed Code tells Adobe's server that you have the license for those fonts.
If, however, you've purchased the fonts from a third party like Fonts.com, then you'd handle the license in whatever way their directions specify.
As far as my not using bold in my copy, the reason is simply that I've worked for decades with print publishers, and in print you'll very seldom see bold used in the body of a book or article. This convention is carried over to the web -- look at articles on websites for major newspapers and magazines, and you'll seldom see words in boldface within an article's main text.
Instead, we generally limit our use of bold to headlines, headings, some captions, etc. that organize information and direct the reader.
You can see this on the iMac page to which you initially referred. All of the bolder text on that page is a heading: "Retina. In colossal and ginonormous" is an H2 (with further styling with a "hero-headline" class), and "For the 4K camera in your pocket" is an H3. Their use of boldface is very limited and, since the only bold is via headings, it can all be carefully styled using CSS.
March 5, 2017 at 10:40 am #202507RegevParticipantVery interesting. I still don't understand why not just call up a bold version of the font in the Functions.php when possible?
March 5, 2017 at 11:15 am #202508jjbwpParticipantYou can certainly use boldface in your body if it suits your purposes. If the bold weight of your typeface of choice gives the look you want, and your style of writing and formatting benefits from using boldface text within paragraphs, then go for it. There are publications that do so (particularly on the web).
The H3 I mentioned above that is on the iMac site is in bold (although that's also the only bold used; all other heavier weights on the page seem to be medium or semibold). If your goal is to style your text similarly to Apple's, you'll be using primarily lighter weights.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.