Responsive typography

Interaction design is engineering: it's not about finding the perfect design, it's finding the best compromise, which means it requires you to think about compromises between visual design and technology from the very beginning.

The content matters

• The content and the language used has a big impact on how our typography will work. Oliver Reichenstein also states that different font sizes and contents have different influences on our ways of writing, editing and reading.
• Typography for the web should design inside the browser with the project's real content.

Typeface

• Choose the typeface fits the right tone (based on the real content) of the website.
• The size of the body text depends on reading distance, and reading distance varies depending on the device used or held.

Line height

• 140% is a good benchmark for line height but it also depends on the typeface you use.
• Use tighter leading in a narrower paragraph, and looser in a wider one.

To take reading distance into account, the smaller the screen size it is, the smaller the type size and tighter the line height should adopt, so that the perceived size is more or less the same as on all devices.

Additional tips

• Always use non-breaking spaces( ) in expressions in which figures and abbreviations are separated by a space (e.g. 20 kg, 4:00 pm).
• Try to keep the line length between 45-75 characters per line.

Useful tools

• Web Font Specimen, Typecast app (14-day trial) and Typekit’s font browser.
• For testing: Resizer Safari Extension

Source: Responsive Typography: The Basics by Oliver Reichenstein, Prototyping Responsive Typography by Viljami Salminen.

The UX design process and methods

Research and understanding
Define the problem Create a focus question as the initial direction. Collect the facts of business requirements and user needs through: Read prior reports, speak to the people who deal with customers, and survey and classify the customer calls. Careful observation - be aware of these details. Interviews: start to conduct interviews and tips for interviewers. Produce useful documents to help with design thinking Rich pictures, design the box Personas, scenarios and stories should include the targeted user's primary goals, workflow, mental models, tools, working environments, and terminologies. Red routes / core and path / main user journeys: Function familiarity test
Design
Generate dozens of ideas or paper interfaces Develop interactive paper prototype Test the prototypes quickly, iterate on the ones that have value, evaluate and combine the best parts into a converged solution: open card sorting, tree test, trigger word elicitation, swap sort and online card sorting, cognitive walkthrough, word list. Electronic prototype: using one tool throughout. Iterative process
Evaluation throughout the design process
Qualitative and quantitative data Collect qualitative data to identify usability problems, then use quantitative survey to make predictions and measure the usability of a system Word list Can be both qualitative (circle words from a checklist of adjectives) and quantitative (Use word cloud or count the positive/negative comments). Card sorting Tree test, function familiarity test Cognitive walkthrough A happy path and 4 questions interview to identify usability problems. Usability testing software: Morae, Silverback Questionnaires: AttrakDiff Create and present a clear series of next steps