Typographic

Typography is the part I care the most. I spend a lot of time to polish every fine detail of Typography based on the web standard. To do this, I research a lot on what to do or not to do in the two design system guidelines, Atlassian design and Material design system. Thanks for sharing valuable information.

Let me break it down. I frequently resorted to looking at standard in the Material design library Sketch file and see how they manage to name so many symbols, components and layers.

Also, I referenced how they present many states (disabled, selected, hover) and how they combine each element or each component. Especially I adopted the type system, H1~H6, subtitle, body, caption and buttons like the image below.

The type system in Material design guideline Ⓒ Material design system at google

Material design library file in Sketch Ⓒ Material design system at google

I was inspired by Material design, however, probably due to the limitation of Sketch, I felt a lack of something which I wanted to do polishing more such as changing properties to each text element as their individual roles in Sketch. I found a nice solution and explained it as follows.

How to design each element efficiently for their individual roles in Sketch.

Even if Sketch has a symbol-function, I found that it is not as flexible as writing the code. For instance, There were two paragraphs, overview and CV, in Sketch file like the image below.

Both contents are included in the body category. But the line-height property must be different due to the content type, the line-height of the overview content is taller than the CV content. Because overview content is a long paragraph that needs more space between each line for better readability than CV content.

I always think about how to write the code as I do design.

I already knew Ryan Yu, front-end engineer, prefers to using OOCSS (Object Oriented CSS) like the image below, also I love this way which allows us to combine or change each property easily with CSS classes. Here is an article Ryan Yu wrote in CSS-tricks, Combining the Powers of SEM and BIO for Improving CSS.

OOCSS

It must be much easier if I could just write code using OOCSS. But I had to hand over the prototyping to engineer with Sketch file as a designer. As I mentioned before Sketch is not flexible. It doesn’t allow me to override styles (properties) as opposed to OOCSS or style sheets in Adobe product. (if there is an overriding style function in Sketch, please let me know.😃)

I found that solution in the Atlassian design guidelines.