After only a few weeks of being acquainted with Typekit and only a couple days after implementing it, the library is already growing. They announced today that the FontFont library will now be offered via Typekit.
This will more than likely be the precursor that opens the floodgates to other type foundries offering their fonts in this easy to use web font system. Right now, FontFont offers about 20 fonts on Typekit and as I said in my last post, this number will only grow. It's only a matter of time before we see type from Sudtipos, Process Type Foundry, and Darden Studio.
You can read the full article on Typekit's blog. If you're not aware of what Typekit is or how to use it, I'll tell you about it here.
Showing posts with label how to. Show all posts
Showing posts with label how to. Show all posts
November 18, 2009
November 16, 2009
How To Set Up Typekit
All of a sudden, it seems that we're entering a new era in web design. One of the most noticeable changes (as of late) is the use of fonts that designers actually want to use outside the ever-limiting web standard ones. Among various methods, we have Cufón which is an alternative to another experimental flash embedding technique referred to as sIFR. I have experience with sIFR having used it in Willoughby Design's website where we used H&FJ's Whitney. I must say that although sIFR was a great solution, we had a bunch of licensing and security issues which we needed to take into account. With sIFR aside, we now have Typekit.
In a nutshell, according to their site, "Typekit is the easiest way to use real fonts on the web." To date and with the experience that I have with some of the aforementioned methods, this claim is very accurate.
I first heard about Typekit a few months ago before they opened it to the public and I wasn't really sure what it was at first. They officially opened up shop a little more than a week ago and I'm glad I've finally had some time to explore it.
After proceeding, I was taken to a page of close to 100 fonts to choose from. It's a very respectable list and I imagine that the library will only grow. Very organized, you can search categories such as serif, sans serifs, to distressed and pixel. After searching, I selected a couple of my favorites. I have the basic free service which allows me to use 2 fonts on 1 domain which is fine for my purposes. You can upgrade (and pay) for more fonts across more domains.
Once I selected the font of choice (called Liberation Serif and now used in my headers), I opened the "Typekit Editor".
The process is literally that easy. If I wasn't writing this article while doing it, it would have taken me no more than 10 minutes to get a working font on my site. And although the code adds a little badge in the corner, it's not intrusive and doesn't really bother me. If I were to upgrade my account, the badge would not be required and I'm sure if I was really savvy, I could hide it. In conclusion, I am very impressed with the selection and ease of Typekit... I look forward to new features it has to offer.
In a nutshell, according to their site, "Typekit is the easiest way to use real fonts on the web." To date and with the experience that I have with some of the aforementioned methods, this claim is very accurate.
I first heard about Typekit a few months ago before they opened it to the public and I wasn't really sure what it was at first. They officially opened up shop a little more than a week ago and I'm glad I've finally had some time to explore it.
1. Setting Up
Once I logged in, I simply had to enter the domain name that I wanted to use a "kit" in. I had to then copy and paste a short line of unique javascript code into the HTML head tags in my website. Note: The following code will be unique to your information.<script src='http://use.typekit.com/FileName.js' type='text/javascript'/>
<script type='text/javascript'>try{Typekit.load();}catch(e){}</script>
2. I'm Done Already?
At first it seemed like I was, but not quite. After finishing our first step, Typekit says, "You're all set. Now go find some fonts!" Damn... that was pretty easy.After proceeding, I was taken to a page of close to 100 fonts to choose from. It's a very respectable list and I imagine that the library will only grow. Very organized, you can search categories such as serif, sans serifs, to distressed and pixel. After searching, I selected a couple of my favorites. I have the basic free service which allows me to use 2 fonts on 1 domain which is fine for my purposes. You can upgrade (and pay) for more fonts across more domains.
Once I selected the font of choice (called Liberation Serif and now used in my headers), I opened the "Typekit Editor".
3. Adjust Your CSS
All that was left was for me to do was add the name of the font to my CSS [example code shown below]:h1 {
font-family: "liberation-serif-1","liberation-serif-2",serif;
}
The process is literally that easy. If I wasn't writing this article while doing it, it would have taken me no more than 10 minutes to get a working font on my site. And although the code adds a little badge in the corner, it's not intrusive and doesn't really bother me. If I were to upgrade my account, the badge would not be required and I'm sure if I was really savvy, I could hide it. In conclusion, I am very impressed with the selection and ease of Typekit... I look forward to new features it has to offer.
Wanna Add Typekit To Your Website?
If you're interested in joining the Typekit community, I have a limited number of invites that I'd be happy to share. Just post a comment with your thoughts and a way for me to contact you and I'll pass one along. Also, if you end up implementing Typekit on your site, let me know as I'm curious to see your use... Enjoy and thanks for reading. I look forward to hearing from everyone!
April 23, 2009
Blogger's "Reaction" Feature
I don't think it's new, but I just found Blogger's "Reaction" widget. I've been interested in adding something similar to Facebook's "Like" feature and what do you know? Blogger was way ahead of me.
By default, Blogger gives you 3 categories: Funny, Interesting, Cool. You can add more or remove some if you want. In my case, I only wanted one; a "Like" button.
If I kept everything as the default settings, it would give me something that looks like the first image shown in this post. Not quite a "Like" button, so I had to edit the code myself. To do so, I made only one category simply labeled "Like" and after saving all my progress, I moved into the "Edit HTML" module. I clicked "Expand Widget Templates" to show all the code. This line of code was made from the settings I had just set up:
It's a little messy and it had some things in there that I didn't want. The following line is the code that renders the word "Reactions" (or whatever you decide to name your categories). In my scenario, I didn't want it shown at all, so I just deleted the line:
Some of the other code was formatting for tables. Since I only have 1 box, I don't need to worry about how multiple boxes will look. With that said, I cleaned the code even more. This is the final code that simulates the "Like" feature I was going for:
How To Add
In Blogger, go to (1) Layout (2) Page Elements and in your "Blog Posts" module click (3) Edit.
By default, Blogger gives you 3 categories: Funny, Interesting, Cool. You can add more or remove some if you want. In my case, I only wanted one; a "Like" button.
If I kept everything as the default settings, it would give me something that looks like the first image shown in this post. Not quite a "Like" button, so I had to edit the code myself. To do so, I made only one category simply labeled "Like" and after saving all my progress, I moved into the "Edit HTML" module. I clicked "Expand Widget Templates" to show all the code. This line of code was made from the settings I had just set up:
<span class='reaction-buttons'><b:if cond='data:top.showReactions'><table border='0' cellpadding='0' width='100%'><tr><td valign='center'><span class='reactions-label'><data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td></tr></table></b:if></span>
It's a little messy and it had some things in there that I didn't want. The following line is the code that renders the word "Reactions" (or whatever you decide to name your categories). In my scenario, I didn't want it shown at all, so I just deleted the line:
<span class='reactions-label'><data:top.reactionsLabel/></span>
Some of the other code was formatting for tables. Since I only have 1 box, I don't need to worry about how multiple boxes will look. With that said, I cleaned the code even more. This is the final code that simulates the "Like" feature I was going for:
<span class='reaction-buttons'><b:if cond='data:top.showReactions'>
<iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' name='reactions' scrolling='no'/></b:if></span>
March 12, 2009
How to add a graphic to the side of a book
I randomly received an email from a student at The University of Missouri inquiring about a process we used while making Kiosk 37. Coming from KU, I put aside the fact that she attends Mizzou, and to help out a fellow student I wrote her a tutorial explaining the process. With that said, it has also inspired me to start a Journal (not a fan of the word "Blog"). This is a place where I will document the random things I learn. Whether it's a trick in Photoshop, a unique process I experienced, or a simple line of code that took me 12 hours to get right, I'll gladly pass the information on in hopes that you too will learn something new. Check back often, I plan to update on a biweekly basis.
Select all the lines as well as the graphic, then in your Pathfinder Palette, select “Divide.” This creates all the little pieces of the letters (C). By default, they will be grouped so ungroup them. You will also have invisible lines (C1) in the white space between the letters so select all of those random lines and delete them. You now have a bunch of individual little shapes thus leading us to the extremely tedious part. To avoid issues when pasting in InDesign, this next part is important. Select the shapes that are contained in their respective row one row at a time and click “Add to shape area” and Expand (D). Do this for each of the 52 rows. I alternate colors to help better illustrate which row of shapes should be added together. Once every row is done, open your Appearance Palette and double check to make sure none of your rows are grouped in any way. Select each row one at a time and make sure it reads as a “Compound Path.”
This was more of an experiment for Kiosk 37 that went fairly well, but I have to note that while some books turned out very nice, a small number didn't turn out so well. Just keep that in mind. If you're interested in receiving a free copy of Kiosk 37, send me an email (luke@lisidesign.com) and I'd be happy to arrange something with you. Well that's it for my first post. You can download a PDF of this process here. If you made it this far, thanks! I promise, my future posts won't be this long.
Putting our differences aside, I'd like to thank Sarah from Mizzou for inquiring about this process. You can check out her blog "Come Out And Play" here. Thanks Sarah!
STEP 1: FIGURING THE BASICS OUT
Before we begin, we need to know a few details about the final book. For Kiosk 37, we knew it would be 112 pages (56 spreads). When looking at the edge of the book, there are 56 individual pages. We don’t want the graphic to appear on the first and last two spreads of the book so we’re going to subtract 4 which means the graphic will appear on 52 page edges. That’s it for the math.STEP 2: PREPARING TYPE IN ILLUSTRATOR
Create your type, outline it, ungroup it, then “Add to shape area” and Expand your graphic (A). Once that is done, draw 51 lines (51 lines will eventually give us 52 rows). We want each “row” of the graphic to be divided evenly. The best way to do this is to use “Vertical Distribute Center.” To divide them perfectly even, I add 2 extra lines: one aligned to the top of the graphic, and one aligned to the bottom (B). Press “Vertical Distribute Center” then delete those two extra lines.
Select all the lines as well as the graphic, then in your Pathfinder Palette, select “Divide.” This creates all the little pieces of the letters (C). By default, they will be grouped so ungroup them. You will also have invisible lines (C1) in the white space between the letters so select all of those random lines and delete them. You now have a bunch of individual little shapes thus leading us to the extremely tedious part. To avoid issues when pasting in InDesign, this next part is important. Select the shapes that are contained in their respective row one row at a time and click “Add to shape area” and Expand (D). Do this for each of the 52 rows. I alternate colors to help better illustrate which row of shapes should be added together. Once every row is done, open your Appearance Palette and double check to make sure none of your rows are grouped in any way. Select each row one at a time and make sure it reads as a “Compound Path.”
STEP 3: MOVING THINGS INTO INDESIGN
Once you have your rows made in Illustrator, select everything and simply copy and paste into InDesign. Once in InDesign, your graphic should be grouped by default so ungroup it (E). You should now have 52 rows. Rotate everything 90˚ counter-clockwise and place on the edge of the document at the height you want it. It should be on the right page of the spread (F). Now, just copy and Paste-in-Place all rows throughout the document moving your graphic over one row per page while deleting the row that was on the previous spread (G).
STEP 4: OTHER THINGS TO CONSIDER
Obviously, the success of this effect depends greatly on the quality of the printer and their ability to trim accurately, so you may want to make them aware of your intentions. In an ideal situation, you would only need one row per page but chances are, that won't be the case. Take in account the bleed and if your rows are very thin, you may want to include 2 or 3 extra rows in the Live Area of the page.This was more of an experiment for Kiosk 37 that went fairly well, but I have to note that while some books turned out very nice, a small number didn't turn out so well. Just keep that in mind. If you're interested in receiving a free copy of Kiosk 37, send me an email (luke@lisidesign.com) and I'd be happy to arrange something with you. Well that's it for my first post. You can download a PDF of this process here. If you made it this far, thanks! I promise, my future posts won't be this long.
Putting our differences aside, I'd like to thank Sarah from Mizzou for inquiring about this process. You can check out her blog "Come Out And Play" here. Thanks Sarah!
Subscribe to:
Posts (Atom)
