In the first part of this series, we introduced the idea of using spriting as an easy, cross-browser way of having interactive animation for the web. In the second part, we got some animation working, and in the third we cleaned up our code and made it ready for the web.

Introduction

Now, in our final part today, we will walk through setting up event handlers so that instead of responding to clicked buttons, our robots will follow the mouse around the screen. In the process, we will also talk about making the code cross-browser friendly and touch screen enabled.

If you take a look at our code from last time, you will see that while the code runs well (and with multiple robots), there isn't a very easy way to tell the code to run.

Event Handlers

Event handlers are commands that tell certain code to run when certain events are triggered. For example, you could have my_function() run whenever a user clicks on your div with the id 'my_div'. Or, you could have my_other_function() run whenever a user moves their mouse over 'my_other_div'.

In theory, this is a pretty simple and straightforward idea. Unfortunately, once you start getting different browsers involved, this can get a bit confusing. In an ideal world, every web browser would interpret the same code and HTML in the same way, and developers would write code one time and it would work the same for every user. In the real world, different browsers may have completely different commands to do the same thing (*cough* *cough* Internet Explorer), and so sometimes trying to get a single piece of code to run the same on all browsers can feel like herding cats. Recently, the situation has been getting much better, as Chrome, Firefox, Safari, and Opera all respond very similarly to code, Internet Explorer 9 and 10 have become much more in line with standards than earlier versions, and almost no one uses Internet Explorer 7 or 6 anymore. So, for our code, we will be getting event handlers to work for both modern browsers and Internet Explorer 8.

As a side note, this is a case where it really pays to use a robust JavaScript library, such as jQuery. jQuery does all the work for you in cross-browser testing, so you will only need to enter one command and the jQuery library will translate it for each browser behind the scenes. Additionally, many of the commands in jQuery are much more intuitive and simpler than the core JavaScript as well.

But, since I am stubborn, and since this is a learning opportunity, we are going to continue on the hard way and do all of this solely with JavaScript and no dependencies!

Page Interaction

So, our first step will be to decide how exactly we want to interact with the page. When I move my mouse over the stage area, I want all of the robots to run towards the mouse. When they reach the mouse, or if the mouse is directly above them, I want them to stop running. If the mouse crosses over them, I want them to jump. And finally, when the mouse leaves the stage area, I want them to stop running. We will start with attaching these events inside the RobotMaker function:

stage.addEventListener('mousemove', stage_mousemove_listener, false);
    robot.addEventListener('mouseover', robot_mouseover_listener, false);
    stage.addEventListener('mouseout', stage_mouseout_listener, false);

So, in the above lines, we have said that whenever the user moves the mouse inside the stage element, we will trigger a function called stage_mousemove_listener() (notice we do not include the parentheses in the command). Similarly, when the user moves the mouse over the robot element, it triggers robot_mouseover_listener(), and when the user moves the mouse outside of the stage, it triggers stage_mouseout_listener().

Unfortunately, as we mentioned before, Internet Explorer 8 and below has a (similar but) different command to do the same thing, so we will need to test to know which command the user's browser will understand and do that method.

if (stage.addEventListener){ // We will test to see if this command is available
      stage.addEventListener('mousemove', stage_mousemove_listener, false);
      robot.addEventListener('mouseover', robot_mouseover_listener, false);
      stage.addEventListener('mouseout', stage_mouseout_listener, false);
    } else { // If not, we have to use IE commands
      stage.attachEvent('onmousemove', stage_mousemove_listener);
      robot.attachEvent('onmouseover', robot_mouseover_listener);
      stage.attachEvent('onmouseout', stage_mouseout_listener);	
    }

You may notice that the format of the commands is very similar, but has some major differences - one says 'addEventListener' while the other says 'attachEvent'. One says 'mousemove' while the other says 'onmousemove'. One requires a third parameter, while the other only uses two. Mixing any of these up will cause the command to not run. These are the kinds of things that will make you want to bang your head against the wall. Unfortunately, this isn't the end of the extra coding we will need to do for cross-browser capability.

Listening Functions

Next, we are going to write the listening functions. We will start with the function that is triggered when the user mouses over the stage. Since this is a mousemove listener, this function will trigger every time the mouse is moved inside the stage area (meaning it will trigger several times a second while the mouse is moving). This function will need to compare the location of the robot with the location of the mouse, and make the robot behave accordingly. Each time the function is triggered, it will check if the robot needs to continue running the same direction or change behaviors. So, it will need to be something like this:

// Inside of RobotMaker
    
    // We will need to introduce a few extra variables to track
    var mouseX; // For tracking horizontal mouse position
    var running_dir = ''; // For tracking if (and where) robot is currently running
    var stageOffset; // For tracking the position of the stage
    
    function stage_mousemove_listener(e){
      
      // Find the horizontal position of the mouse inside of the stage ...  
      // That position will be saved in 'mouseX'
      
      // Then we compare 'mouseX' to the robot, and decide if we need to run differently
      if (((robot.offsetLeft + (15 * run_speed)) < (mouseX - robot.offsetWidth)) && running_dir !== 'r' && (!jump_timer || jump_timer === undefined)){ 
        // If the mouse is in the stage and to the right of the robot, make run right, if not already
        running_dir = 'r';
        clearTimeout(run_timer);
        run_r(1, robot.offsetLeft);
      } else if ((mouseX < robot.offsetLeft - (15 * run_speed)) && running_dir !== 'l' && (!jump_timer || jump_timer === undefined)) {
        // If the mouse is in the stage and to the left of the robot, make run left, if not already
        running_dir = 'l';
        clearTimeout(run_timer);
        run_l(1, robot.offsetLeft);
      } else if ((robot.offsetLeft < mouseX) && ((robot.offsetLeft + robot.offsetWidth) > mouseX) && running_dir !== '' && (!jump_timer || jump_timer === undefined)) {
        // If the mouse is in the stage and over a robot, stop and clear running_dir
        running_dir = '';
        clearTimeout(run_timer);
        if (face_right){
          robot.style.backgroundPosition = "0px 0px";
        } else {
          robot.style.backgroundPosition = "0px -50px";
        }
      }
      // If none of the above is true, then we let our current behavior continue
    }

So, in the function above, once we are able to find mouseX, we compare it to where the robot is and trigger or stop the different running functions as needed. Unfortunately, finding mouseX is a bit tricky, since mouse position is another thing that different browsers do differently. In lieu of (more) complicated and long-winded explanations, here is the cross-browser method for finding mouseX, as inspired from the excellent Quirksmode blog (which is a great source for more advanced JavaScript studying).

function stage_mousemove_listener(e){
      var posX = 0;
      if (!e){
        var e = window.event;
      }
     
      if (e.pageX) {
        posX = e.pageX;
      } else if (e.clientX) {
        posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      }
      mouseX = posX - stageOffset.xpos; // And we find mouseX!	
    }

We have an argument called e in the function, even though we don't pass it anything. Since this is an event listener, we can have an automatic variable called e that stores event information like mouse data. But because different browsers store it differently, we have to add a lot of extra steps.

We finally find mouseX by finding posX (which is the x-position of the mouse on the page) and subtracting how far the stage is from the far left of the page (stored in stageOffset.xpos). This gives us how far from the left edge of the stage the mouse is, which we can directly compare with robot.offsetLeft. Since the stage could be located differently around the page depending on the layout, we will also need to find the exact pixel offset of the stage for the function to be accurate, and store that information in stageOffset. Fortunately there is a neat trick we can use to find an element's absolute offset with this function from Vishal Astik's blog.

// Inside RobotMaker
    var x = 0;
    var y = 0;
    function find_stage_offset (el){
      x = el.offsetLeft;
      y = el.offsetTop;
      el = el.offsetParent;
    	
      while(el !== null) {
        x = parseInt(x) + parseInt(el.offsetLeft);
        y = parseInt(y) + parseInt(el.offsetTop);
        el = el.offsetParent;
      }
    
      return {xpos: x, ypos: y};
    }
    var stageOffset = find_stage_offset(stage);

So now that we have written the mousemove listener, the others will be much easier. For the robot mouseover listener, we only need to check if the robot is already jumping, and if not, stop the run timer and make it jump.

function robot_mouseover_listener(){
      if (!jump_timer || jump_timer === undefined){
        clearTimeout(run_timer);
        jmp(true, robot.offsetTop);
      }
    }

The mouseout listener is also pretty simple. We just need to reset some of our variables we are using to track the robot, and if the robot isn't jumping, return the robot to the standing sprite.

function stage_mouseout_listener(){
      mouseX = undefined;
      running_dir = '';
      if (!jump_timer || jump_timer === undefined){
        clearTimeout(run_timer);
        if (face_right){
          robot.style.backgroundPosition = "0px 0px";
        } else {
          robot.style.backgroundPosition = "0px -50px";
        }
      }
    }

Animation Functions

The functions that animate the running and jumping motions haven't changed much this time. We have just added the tracking variable running_dir, taken out the statement that checks if the robot is about to hit the wall (since this is redundant with our mouseout function), and add a bit of code to the jump function that checks again if the robot should start running if the mouse is within the stage after it lands from a jump. Here's the final code (quite large):

function run_r(phase, left){
      face_right = true;
      running_dir = 'r';
      if ((left + (15 * run_speed)) < (mouseX - robot.offsetWidth)){ // if mouse is to the right, run
    		
        left = left + (15 * run_speed);
        robot.style.left = left+"px";
        switch (phase){
          case 1:
            robot.style.backgroundPosition = "-40px 0px";
            run_timer = setTimeout(function(){run_r(2, left);}, 200);
            break;
          case 2:
            robot.style.backgroundPosition = "-80px 0px";
            run_timer = setTimeout(function(){run_r(3, left);}, 200);
            break;
          case 3:
            robot.style.backgroundPosition = "-120px 0px";
            run_timer = setTimeout(function(){run_r(4, left);}, 200);
            break;
          case 4:
            robot.style.backgroundPosition = "-80px 0px";
            run_timer = setTimeout(function(){run_r(1, left);}, 200);
            break;
        }
    } else if ((left + (15 * run_speed)) < mouseX) { // if mouse if above, stop
        robot.style.backgroundPosition = "0px 0px";
        running_dir = '';
    } else { // if mouse is to the left, run left
        running_dir = 'l';
        run_l(1, robot.offsetLeft);
      }
    }
    
    function run_l(phase, left){
      face_right = false;
      running_dir = 'l';
      if (mouseX < robot.offsetLeft - (15 * run_speed)){ // if mouse is to the left, run
    	
        left = left - (15 * run_speed);
        robot.style.left = left+"px";
        switch (phase){
          case 1:
            robot.style.backgroundPosition = "-40px -50px";
            run_timer = setTimeout(function(){run_l(2, left);}, 200);
            break;
          case 2:
            robot.style.backgroundPosition = "-80px -50px";
            run_timer = setTimeout(function(){run_l(3, left);}, 200);
            break;
          case 3:
            robot.style.backgroundPosition = "-120px -50px";
            run_timer = setTimeout(function(){run_l(4, left);}, 200);
            break;
          case 4:
            robot.style.backgroundPosition = "-80px -50px";
            run_timer = setTimeout(function(){run_l(1, left);}, 200);
            break;
        }
    } else if (mouseX < (robot.offsetLeft + robot.offsetWidth - (15 * run_speed))){ // if mouse overhead, stop
        robot.style.backgroundPosition = "0px -50px";
        running_dir = '';
    } else { // if mouse is to the right, run right
        running_dir = 'r';
        run_r(1, robot.offsetLeft);
      }
    }
    				
    function jmp(up, top){
      running_dir = '';
      if (face_right){
        robot.style.backgroundPosition = "-160px 0px";
      } else {
        robot.style.backgroundPosition = "-160px -50px";
      }
    
      if (up && (robot.offsetTop > (20 * (1 / jump_height)))){
        top = top - (top * 0.1);
        robot.style.top = top+"px";
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else if (up) {
        up = false;
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else if (!up && (robot.offsetTop < 115)){
        top = top + (top * 0.1);
        robot.style.top = top+"px";
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else {
        robot.style.top = "120px";
        if (face_right){
          robot.style.backgroundPosition = "0px 0px";
        } else {
          robot.style.backgroundPosition = "0px -50px";
        }
    	
        jump_timer = false;
        if (mouseX !== undefined){
          if (((robot.offsetLeft + (15 * run_speed)) < (mouseX - robot.offsetWidth)) && running_dir !== 'r'){ 
            // make run right, if not already
            running_dir = 'r';
            clearTimeout(run_timer);
            run_r(1, robot.offsetLeft);
          } else if ((mouseX < robot.offsetLeft - (15 * run_speed)) && running_dir !== 'l') {
            // make run left, if not already
            running_dir = 'l';
            clearTimeout(run_timer);
            run_l(1, robot.offsetLeft);
          }
        }
      }
    }

So, now, we have our rewritten functions that work great across all browsers ... unless those browsers have touch input. We still have a bit more to go to make our robots run on everything. Since touch screens behave a bit differently, we will need to do some extra coding on our event listeners.

Supporting Touch Screens

We need to make some new rules for touch screens: If the screen is touched anywhere in the stage, the robot will run to that spot until the finger is lifted. If the user touches the robot, the robot will jump. First of all, we will add some extra touch event handlers to our earlier function, and we are going to write the code in such a way that it will run automatically whenever the RobotMaster function is called.

(function (){
      if (stage.addEventListener){
        stage.addEventListener('touchstart', stage_mousemove_listener, false);
        stage.addEventListener('touchmove', stage_mousemove_listener, false);
        stage.addEventListener('touchend', stage_mouseout_listener, false);
    		
        stage.addEventListener('mousemove', stage_mousemove_listener, false);
        robot.addEventListener('mouseover', robot_mouseover_listener, false);
        stage.addEventListener('mouseout', stage_mouseout_listener, false);
      } else {
        stage.attachEvent('onmousemove', stage_mousemove_listener);
        robot.attachEvent('onmouseover', robot_mouseover_listener);
        stage.attachEvent('onmouseout', stage_mouseout_listener);
      }
    })();

We won't have to worry about the touch listeners being in the Internet Explorer 8 format, and if any device doesn't have touch support it will ignore the listeners. Now we will need to update the stage_mousemove_listener() function to behave differently if the browser has touch capability.

function stage_mousemove_listener(e){	
    /*
     * First we check if this is a touch screen device (if it has e.touches)
     */
      if (e.touches){
        e.preventDefault(); // we want to cancel what the browser would usually do if touched there
        // If the touch was within the boundaries of the stage...
        if ((e.touches[0].pageX > stageOffset.xpos) 
        && (e.touches[0].pageX < (stageOffset.xpos + stage.offsetWidth))
        && (e.touches[0].pageY > stageOffset.ypos)
        && (e.touches[0].pageY < (stageOffset.ypos + stage.offsetHeight))){
          // we set the mouseX to equal the px location inside the stage
          mouseX = e.touches[0].pageX - stageOffset.xpos; 
        } else { // if the touch was outside the stage, we call the mouseout listener
          stage_mouseout_listener();
        }
    	
        /*
         * If the touch is directly on the robot, then we stop the run timer and make the robot jump
         */
        if ((e.touches[0].pageX > robot.offsetLeft) && (e.touches[0].pageX < (robot.offsetLeft + robot.offsetWidth))
        && (e.touches[0].pageY > (stageOffset.ypos + stage.offsetHeight - robot.offsetHeight))
        && (e.touches[0].pageY < (stageOffset.ypos + stage.offsetHeight))
        && (!jump_timer || jump_timer === undefined)){
          clearTimeout(run_timer);
          jmp(true, robot.offsetTop);
        }
    	
      } else { // Finding the mouseX for non-touch devices...
        // All of our non-touch device code here
      }
    }

You might notice that we no longer have any "doors" in our RobotMaker function, but since we are calling all of our code with event handlers that we are assigning inside RobotMaker, we no longer need them! For both our stage, and our characters, we will want to add a bit of CSS specially for touch devices so it will not try to cut and paste any images when a user holds down a finger on them.

#stage, .character {
      -webkit-user-select: none;
    }

And finally, we will declare all of our robots at the bottom of the page, using the same format as our event handler function to have the code run automatically when the page loads - this method also prevents these robot objects from being global variables, so the only global variable we have in this entire script is the RobotMaker() function.

(function(){
      var j = RobotMaker(document.getElementById('j'), 1, 1);
      var j2 = RobotMaker(document.getElementById('j2'), .8, 5);
      var j3 = RobotMaker(document.getElementById('j3'), 1.1, .5);
      var j4 = RobotMaker(document.getElementById('j4'), .5, .75);
    })();

Please checkout the final result in all of its glory!

Conclusion

I highly encourage you to study the entire (and fully commented!) code, and you can download all four robot sprites here as well.

Happy animating!

A two-person startup taking a big step — hiring its first staffer

Ryan McDonald

Digital Producer- Baltimore Business Journal

Professional ballroom dancers and Olympic figure skaters must work well with their partner, to coordinate and perfect their routine. But when it comes to running a business, it takes more than two to tango.

Zuly Gonzalez, chief operating officer for cyber startup Light Point Security, has been with her business partner and CEO of Light Point Beau Adkins since the company was founded in 2010.

“We work really well together. We have got complimentary skill sets and personalities considering we have known each other for a while,” Gonzalez said. Having a small team allows quick decisions without needing to go ...

http://www.bizjournals.com/baltimore/print-edition/2014/02/14/a-two-person-startup-taking-a-big-step.html

InvestMaryland Challenge advances 41 companies

Out of 260 applicants, 41 start-ups have advanced in the second annual InvestMaryland Challenge, the Maryland Department of Business and Economic Development (DBED) announced today.

The early-stage business competition—with awards provided by DBED’s Maryland Venture Fund, the BioMaryland Center and other sponsors—seeks to grow entrepreneurship and innovation in the State.

Ultimately, four companies will each receive $100,000 grand prizes in four categories, including information technology, cybersecurity, life sciences and general industry. All applicants have opportunities for promotion, networking and feedback from industry experts. Total available grants and prizes, including the four $100,000 awards, are valued at more than $700,000.

“The InvestMaryland Challenge brings together some of the most exciting young companies  in Maryland to showcase the thriving entrepreneurial community in our State and provide these rising stars of cybersecurity, biotechnology, IT and other fields with the resources they need to thrive,” said DBED Secretary Dominick Murray. “Congratulations to all the InvestMaryland Challenge semifinalists. To stand out from such a large pool of applicants is an achievement in itself and I wish them the best of luck as they move forward in the competition.”

The competition extends beyond Maryland’s borders, although out-of-state ventures are expected to establish themselves in Maryland, either through acquired space or a State incubator. Two Washington, D.C. companies and one New York company join 38 Maryland companies as semi-finalists.

Applicants will participate in face-to-face interviews with judges on March 6 at DBED headquarters at the Baltimore World Trade Center. The final winners will be announced later this spring.

For the complete list go to http://mdbiznews.choosemaryland.org/2014/02/11/investmaryland-challenge-advances-41-companies/

Meet Nick.

He is a Psychology major and a current Undergraduate Research Award (URA) Scholar. He has served as a research assistant at UMBC as well as Johns Hopkins and also works as a tutor and mentor in the Learning Resources Center (LRC). His current research focuses on cognitive effects of proton irradiation at differing energy levels.

How did you find your mentor for year research project?
I originally met my mentor by going to my advisor in the psychology department and asking about what research labs the department had to offer. After hearing that the psychology department had an animal behavior lab, I researched my mentor more in-depth by reading some of his research articles. I worked in his lab for one year before I approached him about doing an independent honors thesis, and because of the expensive nature of radiation research he already had a project in mind. I worked on and developed this project for about a semester before I applied for an Undergraduate Research Award.

How did you know this was the project you wanted to do?
Due to the expensive nature of radiation research I had very little choice on the topic of the project for my honors thesis (and thus the URA program). After working on the project for about a semester I designed and implemented several new behavioral experiments and really felt confident enough in my skills to take complete ownership. While the topic was narrow in scope, I had quite a bit of freedom in designing and implementing different behavioral experimental protocols and in analyzing and interpreting the data.

Is this your first independent research project?
This is my first large independent project – I think there is a large difference between being a research assistant with a lot of responsibility on a project and truly taking ownership and leadership of a project. There are so many factors to think about when designing and implementing research studies, and it has been and continues to be such invaluable experience.

Do you get course credit for this work?
I receive PSYC 498/499H credit for this work through the psychology departmental honors program (independent honors thesis). In the beginning stages I also received research practicum credit (independent reading/psychology research).

How did you hear about the Undergraduate Research Award (URA) program?
I heard about the URA program by getting a few emails via the myUMBC Undergraduate Research group. They post a lot of different research opportunities through their group and URA is just one great program of many.

What academic background did you have before you applied for the URA?
I had about two years of experience in animal behavior through two different labs (one year as a research assistant in my mentor’s lab, and one year being a research assistant at a lab at Johns Hopkins). Barring these two experiences I don’t think I would have felt confident enough to do an independent project – I needed to get direct experience in the field first. I was able to bring to my work at UMBC a few new behavioral experiments that I learned at my other lab.

Was the URA application difficult to do?
The application was not very difficult to do – in fact I believe it helped me clarify my goals and direction (much like writing an academic CV will do). The application process helped me to see where I am at and where I’d like to be, and the application allowed practice in a very important skill: proposing research.

What else are you involved in on campus?
I am involved in the Supplemental Instruction (SI) program in the learning resources center (I have been a math/chemistry SI leader for about two years and currently help lead training sessions occasionally as well). I am also a tutor and peer mentor in the Learning Resources Center and am working towards my master-level CLRA tutor certification (which is also a fantastic program to get involved in).

What is your advice to other students about getting involved in research?
Get involved as early as possible. Don’t let your self-doubts stop you from applying to research labs. Research labs don’t expect you to have a ton of relevant experience before entering; much of the training is done on the job (so it only hurts to wait). Talk to your peers and professors!

What are your career goals?
I am applying to Ph.D. programs in both Neuroscience and Behavioral Neuroscience with a focus on the neural mechanisms of animal behavior and learning. I want to be a researcher in academia.

Read his abstract here...

Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.

It will not make the walk much shorter, but the chances of getting lost will be much lower. Below are six questions that will shape the typeface through its first moments of creation and serve as guiding principles through the various stages of the design.

1. What Is The Intended Function Of The Typeface?

A typeface is a group of symbols destined to be rendered as words. The purpose of all letters is to communicate a visual or linguistic message to you, the reader. Sometimes they tell a story in a novel, sometimes the news of the day. At times, they direct you on the highway, while other times they update you on what your friends are having for dinner.

A typeface is a bunch of drawings that come to life when used as text. The words and their context will differ, and, therefore, the function of the typeface will vary according to the intended usage. A typeface designed to shout news headlines at people rushing about to get to work will be different from a typeface designed to capture the delicacy of a French wine.

Deciding on the function of a typeface is the first question that needs to be answered in a design brief. It will be the principle that guides you (the reader and, here, a designer) to judge whether the design works. It is similar to deciding what to wear every morning. Are you going to the beach or the office? Are you going to a party or the gym?

The thing is, even the most gorgeous high heels are not suitable for a treadmill. In the course of designing, you might draw letterforms that look great but do not perform well when put to use. If you’ve already decided on the intended function of the typeface, then the dilemma of choice is less scary.

Gebran2005 is a newspaper headline typeface meant to have a bold and strong visual presence. (View large version)

2. In What Sort Of Media Will It Be Used?

There was a time when all books were printed, and the main use of type was either for text or display. Today, we have added one word that modifies how we read and how we design typefaces: text or display, and where? The nature of ink, paper and the pressure needed to imprint the former onto the latter is very different from the nature of the light emitted from a glowing screen.

The way this affects a design is either subtle or pronounced, depending on how small the text size is and how high the resolution of the screen is. In either case, one needs to know whether the typeface is to be read in print, on screen or both.

Another qualifier quickly presents itself: and in which country? There are regional variations in typographic trends and visual language. Some typefaces are meant to be universal in appeal, and some dedicated to particular regions. Knowing where it will come to life will help you to design a more robust typeface.

Neue Helvetica Arabic for SKY was custom modified to be used in SKY News Arabia’s TV broadcasts and websites. The height of the font has been restricted in order not to require a tall space. (View large version)

3. What Language Does It Speak?

For many years now, typefaces have been conceived to speak in many different scripts and languages. Some design concepts are quite difficult to translate across script systems. With this in mind, map out your character set in order to plan how the design will extend across various scripts. This is also important for managing time, projecting costs (for the client) and collaborating with other designers.

SST was designed as the corporate typeface for Sony, and it supports several scripts, including Latin, Greek, Cyrillic, Arabic, Thai and Japanese. (SST Arabic by Nadine Chahine, and SST Latin by Akira Kobayashi.) (View large version)

4. What Personality Does It Convey?

If the typeface were a person, who would it be? Would it be male or female? Young or old? Hip or conservative? Sometimes it’s not about the personality, but rather the behavior. Formal or informal? Relaxed or tense? And sometimes it’s about the voice. Loud or soft? Confident or shy?

Determining these traits will help you to visualize the kind of impact the typeface should have, and these are usually connected to function. A typeface meant for newspaper headlines will be loud and confident, rather than shy and soft.

Baraem is the corporate typeface of Baraem TV, targeted at children between the ages of 3 and 6. It’s personality is fun, informal and childlike. (View large version)

5. What Design Characteristics Are Needed Or Desired?

Finally, it is time to talk about the design. Does the intended function call for a serif or sans serif? A handwriting script or all-caps wood blocks? High contrast or mono-linear?

Starting with these questions and staying within the realm of curves and outlines is possible, but a typeface that is strongly tied to a particular function or environment has a better chance of transcending the boundaries of black and white and representing more than just letters and words.

Afandem Dynamic’s is intended as a full-fledged text face in the style of Ottoman Naskh calligraphy. (View large version)

6. Which Calligraphic Or Typographic Style Are You Referencing?

This is where the design engine starts running. If you are designing a sans serif, will it be a humanist or grotesque? Each style has its own conventions of structure, proportion and modulation of strokes.

A typeface is like the human body. The skeleton is the structure underlying the letters. You will see it by drawing a line in the middle of the inner and outer edges. The structure conveys proportion and movement: fast or slow, energetic or relaxed, wide or narrow.

Palatino Arabic and Palatino Sans Arabic have the same skeleton, but the modulation is different. (View large version)

Then you have the flesh. This is the weight around the skeleton. Where you put the thins and thicks will largely be determined by the tool you use to trace the skeleton. Now that you almost have a full body, you must think of the head and feet. Will you have serifs, or do you prefer flats? This is where the design brief splits from a single path into many. If you were to present the first five questions to five different designers, you would likely get different answers to the sixth question and, by extension, different designs.

As such, the sixth question is more of a transitional phase between the conceptual definition of the typeface (i.e. what it is supposed to do and represent) and what it will actually look like.

This is when the real fun begins.

Note: All typefaces included this article were designed by Dr. Nadine Chahine herself.

(al, il)

© Nadine Chahine for Smashing Magazine, 2014.

The idea that the Twitter stream is a window into the future is persuasive. But is it true?

The idea that social media sites such as Twitter can predict the future has a controversial history. In the last few years, various groups have claimed to be able to predict everything from the outcome of elections to the box office takings for new movies.