Documentation + F.A.Q.
: last updated 10/26/2018
Overview
In this document vital elements of the Type on Point website will be described to help you understand the interface, navigate common problems, and to provide tips and hints. If this page does not answer your question please send us a message or fill out the user survey on our
Contact page.
Typo Studio
The TyPo studio is a place for typographic exploration.
Following the New Typographer tour provided by Ty is the best way to get to know the TyPo Studio interface. Ty will only appear on your first visit and then about once every other month incase you need a refresher or new features are highlighted. One way to initiate a new tour from Ty is to clear your browsing history. (Look for Ty to give you helpful hints along your journey)
Click on the green arrows to advance Ty’s tour or click the small black carat to return to the previous instruction. If you make changes to the artboard height while the tour is in session Ty may lose his way. To prevent this from happening only click on the things Ty instructs you to.
Upon first viewing the TyPo studio you will notice the white rectangle in the middle of your screen, this is the
artboard. The artboard is the playground for your text design. Notice that it is touch sensitive and slides right-to-left. You can resize the artboard with the circular handles on the edges that appear when you hover or tap within the artboard bounds. Activating the artboard by tapping/clicking on it moves it above the tools panel. You may also resize the artboard with the range-sliders directly above or beside (desktop only).
Three buttons are present in the top left corner of the studio under the navigation links. Hovering or tapping will reveal their tooltip. The first button aligns the page so that you can see all the tools and the top of the artboard, this comes in handy when you are scrolled just out of alignment. The second dot reveals a color picker which changes the background color of the TyPo Studio. Color is relative, and when you place your TyPo on different colored backgrounds it will affect how the TyPo color appears, here you can test your color relativity. The third button toggles a grid which overlays the artboard to assist you in alignment of your headline and tagline.
To the right of those three buttons is the artboard
width range-slider, mentioned earlier. Dragging the range-slider handle will expand the artboards width.
To the right of the width range-slider is the
stacking order icon. Notice the color code (blue = Headline , red = Tagline) the tagline starts on top and is made accessible to touch as a priority in this state. The tagline is physically on top of the headline by default. Click the stacking order icon to switch which text-box (HL or TL) will be on top and priority for manipulation.
To the left of the artboard (desktop/tablet) is the
height range-slider. Dragging the round black handle will make the artboard expand vertically.
Tools Panel
The Tools panel located directly below the artboard displays controls for creating your TyPo. The tools panel can be hidden by clicking the hide/view toggle button (×) in the top left corner, the toggle will then display a (+) sign. When clicked again it will reveal the tools panel.
The tools panel is transparent so that you may slide it on top of the artboard and see changes to your TyPo while using the controls. To slide the tools panel click the
lock button adjacent the hide/view toggle, then click and drag the tools panel upwards or downwards.
range-sliders, like the width/height range-sliders can be found at each stage of your TyPo creation. Before each range-slider in the tools panel there is an icon, if you hover or tap on this icon it reveals a tool-tip describing what the following range-slider controls. Click and drag the range-slider handle to manipulate the specific action. You should get immediate feedback as you change each range-slider.
*tip For selecting range-slider handle tap and hold for a split second before sliding - or - tap anywhere on the range to select it (moves range handle to clicked/tapped location).
If you need a value that is larger than the max value of the slider, you can manually enter a number into the value counter after the slider (not available on mobile). There is a limit on maximum input value to reduce potentially crashing the site. Tap the plus or minus button beside the value counter to step the value up or down.
*tip Remember if the controls (range-sliders, color pickers, etc.) in the tools panel are off screen or covering your TyPo click the lock/unlock button once to enable the tools panel to slide up-and-down.You may find it easier to
lock the tools panel when using range-sliders.
Navigation Tabs
To the far right of the Tools Panel are the navigation tabs. Select the tab for corresponding control panel that you would like to work on. Use the navigation tabs to move forward and backwards between control panels (the current tab will turn white). Each tab lea is described in further detail as you read on. For now the tabs are as follows:
- Headline; the first text input and controls for styling your text on the Artboard
- Tagline; the second text input with controls for new styles
- Colors; choose a color for each element of the artboard
- Text Shadow; add a drop-shadow effect to your text
- Image; upload an image behind your text and style it
- Artboard Shape; controls for how the artboard should appear
- Rotate; transform and skew your text
- Post; send the finished TyPo to the gallery and add it to your profile
Use the “Next” button to move forward chronologically through the control panels, and the “Previous” button to move back. As you do so you will notice a counter that keeps track of how many tabs you have completed. Next to the counter is a triangular “carat” button, this button reveals the Special Styles panel.
*hint Keyboard controls for Next/Previous navigation will only work once you have deselected the input in the tools panel
Special Styles
Now for some fun! In the Special Styles panel you will first see graphical representations of styles that can be quickly added or removed from your text. Click each style once to apply it (the button will light up once selected), and a second time to remove it. Styles can even be added on top of the other. Expect there to be new styles added to this section from time to time.
*hint Click anywhere outside of the Special panel to close it.
After the style buttons you will see a button that adds a random texture and below it a random pattern to the artboard. You may have to scroll down to see them. Click through until you find one that you like, or remove it by clicking the “X”.
Blend modes apply to everything on the artboard, and work best when there is a color applied to the background. If you experiment with this you will get some interesting results.
Touch/Mouse controls
You may drag the Headline and Tagline around the artboard by clicking and dragging or placing a finger on the text - away from the bounding box edge - and moving it to your desired location.
To rotate your text click and drag the rotate icon in the bottom right corner of the bounding box for the Headline or Tagline within your TyPo using one finger or the mouse
The headline and Tagline text size may be increased using two fingers and pinching from inside the respective bounding box.
Resizing the text bounding box will help you break lines of text evenly. Tap and drag the circle handles on the edges of the Headline and Tagline to resize width or height individually or the corner handles to resize width and height at the same time.
Headline
= blue
Add some text in the Headline input field (say something…) and play around.
The headline
text-input is directly below the “Headline” title, it is a thin blue line that will become a highlighted input area once clicked on. You may enter as many spaces as you need to break up your text asymmetrically. Using a return space (Enter) adds an arrow symbol to the text-input field and breaks the text in the TyPo to the next line.
*tip If you find that your text is not centering the way you would like it to, try adding a space from your keypad to the text-input area before or after the line of text that you want to move.
The Headline is the only required field, from here you have freedom to use all of the tools in the TyPo studio. There is no particular order in which you have to create your TyPo.
Emoji picker
Love emojis? Look for Ty at the far left of the text-input on the Headline and Tagline control panels for a drop-down emoji picker.
Notice that there are tabs at the top of the emoji picker to change categories. Once you select an emoji you must register a keyboard click to have it appear on the artboard. Hopefully this will be updated so the keystroke won’t be necessary.
*on mobile emoji may only be scaled to a limited size before they disappear from the artboard. The cause is unknown to us.
Font Drop-down
Below the Headline text-input you will find the font drop-down menu labeled “select a font”, this is a logical next step, but you may use it at any time. There are hundreds of fonts to choose from. Selecting the font drop-down menu you will notice that hovering over a font will apply it to your text. Only when you click on the specific font will the font drop-down close and apply to your text.
At the top of the font drop-down you will notice a series of buttons, the first marked random, will select a random font from the list. The adjacent buttons labeled serif, sans, slab, and script filter the list by style so you may find your favorite font quicker.
You may upload your own font from your computer by selecting the “+” button on the left of the font drop-down menu. Accepted file types are .otf, .ttf, .woff, .woff2, and .svg. Important note, font file names must not have numerals or special characters in them.
eg. Ocean 6.otf must be changed to OCEAN_SIX.otf
Weights will need to be converted.
Suggested font name conversion:
100 -- hairline
200 -- thin
300 -- light
400 -- regular
600 -- semi bold
700 -- bold
800 -- extra bold
900 -- black
Eg. Fontname_600.ttf => Fontname_semibold.ttf
Text Alignment
If you are familiar with word processors this feature may be familiar. The alignment radio buttons directly below the font drop-down align your text lines to the left, center, right, or justified. You may not see much of a change if you don't have multiple lines of text.
Point Size
The first range-slider of four in the Headline control panel changes the point size of your font (make it bigger or smaller).
Leading
The second range-slider changes the distance between lines of text, the leading. If you only have one line of text this is not very effective but will move your text.
Kerning
The third range-slider adjusts the space between individual letters of your text, or kerning.
Word Spacing
The fourth and final range-slider in the Headline and Tagline control panels changes the distance between entire words, a.k.a. tracking. If you only have one word this will not have any effect.
Tagline
= red
and meme it. Essentially all the same controls as in the Headline slide. Select a complimentary font and unique text styles.
A special hidden feature of the Headline and Tagline text input fields is that if you click and hold a random word will appear. Yeah, have fun with that.
Color & Border
Within the Color and Border control panel there is a
color-picker for each of the elements that make up a TyPo. Every color-picker has the same elements, a button that displays the selected color corresponding with an item of the TyPo, a dropdown that appears after clicking the button, colored dots on the left side of the dropdown representing swatches that record your last six color selections, a square section that selects a shade—a lighter or darker variation of the color you have picked, below that a transparency slider that displays a checkerboard when the color opacity is less than 100%, and a hue slider on the right side that displays all color possibilities.
The first color picker applies a color to the entire artboard—a background color. The second directly to the right selects a secondary color that makes up a gradient. Notice that this picker starts out completely transparent, you will need to slide the transparency slider to have any visual effect. Across from these color pickers is a range-slider that changes the angle of the gradient in 360 degrees.
The third color picker displays the current color of your Headline text. There is also a small color picker button in the top right corner of the Headline bounding box within the artboard, this button is linked to the color button in the color control panel and shows the same selected color. Next to the Headline text color picker is another that selects a color for the stroke of your Headline text—the outer edge of each letter. For the text border to appear you will need to increase the value the range-slider labeled “Type” with a blue outline; by default it is set to 0. If you do not choose a color for the stroke but slide the range-slider handle anyway it will make your text thicker using the Headline or Tagline text color, giving it a bold appearance.
The fifth and sixth color pickers and text stroke range-slider do the same operations for the Tagline as the previous description did for the Headline.
The last color picker selects a color for the artboards border. There is no border by default so again you will need to increase the range-slider value with the border icon.
Next to the border color picker is a button labeled “random” this will set each color picker to a randomized color overriding all other picked colors. It’s fun to click for quick color combos and inspiration.
Text Shadow
- control panel
A text shadow will appear with you text when any of the controls in this panel are manipulated. The color picker works as described in the Color & Border section. Next to the color picker is a button that appears as an “x” this will remove the text shadow.
To give your shadow a blur so it looks less focused use the range-slider with the “B” label. To move the shadow to the right to left use the range-slider labeled with the “X” label. To move your shadow up and down use the “Y” range-slider.
Background Image
- control panel
Adding an image from your computer to the artboard is simple. First click the “upload” button and discover the file on your system (only image files are accepted). As soon as the file has been selected it will appear scaled-to-fit on the artboard and above the colored background. You can remove it at any time by clicking the “X” next to the upload button. An image may also be added to the text of your Headline or Tagline by clicking the toggle next to the upload button then selecting an image. Hit the toggle again to remove the image from the text. *Does not render properly in Chrome.
You can reveal the colored background by reducing the value of the opacity range-slider making your image partially transparent. Use the
brightness range-slider to increase the light in your image. Adjust the light and dark of your image with the
contrast range-slider. Remove color from your image with the
grayscale range-slider. Change the colors in your image with the
hue range-slider. Make your image colors more vibrant with the
saturate range-slider, or use the
sepia range-slider to add old-timey brown-tones to your image.
Artboard Shape
On this control panel you will first encounter a range-slider that rounds the corners of the artboard. It will also round the border that was applied in the colors control panel. Rounded corners can also be added in conjunction with the shape clips which appear directly below it.
Click on any of the shape clips to change the shape of your artboard. Click on the “X” to remove the shape clip.
Below the shape clips are two sets of radio buttons and two range-sliders. Each radio button selects if a border is added to the respective side of the Headline or Tagline. Click some of the radio buttons or all of them to put a box around your text. The range-slider after each series of radio buttons determines how wide the border will appear. Click the radio button a second time to remove the border.
Rotate or Skew
The first four range-sliders transform your Headline, rotate your text, skew it on the X or Y axis, and place it on a circular path. You can step back your selection on the circular path range-slider once by clicking the return arrow.
*hint In most cases only one transformation will apply to your text at a time. (for now)
The second set of four range-sliders does the same transformations for your Tagline.
Post
The final control panel.
After 30 second timeout on the “Submit to Gallery” button you may post again. During this timeout you may navigate to any other slides and edit your TyPo. If you only make stylistic changes your TyPo will be overwritten. If you change your Headline or Tagline text a new typo will be rendered to the gallery.
Sometimes your work can be lost, we apologize if you can't recover your TyPo in the case of a crash. Have peace knowing that you can build it again.
Gallery
The gallery displays every TyPo that has been submitted whether or not the typographer was signed-in. If the typographer was signed-in their name will appear below the typo, if not anonymous user is displayed. Filter the typos by a specific user by clicking on the username. Return all of the typos by clicking on the ALL button at the top of the gallery.
Scroll down to lazy load more TyPos.
Across from the “ALL” button is a search bar. Search all the Typos in the gallery by the words in the TyPo.
Hover or tap on a TyPo to reveal a series of four buttons. The first expands the TyPo into gallery mode where you can zoom/pan, play a slideshow, scroll through the TyPos, and much more. The second button allows you to download any TyPo in the gallery, share TyPos freely on the interwebs. The third and fourth button are quick share buttons for their respective social networks.
Social
To get the most out of Type on Point it is recommended that you register an account. Sign-up is simple; select a username, password, and email (we never share your email), a confirmation message will be sent to the email account you provided with a link—click on the link to confirm your email and you are done.
After registration your username is added to the
Directory which contains links to every typographer’s profile. This profile contains each typographer’s TyPos listed from newest to oldest. From this profile page you can click “Add as Friend” to follow the current typographer’s status updates and send direct messages, or “Remove Friend” to stop seeing status updates.
When signed-in your username and “letter avatar” will appear just below the navigation links at the top of each page. If you click on your username you will be taken to a mini-page where you can edit your profile and add new information like your general location and a short bio.
From this mini-page you may also sign out or reach any of the other social pages.
Other pages include the directory mentioned earlier, your feed where you will see posts from your friends and your own posts that are publicly shared. Next you will find your inbox a place where private messages from other users can be seen by you alone. The next page is the compose page where you can create and send your own private messages to friends. Lastly, is your friends list where you will see everyone you have selected as a friend as a list of links to their profiles.
FAQ
Q. What is a TyPo?
A. It’s like a grown-up meme.
Q. What is a meme?
A. Term coined by Dr. Richard Dawkins in the 1976 book The Selfish Gene a meme is the smallest unit of cultural information that is passed by sharing from human to human.
Q. Where do babies come from?
A. Ask your mom.
Q. Can I give you some money?
A. Yes you can. Store.
Content creation is in our hands, we decide the future of the internet.