Fernando Kylas · Brand system v3.1
Strawford and Geomanist, rendered in the licensed faces. Every value on this page is drawn from the measured font metrics recorded in design documentation/typography-v3.1.md.
Strawford x-height 450 · Geomanist x-height 500 · shared cap height 700 · Strawford line box 1.20 em · Geomanist line box 1.00 em.
Two families, split by what the text is doing rather than by heading and body.
Strawford · the memorable voice
Ideas worth remembering.
Hero statements, editorial headlines, pull quotes, section introductions, case study titles and key figures. Low x-height and long ascenders give it air at large sizes. It loses that quality below 22 px, so it is never used for anything the reader has to work through.
Geomanist · the clear voice
Words worth reading.
Long-form copy, navigation, cards, interface, forms, lists, explanations and metadata. A larger x-height and a tighter line box make it dense, calm and highly legible at text sizes. Geomanist Bold becomes the primary display voice when a statement needs to land immediately rather than gracefully.
display-l 84/84 −0.030emGeomanist Bold statement-m 52/54 −0.016emStrawford display scale
Geomanist statement and text scale
Measure
620 px · 66 characters · correct
Answer that first, and design, build and budget all become simpler. Skip it, and even a good-looking website keeps underperforming for reasons no one can quite name.
920 px · 98 characters · too wide
Answer that first, and design, build and budget all become simpler. Skip it, and even a good-looking website keeps underperforming for reasons no one can quite name.
340 px · 36 characters · card only
Answer that first, and design, build and budget all become simpler.
Tracking
−0.061 em · the current file · too tight
Long-term impact
−0.026 em · specified
Long-term impact
0 em · untracked · loose at display size
Long-term impact
Colour usage
Light paper
Ink #0A0A0A · 18.9
Body #4A4A4A · 8.0
Green · 2.6 · marks only
Green fails text contrast on light paper at every size. It is restricted to rules, dividers and marks.
Dark ink
Reverse #FAFAF7 · 19.2
Body #ADADAD · 8.9
Green · 6.9 · text safe
On dark ink green passes for text as well as marks. This asymmetry is deliberate.
1440 canvas, 96 px page padding. Vertical rhythm on the 8 px scale, with group spacing at least twice the spacing within a group.
Digital impact consultant, Mauritius
Fernando Kylas
Web design, SEO and long-term website care for businesses that value clarity, performance and sustainable growth.
Based in Mauritius. Working with serious businesses locally and internationally.
display-xl 104/102 −0.032em · LightTwo lines, 24 and 17 characters. Optical left compensation −0.022 em.The starting point
A website request is usually a symptom. Underneath it sits a decision that was never made clearly, and no amount of design will settle it afterwards.
Geomanist Bold as the primary display voice.
statement-xl 96/92 −0.024em · BoldGeomanist leads where the sentence is an argument rather than an image.Website strategy
Answer that first, and design, build and budget all become simpler. Skip it, and even a good-looking website keeps underperforming for reasons no one can quite name.
Typically a 90 minute call, followed by a written summary.
display-l 84/84 −0.030emAsymmetric 800 / 640 split. Text column holds its own 96 px padding.Sound familiar?
Underneath it sits a decision that was never made clearly. These are the patterns I see most often, and they are rarely solved by adding features.
display-s 48/53 −0.022emLabel column at 260 px sets the editorial rhythm without a card.Seven services. One operating model, not a menu.
The decision that comes before design. What the website is for, who it serves, and what it must make easy.
→Lean WordPress architecture built around clarity, conversion and long-term maintainability.
→Structure, crawlability and content architecture, set once and correctly rather than patched later.
→Built to be useful after launch. Hosting, maintenance and support that keeps the asset working.
→heading-m 28/34 for titlesEditorial list with hairline rules. No equal-weight card grid.Outcome
Fewer
decisions
A clearer structure means fewer open questions every time you publish.
Search
Found by the right people
Sustainability
Lighter pages, lower footprint
After launch
Built to be useful after launch, not just at handover
→Insight
12 min read
Updated July 2026
A website request is usually a symptom. Underneath it sits a decision that was never made clearly.
Most briefs arrive as a list. A new homepage, a blog, a booking form, something that looks more modern. Each item is reasonable on its own, and together they describe a website that nobody has decided the purpose of.
The uncomfortable part is that the list is usually accurate. The pages really are unclear, the site really is slow, and search really does ignore it. What the list cannot tell you is which of those things matters first, because that ordering depends on a decision about who the website is for.
Answer that first, and design, build and budget all become simpler. Skip it, and even a good-looking website keeps underperforming for reasons no one can quite name.
“A website should make the right decision feel obvious.”
That is the test I apply to every page. Not whether it looks current, but whether a person who has never met you can tell, quickly, whether you are the right choice.
display-m title · body-l 19/31 at 680 pxHanging opening quote, indent −0.38 em.Case study · 01
2026
IT Solvz
Website redesign · WordPress · Technical SEO · Performance
+68%
qualified enquiries
1.2s
largest contentful paint
94
accessibility score
display-l · Geomanist Bold stat-l 64/62Figures are cap-height lining, so they align to caps and not to x-height.What working together is like
“He asked better questions than we had asked ourselves.”
Placeholder attribution
Role, organisation
Let us talk it through. No pitch, no obligation, and a written summary either way.
1200 × 627 for single images, 1080 × 1350 for carousels. Feed reading is fast, so Geomanist Bold leads more often than Strawford.
Point of view
It is the structure that makes every design decision easier to understand.
Fernando Kylas
statement-m 52/54Educational
01 · Is this for me?
02 · Can I trust you?
03 · What happens next?
Fernando Kylas
Thought leadership
They have a clarity problem, and it shows up as a redesign request.
Fernando Kylas
display-m, slower and more reflective.Quote
“A premium website is not the one with the most effects. It is the one that makes the right decision feel obvious.”
Fernando Kylas
Client story
+68%
qualified enquiries after a structural redesign
IT Solvz
WordPress · Technical SEO
Fernando Kylas
stat-xl 88/84 · the figure is the message.Carousel · 1080 × 1350 · five slides
01 / 05
Fernando Kylas
02 / 05
01
Clear positioning helps the right visitor recognise themselves immediately.
Fernando Kylas
03 / 05
02
Evidence, process and specific expertise reduce perceived risk.
Fernando Kylas
04 / 05
03
A clear next step turns understanding into action.
Fernando Kylas
05 / 05
Start with a website review.
Fernando Kylas
CarouselOne display voice across all five slides. Consistency beats variety.
1200 × 630. Mixed audience and heavier feed noise, so headlines run shorter and contrast runs higher than on LinkedIn.
Promotional
A structured review of design, SEO, performance and maintenance, delivered as a written plan.
Fernando Kylas
Educational
And search engines notice. Performance is a content problem as much as a technical one.
Event
Thursday 14 August, 18:00, Port Louis. Limited to twenty seats.
Fernando Kylas
body-l, never in the display line.Quote
“Your website should not be the weak link.”
Fernando Kylas
display-s. Longer ones drop a step.1080 square, 1080 × 1350 portrait, 1080 × 1920 story. Stories keep the top 250 px and bottom 320 px clear of platform interface.
Square
It is the structure that makes every design decision easier to understand.
Fernando Kylas
Quote card
“A website should make the right decision feel obvious.”
Fernando Kylas
Portrait
Web design, SEO and long-term care for businesses that value clarity.
Fernando Kylas
Story
Swipe up for the full breakdown.
Fernando Kylas
Carousel cover · 01 / 04
Swipe →
02 / 04
01
A new homepage, a blog, a booking form. Each item reasonable on its own.
Fernando Kylas
A4 portrait at 1240 × 1754, and 1920 × 1080 for presentations. Restraint is the point. These are read in a decision-making context, not a feed.
Fernando Kylas
Proposal
Prepared for
a client report
23 July 2026
Fernando Kylas
Report · 2026
Findings, priorities and a sequenced plan.
Confidential
Fernando Kylas
Workbook
A working session in five parts.
Name
Organisation
Fernando Kylas
July 2026
Presentation
How the seven services fit together, and which parts your website actually needs.
Case study · 01
+68%
qualified enquiries
1.2s
largest contentful paint
IT Solvz
Fernando Kylas