Turning an F or Z path into coordinates
Sketching an F or a Z by hand is easy enough, but putting guides on an actual mockup takes pixel coordinates. Enter the canvas width and height plus the position of two horizontal lines as percentages, and you get the start and end coordinates and length of every segment, the points where the vertical or diagonal stroke meets a horizontal, and the total path length. The second horizontal has its own length input, so the short second bar of an F can be as short as you want.
The origin sits at the top left and y grows downward. Each horizontal y is the height times its percentage, and the end x of the second F bar is the width times its length percentage. The diagonal of a Z joins the ends of the two horizontals, so its length comes from the Pythagorean theorem and its angle from an arctangent, reported in degrees. Lengths and angles both display to two decimals. This is geometry only as of October 2026; no eye tracking data is built in.
The page returns path coordinates and nothing else. It does not say which segment should hold your logo, headline or button. F and Z patterns are models that describe reading behavior, and there are no correct coordinates that hold for every screen. Real eye tracking results, heatmap analysis and vertical scrolling behavior on mobile are out of scope.
Frequently Asked Questions
They are percentages of the canvas height. Measure where the headline and the first body line sit in your mockup, convert those to percentages, and the path matches that screen.
The page does not choose for you. Both are models of reading behavior with no recognized rule for picking one, so content density and the purpose of the screen have to decide it.
That is beyond what this page can answer. It calculates coordinates; any effect on conversion has to be confirmed with your own user data.