Transcript

00:00 so let's figure out how we can use font
00:02 Pro to style our text and make it
00:04 beautiful beautiful hey everybody Joe or
00:15 come in here and in today's video we're
00:17 gonna be learning how to use the font
00:19 style stack inside font Pro and
00:21 essentially this stack allows us to
00:24 style our fonts right pretty
00:27 self-explanatory right and but there are
00:30 a lot of settings right I it is
00:33 jam-packed full of all kinds of style
00:35 settings and some very advanced
00:38 intricate settings for fonts and
00:41 typesetting
00:42 explicitly so we're gonna dive in
00:45 there's a lot of settings but the stack
00:46 is really simple to use so without
00:50 further ado let's jump on in and have a
00:52 look so here we are inside rapidweaver
00:55 and I've added a font style stack to the
00:57 page let's go ahead and create our first
01:00 style just clicking on this blue plus so
01:04 here we have our first style and let's
01:06 actually apply this style to this
01:09 paragraph here on the page so I'm going
01:10 to go ahead and say that this is going
01:12 to be my paragraph styles okay
01:16 and to apply this to the paragraph so
01:19 you can kind of see it live in edit mode
01:21 we're gonna go ahead and assign this to
01:24 style vault on number one and I made
01:28 sure in my foundation paragraph stack
01:29 that I've chosen the style to be font
01:31 style one as well okay so from now on we
01:35 should see all of these Styles reflected
01:37 inside the edit mode or most of the
01:38 styles which is nice so as you see
01:43 inside the style stack
01:46 there are numerous buttons here and what
01:50 is nice is none no styles are applied at
01:54 all until you click a particular button
01:57 so if for this particular style if I
02:00 want to apply font spacing I would click
02:04 the space button and then only then
02:08 we'll all of these pertinent Styles be
02:11 applied
02:13 the style that I selected okay so right
02:18 now we're gonna kind of go through I'm
02:21 not going to spend too much time on each
02:22 individual setting but you'll see what
02:24 they are as I change them so obviously
02:27 line height this is the height of the
02:30 line and as you see as I'm adjusting
02:33 this you'll see how the height of each
02:35 line in that paragraph is changing okay
02:39 um letter spacing this is the spacing in
02:42 between each individual letter and word
02:46 spacing is obviously the the spacing
02:48 between each word break spacing break
02:54 spacing is if you in a paragraph or in a
02:58 text stack you add a break or a new line
03:03 this is the amount of space that that
03:06 new line will take up okay then we can
03:09 indent our paragraph and then we can
03:13 adjust the margin aligned so a lot of
03:15 times margin a line is really for large
03:18 headers if you want to adjust that to
03:21 the left or the right slightly so that
03:23 it looks more visually appealing um with
03:27 the rest of the alignment of the text
03:29 and other elements on the page next up
03:34 is going to be font sizing now this is
03:36 obvious pretty obvious we have our size
03:38 units you have sizes for small medium
03:41 large and extra-large okay now obviously
03:45 small is default right we're going
03:47 mobile first design here so small is
03:49 gonna be your mobile devices then you
03:52 get to define the break points for
03:54 medium large and extra-large now I
03:57 should note that the default break
03:59 points here from medium that is an
04:01 iPhone 6 plus the large break point is
04:05 an iPad in portrait and then the
04:09 extra-large is the desktop breakpoint
04:12 inside foundation which is just slightly
04:15 under iPad landscape
04:21 next we have the words styles and this
04:24 is a lot of kind of miscellaneous things
04:26 right so we have text alignment and
04:28 what's great is we have text alignment
04:29 for we can have text alignment for which
04:32 is default for everything and then you
04:34 can add a separate text alignment for
04:36 tablet and above right so maybe you want
04:39 to have centered on mobile but then you
04:42 would liked it to be left aligned on
04:44 desktop okay um whitespace this is if
04:49 you want wrapping of text so if I were
04:52 to set this to no wrap what you'll
04:53 notice is the entire paragraph here is
04:56 not gonna break it goes the entire one
04:58 line right sometimes that's something
05:01 that you'd want right um then we have a
05:03 lot of other wrapping ability so how do
05:06 we want to break words and hyphenate
05:08 them do we want to break in the middle
05:11 of a word or not break on a word do you
05:13 want to hyphenate those words okay
05:16 transforming of words this is do we want
05:19 it to be all capitalized okay do we want
05:22 it to be uppercase do we want to force
05:24 everything to be lowercase okay um
05:27 decoration this is if you want to
05:30 underline the text or do you want to
05:32 have an over line a strikethrough
05:34 or a combination an underlying an an
05:37 over line or all three next is the
05:41 decoration style so the underline style
05:44 do you want to be solid double dotted
05:46 dashed or wavy okay and last in this
05:53 kind of text structure is if you have a
05:55 bullet lists or a numbered list how do
05:59 you want those to be do you want it to
06:00 be a disk a circle a square and then for
06:02 order lists do you want it to be numbers
06:04 alphanumeric Roman things of that nature
06:07 now I want to take a break really quick
06:09 okay I know you probably or your mind
06:12 boggled with all those settings right
06:14 and how you can use them and why we
06:17 should use them and why do I want to
06:20 increase my letter spacing or my word
06:22 spacing or my line height like why okay
06:26 now there is a fabulous absolutely
06:29 fabulous video from a man called Tim
06:32 Brown and he's one of the head
06:34 honchos over at Adobe and he does some
06:37 amazing work and he has a great video
06:40 that I'm gonna play a short snippet from
06:43 right now that kind of explains the
06:45 importance of this spacing and structure
06:49 settings that I just showed you right
06:50 now
06:51 and when you should use them and how to
06:53 play with them for your particular font
06:56 and your font family or your typeface
06:58 right so watch this short snippet and I
07:02 I encourage that you watch the entire
07:04 video it's just under an hour but if you
07:07 want to learn about typography and
07:09 typesetting I encourage you to watch
07:13 this entire video but right now we're
07:15 just gonna play this really short
07:16 snippet this is a poor text block you
07:22 see this all over the web
07:23 Arial had a small size with long line
07:28 lengths and pretty loose line spacing a
07:31 lot of times on the web you see it much
07:33 looser than this we can make this better
07:36 we can make this better with a better
07:39 typeface at a better size with a better
07:45 measure or line length and more
07:50 sensitive line spacing I use the terms
07:53 letting and line height interchangeably
07:56 but they actually have very specific
07:58 meanings font size plus letting equals
08:04 line height what else can we do we can
08:09 adjust margins right we often talk about
08:12 typography and layout like they're
08:14 separate interchangeable things and
08:16 they're not they're the same thing and
08:20 we can adjust details things like
08:22 typographically correct punctuation and
08:24 whitespace open type features and
08:27 hyphenation in fact I can't really show
08:29 you hyphenation or open type features
08:31 here in keynote because they're not well
08:33 supported if you haven't seen marching
08:38 akari's death to typewriters on medium
08:41 check that out because he highlights a
08:42 lot of these specific details
08:47 so look at this now look at this
08:50 difference that's a huge difference
08:52 that's the difference between somebody
08:55 maybe thinking you're a little sketchy
08:57 or trusting you that's the difference
09:01 between a reader feeling frustrated or
09:05 comfortable that could be the difference
09:07 between someone leaving or staying to
09:12 read what happens if we use a different
09:16 font right now this is what we had
09:19 before and I'm gonna change the typeface
09:21 watch
09:23 that's all I changed was the typeface so
09:27 we have to adjust other things we have
09:30 to maybe use a different size and a
09:33 different measure and a different line
09:36 height we have to update the margins and
09:40 the details right you may not want to
09:44 use the same let's say open type
09:45 features from font to font because maybe
09:50 you're using an alternate letter in in
09:53 your first typeface and then you switch
09:55 typefaces you may not want the alternate
09:57 version of that same letter in the new
10:00 typeface and also different fonts have
10:03 different kinds of open type features
10:05 like one font may be completely loaded
10:07 with features and that increases its
10:09 file size you may not want to just
10:12 assume that you're going to be using all
10:13 of that if you change the typeface you
10:16 have to re-evaluate these details now
10:20 these are two very different takes not
10:23 so different but they're two different
10:24 takes on improving that first text block
10:28 that we saw that Arial text block and
10:31 here are the measurements totally
10:36 different measurements good typesetting
10:39 is not transferable it depends on the
10:44 typeface that's being used now why
10:49 aren't we improving our text like this
10:51 all the time why don't we just go and
10:54 make our typography better so I hope
10:57 that video encouraged you and gave you a
11:00 little bit more under
11:01 standing on why we want to use these
11:04 settings to adjust our fonts and that
11:07 you don't use the same settings for
11:08 every font or every type face right
11:11 depending on the size depending on the
11:14 typeface you're gonna want to change
11:16 your letter spacing or your line height
11:18 right and depending on how much space
11:20 you have for your text right which he
11:22 called the measure which is basically
11:23 the width of your stack area right
11:26 you're gonna want to adjust these
11:27 settings to be different so again I
11:31 encourage you to watch that entire video
11:33 and I'll make sure that I have the link
11:36 to the video in the notes here as well
11:38 as that video is embedded on the font
11:40 Pro documentation page because I think
11:42 is a video that everybody who buys
11:44 fought pros should watch so let's jump
11:48 back in and see some more of the
11:50 settings from the font style stack so
11:54 the rest of the style settings inside
11:56 the style stack are really
11:57 self-explanatory right
11:59 we have opacity obviously that's going
12:01 to change the opacity of that particular
12:03 font we have color which allows you to
12:07 customize the color as well as the
12:10 decoration color so if you remember
12:12 earlier inside the word settings we
12:14 could turn on text decoration
12:15 well this allows you to customize the
12:17 color of that decoration for example
12:20 let's say I had a black text and I
12:23 wanted to have the underline to be read
12:25 this is exactly how you would do that by
12:27 changing the decoration color next is
12:32 gonna be stroke
12:32 now stroke makes zero sense for
12:35 paragraph text okay it basically adds a
12:38 stroke and outline around every single
12:40 letter this really looks great for large
12:43 headers particularly bold headers right
12:46 so you don't want to do it on a thin
12:49 font it's just not gonna look great okay
12:52 but use the stroke on a large bold font
12:56 and it will it will potentially look
12:58 nice okay and then the last option here
13:01 is a shadow and the shadows are probably
13:05 going to be used mostly on headers right
13:07 you're probably not going to add it to a
13:08 paragraph depending on the size right
13:10 but yeah shadows here nice and what's
13:13 great about the shadow
13:14 is they respond to the size of the text
13:18 so if in responsive sizing if you're
13:21 shrinking the text down on mobile and
13:23 you wanted to keep that that shadow it's
13:26 going to shrink that shadow down
13:27 proportionally to the actual size of the
13:30 text which is really nice so I've gone
13:34 ahead and added another style now you
13:36 can add and create as many styles on the
13:39 page as you want and then you can assign
13:41 them to headers and to paragraphs or
13:44 using the font box stack and make sure
13:46 you check out the video on on how we can
13:49 actually apply our styles and our font
13:51 families to your content that's gonna be
13:54 a great video to watch to make sure that
13:56 you can really leverage this across all
13:57 of your content and that's basically it
14:00 for font styles right I mean as you saw
14:02 there are a lot of settings however
14:05 right it's very simple right you can
14:08 create kind of classes of styles that
14:10 you can reuse across your entire site
14:13 right throw this font styles into a
14:16 partial you know I have access to all of
14:17 those styles across all your stacks
14:19 pages which is really powerful right
14:22 you get to create your styles of the
14:24 text and the font that you want and then
14:26 you can apply those to all of your
14:28 content right very powerful right very
14:32 simple to use right and yes it will take
14:35 practice on some of those more nuanced
14:38 detail settings that we saw in terms of
14:40 you know playing with the word spacing
14:43 and letter spacing and the line height
14:44 and depending on how much time you want
14:47 to put into it you can really make some
14:49 stunning stunning things happen right so
14:53 I hope this helps you this is a great
14:56 tool for your toolbox I can't wait to
14:59 see how you can make the fonts and the
15:02 type on your website just pop and make
15:04 your sites that much better so thank you
15:07 very much everybody
15:08 make sure you check out the rest of our
15:09 font Pro videos and I'll talk to you
15:11 later bye"}]