Transcript

00:00 typography typography where art thou
00:03 beautiful typography hey everybody
00:14 Joe workman here and today I'm excited
00:16 to show you the new font Pro stacks for
00:19 rapidweaver now traditionally over the
00:21 years we've had very little control over
00:24 what fonts were used in our sites now
00:29 many things shipped with different
00:30 various configuration options for fonts
00:33 right you can choose which font the
00:35 theme developer wanted you to be able to
00:37 use now when I shipped foundation we got
00:42 a little bit more control right
00:44 we can choose maybe our own web fonts if
00:47 we knew how to do that right we could
00:49 use google fonts okay but it was very
00:52 limited but now with font Pro we now
00:57 have the ultimate font solution for
00:59 rapidweaver you can not only use your
01:02 own fonts and have font Pro configure
01:05 all of the font faces for you but we
01:08 also integrated with the world's top web
01:11 foundries and systems out there so you
01:15 can not only use your own fonts but we
01:17 integrate with Typekit with google fonts
01:20 and with typography calm with hofler and
01:23 company so with these options we now
01:27 have access to all of the most amazing
01:29 and beautiful typefaces across the web
01:32 and we can really stop using the
01:36 defaults of Helvetica
01:38 and Arial and you know everything else
01:40 out there and start really using some
01:43 fonts to make our web designs really
01:46 beautiful and standout so without
01:49 further ado let's jump in and see what
01:51 possibilities fought pro gives us now
01:54 this is the typical web font that you'll
01:56 see online here we have a gill sans
01:58 header and Helvetica body text
02:00 now these fonts are great and they've
02:02 been around for centuries and they will
02:05 still be around for centuries more but
02:08 these are things that we see all over
02:10 the place now not only are we you
02:13 the same fonts all over the place but or
02:17 also have very small text sizes we have
02:20 huge measures which is basically the
02:22 length of the line right our line
02:24 spacing our character spacing it's all
02:27 just default right and it's not custom
02:31 it and it doesn't make our sites stand
02:34 out so what can we do with font Pro to
02:36 improve this so here's a couple examples
02:39 of me taking the same exact text that we
02:43 just saw and applying different fonts
02:45 and styles to that text to really make
02:49 it stand out now in this first example
02:51 you see I used a beautiful script font
02:54 okay that a lot of times people actually
02:56 use images for a little on the web
02:58 because they can't figure out how to
03:00 actually use these script fonts on their
03:02 sites but now we can use this and have
03:06 text actually on our site which is
03:08 better for SEO we don't have images
03:10 being downloaded and we can now leverage
03:12 that in multiple places across our site
03:15 that font family we see that our font is
03:20 actually changed right we have a much
03:21 more attractive font on something
03:24 different right it's larger easier to
03:27 read and it's easier to read because we
03:30 adjusted some attributes of the font
03:31 such as the letter spacing the spacing
03:34 between the words the actual line length
03:37 which is the measure because if the
03:39 length is too long it just makes it hard
03:42 to read and unenjoyable to read now fall
03:45 pros ships with three stacks font box
03:49 font families and font styles so let's
03:53 first look at the font families stack
03:56 this is a stack were you actually going
03:59 to be defining the actual typefaces and
04:02 fonts that get imported into your
04:05 website and as you see when you click on
04:07 the blue button you can add a new font
04:10 family definition now we allow you to
04:12 use your own fonts via the web font and
04:15 inline font capabilities but we also
04:17 integrate with the biggest font
04:19 suppliers out there such as Google font
04:22 type kit and Hoffler & Co now each of
04:25 these font staff
04:26 has different settings to configure
04:28 where its font source files are pulled
04:31 from and also each of these stacks has a
04:34 set of settings that allows us to
04:36 configure what this font family is
04:39 applied to now the easiest ways to
04:42 actually just use what's called a font
04:44 of alt and you can apply this font
04:47 family to up to eight different vaults
04:50 that you can then use throughout your
04:51 site and we'll see how to use these
04:53 vaults later however you can also apply
04:56 them to page wide to actual paragraphs
05:00 or each one's or h2s or lists right so
05:04 if you want to make sure that all your
05:05 h1 tags have a particular font family
05:08 you can do that easily directly inside
05:11 the font stack you can apply it to a
05:14 custom CSS class as well as custom CSS
05:18 selectors now the font style stack
05:21 allows you to create font styles that
05:25 you can apply to various text components
05:27 around your site you can have as many
05:30 style rules as you want to add a new
05:33 rule you simply click on the blue plus
05:34 button the font style settings are
05:37 broken down so that you only enable the
05:40 actual settings that you want to apply
05:43 to that particular style rule so here we
05:46 can enable font spacing this allows us
05:49 to adjust the actual word spacing letter
05:53 spacing letting our line height of our
05:56 particular font we can adjust font sizes
06:01 and as you see here we have four
06:03 different break points for the ultimate
06:05 flexibility in your sizing across all
06:08 devices we have the ability to do some
06:10 word wrapping so text alignment word
06:13 wrap do we want to hyphenate do we want
06:15 to make sure that the text is all caps
06:17 by transforming it things of that nature
06:19 then we have some list settings for
06:21 bullet types and number types and
06:23 whatnot we also have some visual styles
06:26 such as opacity color do we want to add
06:29 a stroke or a text shadow to our style
06:33 and next you'll see that we have the
06:35 apply fonts to settings which is exactly
06:38 like what we saw in the font
06:40 we stack the one exception is instead of
06:43 vaults you can actually apply a style
06:46 rule to a font style and here we have up
06:51 to eight different font styles that you
06:53 can apply this to and then we can
06:55 reference that style later on so now
06:58 that we've defined our font families and
07:00 we defined our font styles how do we
07:03 actually apply this to our actual
07:05 content now I showed you before how
07:08 inside the settings you can actually
07:10 apply a font family or a font style to a
07:14 particular page scope right so you can
07:17 scope it to exact elements on the page
07:18 you can apply it to a CSS class or you
07:22 can also apply a custom CSS selector
07:25 okay however the most common way you're
07:29 probably going to use this is by using
07:31 vaults and font styles remember vaults
07:35 are assigned to font families and then
07:37 we have fonts styles that are applied to
07:39 a font style rule now if we just look at
07:42 the content that we saw earlier we'll
07:44 notice that this is a foundation header
07:46 and a foundation paragraph stack now
07:50 throughout all of my foundation stacks
07:51 as well as my total CMS stacks I've
07:55 integrated font Pro into all of them so
08:00 if I have my header I simply go into the
08:02 header settings and I select I can
08:06 select from either site style settings
08:08 or I can select any of the 8 vaults for
08:11 my actual font same thing for style from
08:16 the Styles I can choose a style that is
08:18 from site the foundation site styles or
08:20 I can choose a style that I've defined
08:25 inside my font Pro stacks now if you
08:28 have a stack that doesn't have font Pro
08:30 integrated into it this is where we can
08:33 use the font box stack that I mentioned
08:36 earlier
08:39 inside the font box stack it's just a
08:42 simple drag and drop you can drag and
08:45 drop any stack that you want inside of
08:46 it and then what you can do is you can
08:48 apply a vault or a style to that
08:52 particular
08:53 font box now we cannot guarantee that a
08:58 lot of the styles will get applied it
09:00 all depends on the stack and how the
09:02 stack was made and how the CSS for that
09:04 stack is done but a majority of the time
09:09 this should work and that about wraps it
09:11 up for our general overview of font Pro
09:14 now make sure you check out our more
09:16 detailed videos on you know the specific
09:19 services and integration points such as
09:20 typography comm and type kit and google
09:24 fonts and how to upload your web fonts
09:26 to your server and things of that nature
09:28 right but we saw how powerful font Pro
09:33 can be for us and how important
09:36 typography is to our site and how it can
09:39 make our site stand out against the rest
09:42 when you go to a site that has beautiful
09:44 razor-sharp text on the page you want to
09:47 stay and read longer than you would that
09:50 it on a site that just has the default
09:52 fonts now remember font pros ships with
09:57 three different stacks we have the font
09:58 family stack which controls purely the
10:01 actual font families that are imported
10:04 into the site for you geeks out there
10:07 this defines all your app font face
10:09 generation okay all your at font face
10:12 styles are done via the font family
10:14 stack we then have our font style stack
10:18 which generates the actual styles that
10:21 get applied to our text so the sizing
10:25 how you know how bold is it the color on
10:28 the shadows things of that nature right
10:31 so that's font styles and then we have
10:34 the font box stack that we can use to
10:36 apply our vaults and styles to our
10:40 content now if you're already using
10:43 foundation or you're using total CMS or
10:46 easy CMS all of these font Pro settings
10:50 are actually available already in those
10:53 stacks so if you had a foundation header
10:56 or a foundation paragraph to the stack
10:57 to simply choose your font Pro vault and
11:00 style settings directly from the
11:03 settings in those stacks
11:04 really cool this is really gonna be the
11:07 best way to build websites using
11:11 rapidweaver
11:12 so I'll stop jabbing around I hope you
11:16 use font Pro I hope you love it and use
11:19 it to make beautiful beautiful websites
11:21 I can't wait to see your designs so
11:25 thank you very much everybody I hope you
11:26 enjoy font Pro and have a great day bye"}]